the-deuce.jpg

How to Protect CSS Mods for ANY WordPress Theme

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 a new version of WordPress, and you basically have mass confusion and an overwhelming sense of what can I do now?

Without question, the easiest solution to this problem is to use the Thesis WordPress Theme. Right out of the box, Thesis contains a /custom folder that allows you to isolate all of your design changes — CSS mods, PHP code, and custom images — thereby futureproofing your site against inevitable upgrades!

Below, you’ll find the theory behind Thesis’ simple customization system and a technical explanation of how to pull it off on your own, but let’s be honest here—why reinvent the wheel? Anyway, on with the show…

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 to position yourself to adapt successfully to the rapid-fire world of Web software development.

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.

Take the Next Step!

  1. Share this on Twitter:
  2. Share this on Facebook:
  3. Submit it to StumbleUpon
  4. Bookmark it on Delicious

107 comments… read them below or add one

Robert Bruce February 3, 2007

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.

Reply

David Krug February 3, 2007

Did someone say beer?

Reply

Enblogopedia February 4, 2007

Hmmmm..seems like the K2 scheme idea. But still a clever way ;)

Thanks for sharing.

Reply

mblair February 4, 2007

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.

Reply

Jason Brown February 4, 2007

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!

Reply

aNieto2k February 4, 2007

And if you use

replace
.custom –> .mycustom

and

The problem it’s here another time??

Reply

Bob Jordan February 4, 2007

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.

Reply

Hamish M February 4, 2007

Great tips Chris, I’m sure this will save people a lot of headaches.

Reply

Peter V Cook February 5, 2007

James, I think you’re comment is exactly how I feel too.

Reply

Chris @ Martial Development February 5, 2007

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.

Good advice overall, but this CSS comparison is hardly impossible. Developers do it almost every day.

Reply

Chris P. February 5, 2007

…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.

Reply

Samo February 5, 2007

Interesting information for someone just getting started with Wordpress and who happens to be a bit of a CSS Noob :^)

Reply

Chris Poteet February 5, 2007

Nice, but my plugin is a little easier.

Reply

Yetrina February 5, 2007

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.

Reply

Arun February 5, 2007

Thank you so much for this.

Reply

Arun February 5, 2007

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?

Reply

Billy February 5, 2007

Or you could learn a bit of CSS and make your own theme.

Reply

Chris P. February 5, 2007

Arun — This works the exact same way. For instance, let’s say that you want to pinpoint the h1 element, which sits inside a div with an ID of masthead.

Based on the method described in the post, you would target the h1 with this line of code:

.custom #masthead h1 { ...css here... }

Reply

Arun February 5, 2007

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 :)

Reply

Stijn Vogels February 6, 2007

Now there’s a thing I should remember for the next update. Kuddos!

Reply

Major Tom February 7, 2007

These advises are truly important and I’ve learn a lot about it. I hope you have more posts like this coming….

Reply

Casey Woods February 7, 2007

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!

Reply

Shivangi February 7, 2007

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..

Reply

J David February 8, 2007

Great tip. I am currently screwed with the new wordpress and all of my little css tweaks…

Reply

bosleyp February 9, 2007

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

Reply

CJ March 11, 2007

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!

Reply

Chris P. March 11, 2007

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?

Reply

CJ March 11, 2007

I was just coming here to tell you that…yes, I figured it out. :-)

Thank you again for an awesome theme!!

Reply

CPOI March 15, 2007

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? ;-)

Reply

Don West March 22, 2007

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!

Reply

Chris P. March 23, 2007

Don — You’re on the right track with that solution. Just be sure to append the <body> declaration with the custom class, 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 !important in order to instantiate the changes, but for the most part, you should be fine with the statements you’ve posed above.

Reply

Fargham May 10, 2007

Thanks for posting such a informative development.

Reply

Bruce May 11, 2007

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!

Reply

Chris P. May 11, 2007

Bruce — Try 75% instead of 70.5%.

Reply

Bruce May 12, 2007

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.

Reply

Chris P. May 12, 2007

Bruce — I figured out your problem. In your custom stylesheet, your declaration reads like this:

.custom body { ... }

It should read like this:

body.custom { ... }

Reply

Bruce May 12, 2007

Chris – that works beautifully!

Thank you very much!

Best regards,
Bruce

Reply

LvCKyLuKe May 20, 2007

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?

Reply

Chris P. May 20, 2007

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…

Reply

Sherman C. May 23, 2007

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

