Futureproof CSS styling
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 2.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. Download the Custom CSS File for WordPress 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 the image at right or from 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 are highlighted):
.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 CSS works, the styles you define with the .custom prefix will override those defined in the theme’s original stylesheet.

The Bottom Line

I mentioned agile development earlier, and I can’t stress enough how important it is (and is going to be!) to position yourself to adapt successfully to the rapid-fire world of Web software development. Since January of 2006, WordPress has rolled out two major updates, and that same timeline has also been dotted with smaller updates as well. Since I launched the Cutline Theme for WordPress in September of 2006, I have rolled out five upgrades. That’s an average of one upgrade per month. See what I mean here? If you want to make continued use of the most up-to-date Web publishing software and avoid upgrade headaches, then you’re going to need to implement best practices for agile development. As someone who develops and tweaks themes regularly, I’m here to tell you that customized CSS styling is an excellent place to start.


Name (必填)

Email (必填)


Speak your mind