• Learn how to Run Mac Snow-Leopard on Ubuntu using Oracle Sun Virtual-box
  • Are you a Turbo C++ addict/? Learn how to emulate Turbo c++ with Dos-box in a few steps.
  • Ubuntu's purple love-- A Clean and minimalistic wallpaper for your Desktop.

How to Protect CSS Mods for any WordPress Theme

I know you’re out there. You, the keen Web designer who rolls out both client and personal sites by modifying the CSS styles of existing WordPress themes.
You’re smart, and I like that about you — after all, there’s no sense in reinventing the wheel with every project now, is there? Utilizing WordPress themes, or Website frameworks, is the only way to fly these days. But there’s one major problem here. Whenever one of your favorite theme frameworks is updated, you have to identify the new changes, re-implement your CSS mods, and then move ahead from there. That might not sound so bad, but I know there are tons of you out there who make hundreds of modifications. Suddenly, that molehill really is a mountain. Are you sure you want to keep spinning your wheels every time a new version of your preferred framework is updated? What you need, my friend, is a futureproof, bulletproof means of protecting your CSS mods so that you can ride the wave of agile development without the associated headache from upgrading!

The Simple Way to Futureproof Your CSS

As a theme developer, I’ve been able to witness firsthand the sheer agony that people are confronted with when they try to adapt their existing design modifications to a theme upgrade. Couple that with another variable like the recent release of WordPress 3.1, which also changes the game, and you basically have mass confusion and an overwhelming sense of what can I do now? Never touch the original stylesheet again — it’s just not the most secure, most efficient method of operation! On top of that, it would be nearly impossible for you to go through a stylesheet that you’ve hacked up and pinpoint each and every little thing you’ve changed.  Starting today, you can futureproof your CSS changes by implementing a custom stylesheet that simply overrides the styles defined in the theme’s original stylesheet. Here’s what you need to do:

Download the custom.css file 
Get it by clicking this link here.
Modify your theme’s header.php file

Open up your desired theme’s header.php file and insert the following code between the <head> tags:

<link rel="stylesheet" href="<?php bloginfo('template_url');
 ?>/custom.css" type="text/css" media="screen" />

Use this code if you want to copy and paste that last line for your own use. Next, while still inside the header.php file, locate the <body> tag and append it with a CSS class called custom. Once you’ve done that, your resulting <body> tag should look something like this:
<body class="custom">

After that, save the header.php file and upload it to your server.
       Implement custom styles
Follow the instructions outlined in the custom.css file, or else check out the rest of this article to get an idea how these custom styles work.

Custom Styling Example

To illustrate, let’s assume that your theme’s original stylesheet contains links defined like so:
a { color: #009; text-decoration: underline; }
a:visited { color: #999; text-decoration: underline; }
a:hover { color: #c00; text-decoration: underline; }

In layman’s terms, the above code essentially defines unvisited links as blue, visited links as gray, and hovered links as red. Also, based on that code, links will be underlined. Let’s say, however, that you want unvisited links to be green (#090) and hovered links to be orange (#f60). You’re going to leave visited links as gray because that works well with your site. Also, you’d prefer to remove underlines from all links because you like a cleaner look. Here’s what you would need to define within custom.css in order to make that happen (changes arehighlighted):
.custom a { color: #090; text-decoration: none; }
.custom a:visited { color: #999; text-decoration: none; }
.custom a:hover { color: #f60; text-decoration: none; }

Because of the rule of specificity, which is a behavior intrinsic to the way CSSworks, the styles you define with the .custom prefix will override those defined in the theme’s original stylesheet.


Post a Comment