Reply

Chris P. May 27, 2007

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.

Reply

动画片 June 1, 2007

Thanks,Chris !good wish!

Reply

K-IntheHouse June 11, 2007

Chris, great article! I am redesigning my website right now and this is a great help. Thanks for the effort..

Reply

Jauhari June 16, 2007

CSS is one off powerfull way to make good layout. And understanding CSS is one of key of success ;)

Reply

Paul Montwill July 4, 2007

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!

Reply

Erjati July 7, 2007

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.

Reply

Erjati July 7, 2007

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”*

Reply

Gary P August 23, 2007

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!

Reply

guy September 11, 2007

this is great, going for a site redesign soon so I’m gonna use this tip, plus the YUI grid css…mmmm!

Reply

ohmto October 8, 2007

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

Reply

ohmto October 8, 2007

this html file linked to an external css file

Reply

dirkhaim October 28, 2007

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

Reply

sun October 29, 2007

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

Reply

Joseph McClellan October 30, 2007

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!

Reply

ohmto October 31, 2007

hey guys
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 :) …. actually one of my friends told me the solution thanks for him .

Reply

Saitia January 15, 2008

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

Reply

Jeff Morris February 2, 2008

Nice, so simple & elegant. Thank you, thank you.

Reply

jake dam February 14, 2008

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..

Reply

TomTom March 13, 2008

Really nice post, simple and elegant. Thanks chris

Reply

Rob O. March 26, 2008

Thanks Chris…

Reply

Alda April 14, 2008

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!

Reply

Javier Cabrera April 21, 2008

Wow that’s impressive!

Reply

BSoDs.com April 22, 2008

Thought about making a wordpress site, but Drupal seems to have it all.

Reply

Amino April 28, 2008

Very useful! A def dig for me! Thanks!

Reply

Guera May 30, 2008

Hi Chris,
I think the custom.css is a great idea! I have bought your thesis theme and am in the middle of customising using the custom.css file but, being new to css, I have a lot of trial and error to get it right! What is the correct syntax for a custom version of a class that begins with a ‘.’ ?
I am trying to change the font-size of the .format_text class but can’t for the life of me work out how to phrase it. I get a bit confused as to when to use a # or a . or why its body.custom and not .custom body.
Can you give me some guidance on using the custom.css with the different types of classes/style definitions? (I would have gone to the thesis forum for this, but the site seems to have been down for the last few days.) BTW the link is to my test blog. I love that I can play around with the custom.css and when it’s ready load it up to my main blog. Thanks for your help!

Reply

Chris P. June 4, 2008

Guera — In CSS, classes are referenced with the . operator, and ids are referenced with the # operator. Therefore, if you had the following HTML:

<div id="content">
   <div class="content_inner">

You would reference the content div with this CSS in your custom.css file:

.custom #content { ... }

And you would reference the content_inner div like so:

.custom .content_inner { ... }

Finally, the body tag is the only HTML element that contains the custom class:

<body class="custom">

Because of this, the body tag is the only element that must be referenced with a different syntax (body.custom) in your custom.css file. All other elements should be referenced using the syntax described above.

Reply

Jeff June 20, 2008

Hi Chris,
Do we need to do an @import call? If I want to create a sidebar2.php and style it in the the custom CSS. Since this is a new ID, in the sidebar2.php would I have to .custom #sidebar2{? or can I just leave it #sidebar2?
thanks

Reply

Chris Pearson June 20, 2008

Jeff — You only really need to do an @import call if you notice that the styles are not loading properly in Safari or if you’re concerned about accommodating Netscape Navigator 4. Also, since you’re creating an entirely new sidebar, you won’t need to prepend CSS definitions with .custom. You’re not overwriting anything, so a direct definition will do the trick!

Reply

Jeff June 20, 2008

Do i do the direct definition in the custom.css or the style.css?

Reply

Chris Pearson June 20, 2008

Jeff — Always use a custom.css file to add your own styling embellishments; this way, you won’t risk losing changes if you need to update your theme.

Reply

ashish choudhary July 19, 2008

nice idea
and i think apply in my new theme.:-)

Reply

Ryan August 2, 2008

A much simpler way of doing this is to place the custom.css below all other stylesheets and leave out the .custom class from the body tag.

Simply rewrite your selectors exactly the same way (with the new declarations of course) as they are written in the original stylesheet. If a rule is found twice, the last one always wins out.

