Photo Seller – best way to change settings in an album CSS file

[GracieAllen]

I’m making a few miniscule changes to the album covers. Font size, spacing, padding, nothing big. I’ve altered the existing CSS so it largely does what I’d like.

A year (or so) ago, in response to a similar question, y’all recommended /wordpress-custom-css-plugin-6413 as a solution. Is this still the recommended solution to modify the css without having to redo it every time there’s an update?

[wzp]

Yes.

Use the following plugin to add your custom CSS tweaks:

https://www.tipsandtricks-hq.com/wordpress-custom-css-plugin-6413

[GracieAllen]

This plugin doesn’t appear to be working… I downloaded and installed the plugin. Activated it and put a definition in there:

#albumcontainer .album_item_bottom_t2 .album_item_name_t2{

font-size: 24px; //10px;

}

which is a piece from a larger one. This is from album-template-2.css.

Nothing happens.

If I change it in the actual css file, it works. In here, nothing……

Is there something that isn’t in the video that I need to do to get the site to recognize there’s special CSS sitting there, and to use it to override the original css file?

[Peter]

You should completely remove the following portion from your code because it is incorrect syntax:

//10px;

If the above does not fix your issue, can you show us the page where you are trying to make the change so I can inspect it with firebug?

(but please make sure to firstly correct your code as suggested above and leave your amended CSS code inside the custom css plugin so I can see it on your site)

[GracieAllen]

Thanks Peter. Now, unfortunately, I have to ask for a basic css lesson… I looked at other css files, and found places where they created what I THOUGHT were comments using the “//” thing. Does this NOT make the following rest of the line a comment? I”ll go do some research and see what I’ve got wrong, but, if this isn’t the comment delimiter, can you tell me what is for css?

I”ll go update my updated css and see if it works…

[GracieAllen]

I changed the css that’s in the custom CSS plugin. I pulled everything out except these two pieces:

#albumcontainer .album_item_bottom_t2 .album_item_name_t2 a{

text-decoration: none;

color: #ff0000;

}

#albumcontainer .album_item_bottom_t2 .album_item_name_t2 a:hover{

color: #00ff00;

}

At a minimum, the top one of these should set the caption text on the lowermost album and gallery thumbnails to red… they don’t.

I can change the actual plugin CSS and the changes show up. These don’t even through they were copied directly from the CSS and all I did was modify the value for color…

What am I doing wrong?

[Peter]

As mentioned before please show us the page where you are trying to make the change so I can inspect it with firebug.

(also make sure that you have removed any changes you made to the original plugin css file and only put those changes in the custom css plugin)

[GracieAllen]

The link to the home page is [www.dperezphoto.com/wordpress/]

Once there, click the icon for “ACFA Cat Shows” (top left). On the next screen, the custom CSS should be making the text in the box either red or green (it typically uses the one that makes it green). If I take the exact two lines in the plugin’s CSS and make exactly the same changes, the changes take effect.

If you click either of the album covers on that page, you’ll go to a gallery page. Again, the text should be (I believe) green.

I figure it’s got to be something I’m missing that incredibly simple, but…

The plugin should be original – I re-installed it the other day to erase my changes.

[Peter]

The following slight modification to the CSS will do the trick:

#albumcontainer .album_item_bottom_t2 .album_item_name_t2 a{

text-decoration: none !important;

color: #ff0000 !important;

}

#albumcontainer .album_item_bottom_t2 .album_item_name_t2 a:hover{

color: #00ff00 !important;

}

[GracieAllen]

Thanks Peter. I’ve never used the “important” tag because I don’t have a real understanding, and the common sentiments I’ve read… This is what I’ve most often run into when trying to understand this qualifier:

“Using !important has its purposes (though I struggle to think of them), but it’s much like using a nuclear explosion to stop the foxes killing your chickens; yes, the foxes will be killed, but so will the chickens. And the whole neighborhood.

It also makes debugging your CSS a nightmare.”

I’ll put “important” on the CSS I’m adding and see if it works….

Thanks again.

[Author]

Posts