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.
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.cssfile - Get it by clicking the image at right or from this link here.
- Modify your theme’s
header.phpfile -
Open up your desired theme’s
header.phpfile and insert the following code between the<head>tags:<link rel="stylesheet" href="/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.phpfile, locate the<body>tag and append it with a CSS class calledcustom. Once you’ve done that, your resulting<body>tag should look something like this:<body class="custom">
After that, save the
header.phpfile and upload it to your server. - Implement custom styles
- Follow the instructions outlined in the
custom.cssfile, 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.
97 Comments ↓
This solves THE problem that I’ve hated since the beginning of this madness.
You are now responsible for the writing of a few more immortal poems, instead of the re-writing of CSS mods.
Nice Pearson, really nice. Beer will be flung in your honor tonight.
Did someone say beer?
[...] Chris Pearson has just written a dynamite post on how to use custom CSS with a Wordpress theme. It is especially important if you tweak your themes a lot, and the theme designer is highly active in upgrading themes with new features, and also helps if you tend to switch themes for various custom elements. A lot of plugins for instance ask you to add some CSS to your main CSS file, because they don’t inject it into your header automatically. [...]
Hmmmm..seems like the K2 scheme idea. But still a clever way
Thanks for sharing.
Wow! That’s cool. I’ve used a secondary css files quite a bit to override original theme style but had never thought about using specificity to such an advantage. I’m going to stick this one in my toolbox right next to my pair of pliers.
Nice work Chris, really nice work pointing this out.
However, I stand by the fact that if anyone has been a web designer for over a year, you should already know this by now.. especially if you use CSS daily and work with selectors, id’s, hacks, etc…
But again I know many people don’t normally do this day in and day out and might not have the experience with CSS to know this, which is why I say Good Job Chris!
And if you use
replace
.custom –> .mycustom
and
The problem it’s here another time??
Denis de Bernardy has been doing this with the Semiologic theme since 2005. It is a very good way of handling customizations of distributed themes.
Great tips Chris, I’m sure this will save people a lot of headaches.
James, I think you’re comment is exactly how I feel too.
Good advice overall, but this CSS comparison is hardly impossible. Developers do it almost every day.
…and I’m saying that developers who routinely make use of WordPress themes — specifically, themes that are updated frequently — could save themselves time and energy by adopting this method.
Interesting information for someone just getting started with Wordpress and who happens to be a bit of a CSS Noob :^)
Nice, but my plugin is a little easier.
I’ve been using this plugin for the last few months. It’s simple and easy. No need to modify the header or body tag.
Thank you so much for this.
Just curious, what if a user wanted to modify IDs in addition to classes? Or add new IDs/classes? What do you do in that scenario?
Or you could learn a bit of CSS and make your own theme.
Arun — This works the exact same way. For instance, let’s say that you want to pinpoint the
h1element, which sits inside adivwith an ID ofmasthead.Based on the method described in the post, you would target the
h1with this line of code:.custom #masthead h1 { ...css here... }Chris — Cool, thanks. I’m working on developing my own theme, and I’d like to be able to offer this method to people using my theme. Thanks
[...] How to Protect CSS Mods for ANY WordPress Theme will do (tags: webdesign wordpress css) [...]
[...] Check out Pearsonified for all the details. Tags: [...]
[...] Utilizing WordPress themes, or Website frameworks, is the only way to fly these days. [...]
[...] read more | digg story Make money with PaidSurveysOnline.com - #1 Survey Site. Earn $1,000 a day! with ForexEnterprise HomeTypers: Get Paid Typing Data! Make $5,000 Weekly Easily! Bookmark on del.icio.us [...]
Now there’s a thing I should remember for the next update. Kuddos!
[...] How to Protect CSS Mods for ANY WordPress Theme [...]
[...] read more | digg story Posted at February 7th, 2007 by se7en | | | | | [...]
These advises are truly important and I’ve learn a lot about it. I hope you have more posts like this coming….
[...] Technorati Tags: css, wordpress, themes, wordpress themesread more | digg story [...]
[...] : asides - wordpress - code | created mid-morning - it was 10:02 am to be exact | trackback | rss| [...]
I just can’t see rolling out a ton of client websites based on a default Wordpress theme or on somebody else’s theme. If I’m going to use Wordpress for a client site then its going to be with a theme that I’ve developed and have control over. Having said that, I’d be using a base style sheet and then a second sheet to customize it for the client. I guess that’s why they’re call Cascading style sheets!
Hey was quite interesting and insightful.. not just this blog.. but whatever little I browsed through your site..
This is really helpful.. coz I’m a novice with web designing..
Great tip. I am currently screwed with the new wordpress and all of my little css tweaks…
Off Topic Slightly -
I really like the links at the end of your posts…most wordpress plugins for social linking seem to display picture links…how about an article (or a little help) about social bookmarking and link generation in posts
[...] How to Protect CSS Mods for ANY WordPress Theme (tags: WP_Themes) [...]
[...] How to Protect CSS Mods for ANY WordPress Theme (tags: wordpress css webdesign blog themes theme templates template Hacks wp) [...]
[...] Chris Pearson, a forward thinking kind of guy that he is has developed a great work-around for this which basically allows you to create a Custom CSS file that regardless of how you install or when you install it; it keeps your theme as fresh as the day you first built it. [...]
[...] How to Protect CSS Mods for ANY WordPress Theme (tags: wordpress CSS) [...]
[...] How to Protect CSS Mods for ANY WordPress Theme>> [...]
[...] Check out Pearsonified for all the details. [...]
[...] For nylig faldt jeg over et forslag til, hvordan man kan adskille sine egne ændringer i style-sheet’et (CSS-filen) fra temaets style-sheet. Ser umiddelbart interessant ud, selv om jeg ikke selv har afprøvet tricket. I kommentarsporet til artiklen nævnes to plugins som kan nogenlunde det samme. Links til disse plugins: her og her. [...]
[...] Nah, Chris Pearson di Pearsonified mempunyai solusi untuk membuat CSS anda lebih aman. Silahkan baca detailnya. This entry was posted on Wednesday, March 7th, 2007 at 9:17 am and is filed under WordPress Tips. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. Add this post to : Del.icio.us - Meneame - Digg [...]
[...] How to Protect CSS Mods for ANY WordPress Theme 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. [...]
[...] How to Protect CSS Mods for ANY WordPress Theme 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. [...]
Chris, I am absolutely in love with your Cutline Theme, and the ability to protect css mods. You are brilliant.
I do have a question…I am a noob to WordPress and modifying Wordpress themes, though I am familiar with some CSS (okay, I am a graphic designer - I never claimed to be great at any coding!). I would very much like to be able to add a background to my theme. I have searched high and low on the ‘net and cannot find out how to do it with the Cutline theme. I want to do something similar to what Ben Gray at Openswitch.org has done with his theme.
Could you give me tips, or point me in the right direction? Any help would be truly appreciated!
CJ — I just had a look at your site, and it looks as though you’ve figured out how to add a background image.
Should I assume it’s all good?
I was just coming here to tell you that…yes, I figured it out.
Thank you again for an awesome theme!!
[...] 经典文章 如何使用 OpenID 设计5原则 大众化的 Ruby on Rails 15 个生僻的 CSS 特性 IE 里的页面错位 对比 X/HTML 5 和 XHTML 2 WYSIWYG 编辑评估 (2007) 练习一些生僻的 HTML 标签 打破僵局的 8 招 Web 设计 如何保护任意 WordPress 模板的 CSS 最佳 web 交互界面设计 做个漂亮的 Favicon [...]
Just making a comment on it’s hard to find where to post… ie maybe it would be better at the start of the comments to add new comments?
Like your blog n reviewing to for awards [My personal awards Ha!]
Also the date on your cat photo looks like it’s from 2005… and we all know that’s not true but the neophites like me may be confused…
Have you got a rhyme n reason to the colors and the call out on side here… does the plane mean friggin’ foreigner like me?
Peut être je dois continuer en français maintenant?
I’m using the sandbox for all my sites and I’ve been modifying the CSS accordingly. It’s a pretty complicated CSS file with lots of div#blah-blah selectors.
My question
Can I modify those div#blah-blah selectors from the custom css file?
If so, can you give an quick example of how the selector would look?
Would it be:
.custom div#blah-blah p { etc. etc.}
Thanks!
Don — You’re on the right track with that solution. Just be sure to append the
<body>declaration with thecustomclass, and then the statements you wrote above should work like a champ.There’s always the chance that you’ll need to append some of your new CSS declarations with
!importantin order to instantiate the changes, but for the most part, you should be fine with the statements you’ve posed above.[...] http://www.pearsonified.com/2007/02/how_to_protect_css_mods_for_any_wordpress_theme.php Posted in clever, tricksandtips, repost, hacks, design, css, wordpress. [...]
[...] How to Protect CSS Mods for ANY WordPress Theme - 52 [...]
[...] How to Protect CSS Mods for ANY WordPress Theme - 52 [...]
[...] 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! [Read more →] [...]
[...] How to Protect CSS Mods for ANY WordPress Theme (tags: css) [...]
[...] How to Protect CSS Mods for ANY WordPress Theme (tags: css) [...]
[...] April 18, 2007 bei 12:44 · Gespeichert unter Kunst, Links, Code Durch einen Link auf diesen hilfreichen Artikel für alle die ihr Theme modden, den ich heute morgen von AEA bekam stiess ich schliesslich auf diese wirklich wunderbaren seiten internationaler Straßenkünstler oder Streetartists (whatever) [...]
Thanks for posting such a informative development.
Hi Chris,
Not sure what I am doing wrong, but here is what I have put in custom.css to get a slightly larger font size using Cutline:
.custom body {
background: #fff;
color: #333; font: 70.5% Georgia, “Times New Roman”, Times, serif; text-align: center;
}
(Changes from 62.5% to 70.5%).
I see no difference at all after implementing. Is it because my change is “too minor to notice,” or is the body tag the one thing that can’t be re-done, or none of the above?
Thanks much!
Bruce — Try 75% instead of 70.5%.
Thank you, Chris. I tried that, ensured that my Firefox cache was cleared, and still couldn’t see any difference. A bit of a puzzle. However, I think I’ll just comment the custom body css back out, and leave as was. The original design is really good, I was just looking to tweak the font just a bit. I am apparently not doing something else that I should be doing, but I don’t want to waste any more of your time doing it.
Thank you again.
Bruce — I figured out your problem. In your custom stylesheet, your declaration reads like this:
.custom body { ... }It should read like this:
body.custom { ... }Chris - that works beautifully!
Thank you very much!
Best regards,
Bruce
Arggh, fools by the title “Protecting CSS Mods for Wordpress..”. I thought it’s about how protecting css theme file from being seen by others..
It just protecting your original css file from being touch/edited when doing upgrade..
But, thanks for the informative resource Chris..
I think this method will make your life easier, but make your server life harder. It gonna bloats your framework package size after couple times upgrades, since it left the css garbage code intact. The server have to reads all the code when loading/parsing the web page and can affect the performace.
Btw, you have a very nice theme design…
Can you also make it public to download like Cutline?
Luke — Thanks very much, but I won’t make this layout available for public release unless I end up moving on to a new design.
That said, I think future theme releases ought to quell those desires…
Hi Chris,
I just stumbled upon your site.
All I can say is, “Wow!”
Thanks for all the tips you’ve shared.
Coming from a print-based graphic design background, I’ve transited to learn web designing some time back.
It was the time when table-based design was the way to go.
When CSS-based web design came about I saw the advantages and jumped on the bandwagon to learn CSS.
Ever since I’ve thrown away all I’ve learned from table-base web designing and have been meddling with CSS.
All this time I was using HTML authoring software cos I’m more a visual designer than coder. I rely on the software’s editors (HTML & CSS) to write the codes. I can’t write them by memory!
But somehow I don’t seem to be able to have any “breakthrough” with my skills, eg. the various cool CSS techniques I’ve seen … on your site, for instance.
Do you think one should learn and memorize the coding syntax by heart rather than depending on the editors in order to excel in CSS-based web design?
Thanks.
Sherman
[...] Pearson does nice work. He posted this article on modifying WP themes a few months ago but if you’re interested in hacking your theme and haven’t read it - [...]
Sherman — I definitely think there’s a benefit to knowing and understanding the way CSS and XHTML truly work, especially across a variety of modern browsers. You really have to know what you can and cannot get away with, and at the same time, you should always strive to make things as simple as possible.
To be honest, I think that working with code and exploring new horizons with your design elements are probably the best way to learn, and more than anything, it’s simply going to take time to master the various techniques.
Thanks，Chris ！good wish！
Chris, great article! I am redesigning my website right now and this is a great help. Thanks for the effort..
CSS is one off powerfull way to make good layout. And understanding CSS is one of key of success
I am getting hungry when reading your post. Please go on. I would like to improve my CSS and Wordpress is a good example to start with and this blog is a great place to learn from. Come on, Chris! We want more!
Excellent idea but won’t work with a Sandbox based theme as it’s body tag is precoded with:
“>
which results in this, for example:
when the page is generated. To get around this? Probably just move the preferred layout code into the main style sheet and alter the body tag per this post. Sandbox uses secondary style sheets for alternative layouts of sidebars. I’m doing a mod that lets the viewer switch the layout on the fly, but this posts idea won’t work with that in effect.
Oops. That code didn’t show up. What it should have read was, with * instead of the correct angle brackets:
*body class=”*?php sandbox_body_class() ?*”*
resulting in:
*body class=”wordpress y2007 m07 d07 h18 home”*
I use DreamHost which has one-click installation of Wordpress and other software. They also have one-click updates. I heavily customized several Wordpress installations, both in the css & in the core php files, and was very nervous about pushing that one-click “Upgrade Wordpress” button! Finally, I tried it on a minor site. It worked flawlessly. I proceeded to upgrade all my Wordpress installations, and all my customizations were retained. Congratulations, DreamHost, I don’t know how you do it, but thanks!
this is great, going for a site redesign soon so I’m gonna use this tip, plus the YUI grid css…mmmm!
i was wondering if i need to protect the css file in any simple design in html file not in in the wordpress theme or templete
this html file linked to an external css file
This is a wonderful solution. However, the theme I am using is actually taking advantage of the body class. So what I did was to open a new span tag right after the body tag, and close it at the end before the body tag closes.
However, for some reason I have issues with this in IE6 (not much surprise) and Opera. This is pretty weird.
Any idea why something like this might happen?
Thanks
This is a wonderful solution. However, the theme I am using is actually taking advantage of the body class. So what I did was to open a new span tag right after the body tag, and close it at the end before the body tag closes.
However, for some reason I have issues with this in IE6 (not much surprise) and Opera. This is pretty weird.
Any idea why something like this might happen?
Thanks
This is such a fantastic idea, I’m grateful to have run across this post. I’m working on implementing this at my website. If you have any ideas or suggestions I’d love to hear them also!
Keep up the fantastic work!
hey guys
…. actually one of my friends told me the solution thanks for him .
i was note in the second comment that i was talking about a simple html file and its external CSS file . i know that to make all your css code in an external one of simple and nice ways to protect the css code.
but…
you might be miss understood me .. i was asking for a method to protect my external css file cause i designed a website and someone very easily ripped it and even he linked his stolen page with my css file not copied it . so i was search for a way to protect my coming css files
[...] an adaption of the wonderful sunsetidea theme by Robbie Williams. Using a custom.css as described here makes it easy to adapt a theme without altering the original css. The lovely flower image is from a [...]
[...] an adaption of the wonderful sunsetidea theme by Robbie Williams. Using a custom.css as described here makes it easy to adapt a theme without altering the original css. The lovely flower image is from a [...]
[...] Copyblogger Theme is a single sidebar theme with simple and clean design: black header, white background, and red link. The theme is highly customizable with custom stylesheet solution. [...]
[...] Here is the simple way to futureproof your CSS mods and avoid those upgrade headaches forever.read more | digg story « Why console apps still rock OZZFEST 2007 TO HAVE FREE TICKETS » [...]
Hi Chris,
When I loaded the fabulous NeoClassic theme, I got this underneath Catagories”
Fatal error: Call to undefined function: wp_list_categories() in themes/neoclassical Folder/sidebar.php on line 12
Can you tell me what I need on line 12?
Speak as you would to a child; this is all new to me.
Thanks,
Saitia
[...] Lösung wurde schon einmal bei Perasonified vorgestellt, leider war sie mir nicht bekannt und ich möchte nun nochmal auf diesen Beitrag [...]
Nice, so simple & elegant. Thank you, thank you.
i also do this stuff, and well like you i don’t change the main css or the original css because if you mess on your work you must have a clean copy or the original one..
Really nice post, simple and elegant. Thanks chris
Thanks Chris…
Hi Chris and everyone,
I’m totally new to all this and am trying to get my head around all these new concepts. The custom.css file sounds like an extremely sensible concept, even to a novice like myself, but if I may just recap to make all this completely idiot proof: I download the custom.css file, make the changes to the header file, save the header file (not sure how I upload it to my server - I was under the impression I’d already done so - no?) … and then I can safely edit all other aspects of the theme and it will still correspond to future upgrades ..?
Am I understanding all this correctly??
Secondly:
Does the Neoclassical theme support the ShareThis plugin? If I’m not mistaken it’s a Wordpress 1.0 version, but the plugin requires 1.5 or higher. If not, any plans for upgrading the theme to support this feature?
- Thanks for the wealth of information here. What a fantastic site!
Wow that’s impressive!
Thought about making a wordpress site, but Drupal seems to have it all.
Very useful! A def dig for me! Thanks!
Hoot and/or Holler ↓