Ultimately though, you are making the user download CSS they don’t need. If you write your own stylesheet for a theme (and keep it well organized), adjusting to a new release is just as simple.

Reply

Goran September 4, 2008

I have not been on your blog for a while, forgot how much valuable advice, tools and tips that you offer. Will keep this in mind when I need it in the future. Thanks.

Reply

David September 12, 2008

Hey good tips! Thanks for that.

Reply

John September 13, 2008

Am I correct that if you are using Thesis the changes mentioned to header file are not nessesary?

Reply

Chris Pearson September 16, 2008

John — That’s correct.

Reply

Janet September 19, 2008

Hi chris,

Love your designs and info here, I use pressrow..

Wanting to contact you about an internet explorer issue with your designs. Have you figured out a fix, or what we can do? I couldnt find anything here.

You can see the damage here. http://www.greenesrelease.com

People at wordpress.org are posting looking for answers too..

Janet

Reply

Chris Pearson September 19, 2008

Janet — The markup you’ve inserted in the sidebar is causing it to render improperly; if you remove everything you added above “Must Reads,” your sidebars will be fixed.

The main problem is that you’ve got two div elements with id="sidebar", and in HTML, you cannot use an id more than once. Also, you need to be quite careful that you don’t go inserting opening and closing <div> tags, simply because if you mess up even one of those, it’ll throw off the rest of your layout.

At any rate, I hope this helps, simply because I no longer have any control over the PressRow theme or how WordPress handles issues surrounding it.

Reply

Janet September 19, 2008

Oh I love you Chris!!

I had sooooo much trouble getting the sidebar to work because I don’t understand the div and il and the others, I’m a html girl.

Thank you for your help!

Have a great day!

Janet

Reply

Tim November 1, 2008

Hi Chris –

How would I treat CSS that looks like this:

div#header{
width:970px;
margin:0 auto;
background-image:url(img/bg.gif);
background-repeat:repeat-x;
margin-bottom:10px;
height:120px;
}

Where would I put the “.custom”?
I want to change the height from 120 to 300

Reply

Chris Pearson November 3, 2008

Tim — You add .custom just before your typical CSS declaration, like so:

.custom div#header {
width: 970px;
height: 300px;
margin: 0 auto 10px auto;
background: url('img/bg.gif') repeat-x;
}

Reply

Jiten Pandey November 18, 2008

Hey Chris,

Thanks for such a great info.

Jiten

Reply

Matthew Sweet November 27, 2008

You are the Prince of CSS coders!!

This solves a problem I’ve been grappling with for months!

Reply

Shirley December 9, 2008

Great idea. However, doesn’t this contribute to increased load time? Sometimes, I do use multiple stylesheets if a website has a temporary promotion or seasonal change, but I don’t like the idea of unnecessary code. Although, I suppose it would prevent a lot of headaches…

Reply

Chris Pearson January 17, 2009

Shirley — Client-side stuff like pure HTML and CSS render so quickly that additional load time is not really even a consideration. The main thing that affects load time is server-side stuff like PHP and database interaction.

Reply

J. Ibanez February 4, 2009

I’d buy you beer!

Reply

dandellion February 19, 2009

I was guilty of tweaking existing themes for so long. But then… a bit of counting and the truth comes out: It doesn’t pay up to tweak the existing theme. If you’re capable of tweaking the css, then it takes you less than three hours to make yourself capable of making your own. And then, life becomes so much easier. You don’t have to run through the endless lines of classes you don’t know what they are (and most of them you don’t even need there), trying to find the one you want to change. if a theme breaks for any reason, you will (most probably) know why that happened or at least, where to start searching.

It’s not inventing the warm water and writing the code that’s already been written. Once you do your own theme, you tweak it for several sites you work on. Actually, you’ll probably end up with a frame that suits you: a theme that is fairly empty but has all the bones already put. You’ll just fill the style and wonder how quick you are.

Reply

wazime March 7, 2009

Oh man, this is just what I have been looking for. Thanks so much.

Reply

Toby March 25, 2009

Wow! This is exactly what I was looking for! I am a noob Wordpress theme developer, and this is awesome!

Reply

Steve April 1, 2009

