Plugin of the Week: My Custom CSS

Have you ever had to hack the CSS for a WordPress theme or plugin only to later upgrade the theme or plugin and realized you lost your changes? Wouldn’t it be great if someone made a plugin that let you keep the CSS modifications stay intact whenever you updated your theme or plugin?

My custom css

It took us a while to find something like this but we found “My Custom CSS” plugin by Salvatore Noschese. This little great WordPress plugin tkeeps your custom CSS override regardless of what theme or plugin you’re using. Remember that if a certain class isn’t working, you may need to add the “!important” tag like in the screenshot above.

Get it: My Custom CSS

 

Quick tip: Styling posts with a different background

Here’s a typical scenario: Say you have a WordPress blog and wanted to highlight certain posts (blog entries) on the home page to show up with a different background color or other styling like a border to draw more attention to these posts.

So how do you do that? With WordPress it’s surprisingly easy to do and it’s a good way for beginners to start theme hacking. As always make sure you have a backup copy of your original theme file that you can re-upload via FTP in case something goes wrong.

In this example, let’s say that you want posts for “events” to have a slightly gray background.

So the first thing is to mark all your post(s) with the “events” category in the WP admin post editor.

Then you would go to Appearance -> Editor and select the “style.css” file (or if you’re using something like Pagelines or WooThemes, go to your theme control panel’s custom CSS editor page).

Then you’d add something like this to the bottom of your CSS file.

.category-events
{
background-color: #e9e9e9;
padding:5px 10px 5px 10px;
}

And voila, if the CSS class matches the actual “slug” name being generated by WordPress, all the “events” posts on the home page will have a light gray background.

The important thing is that the CSS class (e.g; .category-events) matches the WordPress slug for that category. Sometimes if you have previously deleted that category and re-created it, WordPress will add “-2” to the end of that slug. You can tell what the slug name is by looking in the slug column in Posts -> Categories. Unfortunately other than directly editing the MySQL database there’s no easy way to rename or delete category slugs.