I Purchase actonel, 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, Purchase actonel. 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, cardura Side Effects.
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
Purchase actonel, 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 Theme for WordPress. 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, Anafranil C.O.D, 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, Purchase actonel. 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, flonase Without Prescription, 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. Purchase actonel, 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. Buy crestor,
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.
Similar posts: Celexa Online Without Prescription. Norvasc Online Without Prescription. Cymbalta Online. Cheap zocor Online. Atarax Overnight.
Trackbacks from: Purchase actonel. Purchase actonel. Purchase actonel. Flagyl Without A Prescription. Buy lipitor Without A Prescription. Discount diflucan Without Prescription.
106 trackbacks
98 comments… read them below or add one
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?
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
Now there’s a thing I should remember for the next update. Kuddos!
These advises are truly important and I’ve learn a lot about it. I hope you have more posts like this coming….
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
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!!
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.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
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
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
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!
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!
Guera — In CSS, classes are referenced with the
.operator, and ids are referenced with the#operator. Therefore, if you had the following HTML:You would reference the
content divwith this CSS in yourcustom.cssfile:.custom #content { ... }And you would reference the
content_inner divlike so:.custom .content_inner { ... }Finally, the
bodytag is the only HTML element that contains thecustomclass:Because of this, the
bodytag is the only element that must be referenced with a different syntax (body.custom) in yourcustom.cssfile. All other elements should be referenced using the syntax described above.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
Jeff — You only really need to do an
@importcall 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!Do i do the direct definition in the custom.css or the style.css?
Jeff — Always use a
custom.cssfile to add your own styling embellishments; this way, you won’t risk losing changes if you need to update your theme.nice idea
and i think apply in my new theme.:-)
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.
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.
Hey good tips! Thanks for that.
Am I correct that if you are using Thesis the changes mentioned to header file are not nessesary?
John — That’s correct.
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
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
divelements withid="sidebar", and in HTML, you cannot use anidmore 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.
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
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
Tim — You add
.customjust before your typical CSS declaration, like so:Hey Chris,
Thanks for such a great info.
Jiten
You are the Prince of CSS coders!!
This solves a problem I’ve been grappling with for months!
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…
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.
I’d buy you beer!
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.
Oh man, this is just what I have been looking for. Thanks so much.
Wow! This is exactly what I was looking for! I am a noob Wordpress theme developer, and this is awesome!
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
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)
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.
how can i joomla css protect
Great tips Chris, I’m sure this will save people a lot of headaches.
Wow! This is exactly what I was looking for! I am a noob Wordpress theme developer, and this is awesome!
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!
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.
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.