I seem to be able to create new styles but not override existing ones using custom.css
I wanted to create a ul class that would use a checkmark for the bullet. In custom.css I wrote
.custom ul.checkMark {list-style: disc url(checkMark.gif) inside;}
and wound up with list items that had BOTH the theme’s custom bullet and my new checkMark.gif one.
I don’t quite understand what the “.format_text” class is yet, so I tried
.format_text ul.checkMark li {list-style: disc url(images/checkMark.gif) inside;}
The only way I could get it to work was to put it a the end of Stylesheet.css
Same with h2 and h3 overrides.
Next I want to tackle anchor styles but not until I grasp why custom.css doesn’t seem to override Stylesheet.css rules.
Thanks for any insight.
Steve

Reply

Lynn Currie April 11, 2009

This is precisely the thing that sold me on Thesis.

Are you a Joomla ninja also? Would it be possible to do this to any Joomla template as well? Since the code is put in a header, in theory does it work for anything that is CSS based (with the obvious change in implementation of said code into the page structure, of course)

Reply

Steve April 11, 2009

I realized I had left out one level of specificity.
The element I was trying to target needed to specify both
.custom (since the new rule is in the custom.css file)
and
.format_text
This works now:
.custom .format_text ul.checkMark li {…;}

That’s a whole lot of levels of specificity but at least it does what it should now.

Reply

mehmet May 27, 2009

how can i joomla css protect

Reply

Zavrab October 2, 2009

Great tips Chris, I’m sure this will save people a lot of headaches.

Reply

Wazime November 2, 2009

Wow! This is exactly what I was looking for! I am a noob Wordpress theme developer, and this is awesome!

Reply

Judy Cannon December 1, 2009

Thanks for the post. I’ve been struggling with coming up with some kind of strategy to help me re-style a Moodle installation to match my Wordpress blog. My students may go back and forth between the two sites, which are on the same server, but in different directories. I tried to find “matching” templates, but had no luck with that :)

I think I can use your procedure to create a custom stylesheet for Moodle, that will use graphics, headings, etc. from my Wordpress theme. Wish me luck!

Reply

Judy Cannon December 1, 2009

One more comment… If anyone knows of a developer who has created any type of system (preferably php script), that can read one set of stylesheets and generate them for a different CMS, please let me know!! For example, taking a Moodle theme and re-style it to match an existing Wordpress theme. Or, take a Joomla theme and apply it to a set of Moodle CSS themes.

I really think this script would be very popular if it makes it easy to re-theme CMS systems given a base theme to copy.

Reply

Grievous Bodily Charm January 11, 2010

Hi Chris, I know this post was some time ago, but I have been looking around to see how I could add multiple custom stylesheets like custom.css then customnoir.css etc and have links in my websites header to allow the user to load a different stylesheet? Also if that was done would the chosen stylesheet remain the same when a page was changed?

Thanks in advance, I am a big advocate of your thesis theme and use it a lot. :)

Reply

Mikkel November 11, 2010

Chris can you explain what the advantage of using the Thesis model (custom-functions and custom.css/.custom class) is as compared to doing things the ‘WP child theme’-way ??

Reply

Yong January 19, 2012

Hi Mikkel, Personally I think child theme is a better solution to this update overwrite problem, because in child theme, u can not only overwrite parent css, u can also overwrite parent php file with same php file name. I am using the child theme a long time now, its more organized as well. Let me know what you think :)

Reply

carson December 2, 2010

great tips, thanks for posting.

Reply

Joseph Buarao January 15, 2012

wow.. great tutorial.. keep on sharing mate.. :)

Reply

Yong January 19, 2012

Nice post, I’m using the other solution to this update madness, I use child theme and keep a child theme css to overwrite the parent theme css, its kinda the same method, but keep it up, like your post :)

Reply

Marja Beckers March 9, 2012

I don’t use thesis (sorry), but this is still very useful. Thanks!

Reply

Rob March 23, 2012

Could this methodology be extended to theme template changes? i.e., PHP code changes?

Reply

Chris Pearson March 26, 2012

Rob, indeed it could, and I’ve been using this technique with Thesis since 2008.

Editing template files is a terrible way to make changes, simply because those files get overwritten every time you have to upgrade. With a custom functions file, your changes are isolated to one location that will not be overwritten during upgrades.

Reply

Linda Lou December 16, 2012

I feel kind of silly asking this, however, I have major upgrades going on
theme as well as wordpress 3.5, wow, I have made tons of changes, I know I’ll have to do it manually this time but want to avoid this in the future & use your (seemingly simple) method, does the custom.css go in the same file folder where the original style.css is? & I assume this method will work for any theme?

Thank you for your kind reply :) Wishing you much peace & many blessings . . . Linda Lou

Reply

Hoot and/or Holler

Previous post:

Next post: