Forget everything you ever knew about customizing pre-built templates! There are 3 Golden Rules to customizing the Thesis Theme:
Rule 1. Don’t ever edit anything other than custom.css Ever.
This was done for a reason, and no; it wasn’t to make you’re life difficult. It was done to future proof the countless hours you spent customizing your theme against upgrades! See Preamble.
Rule 2. Use custom.css to CANCEL OUT anything Chris has done with layout.css and style.css
Once I learned THIS IS WHAT Chris had intended custom.css for…I had the “DUH” moment, sat back in my chair for a minute…then rocked it out of the park.
Example:
Original code in layout.css
/*---:[ #header styles ]:---*/
#header #logo {
font-size: 3.6em;
line-height: 1.167em;
font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
}
#header #tagline {
font-size: 1.5em;
line-height: 1.4em;
}MY code in custom.css
/*---:[ #header styles ]:---*/
.custom #header #logo {
font-size: 3.0em;
line-height: 1.000em;
font-family: "Georgia";
}
.custom #header #tagline {
font-size: 2.5em;
line-height: .5em;
}All I did was copy/paste the css code out of layout.css and made my changes. That’s it.
Rule 3. Always put “.custom” in front of any css elements. (except the body tag)
Note in the above code box the .”custom” in front of all my css elements (except the body tag). This allows you to create very specific declarations which the web browser will read last and apply to elements giving it the final look!
In other words, Firefox see’s your “.custom” and says, “Oh! You want it to look like this!”
P.S.
If you want to edit the body tag element, do this:
body.custom {
background-color:#666666;
background-image:url(images/my-background.jpg);
background-position:center 0;
background-repeat:no-repeat;
}
Great info. Keep it coming.
Yeah, really great stuff here… thanks a lot!
I find myself coming back to this post with each new customization. You’d think I’d memorize this by now ;)
Thanks for this tutorial. I'm currently manipulating my thesis theme and enjoying every bit of customizations.
Simply written and very useful for any new Thesis Developer. Good post (and I am tweeting and deliciousing it :) )
Yes, this is the strongest aspect of Thesis. The fact that you don't have to monkey around in the core files is fantastic. As someone with a background in SEO, I can tell you have poorly structured most WP themes are. Thesis alleviates having to waste a lot of time upgrading the core files. I can focus on the custom functions and custom CSS and THAT is it. Love it.
Great guide! I have a REALLY dum question. I'm trying what I think is the right code in order to edit the post titles. I believe they use the h1 tag, right? So I'm working within the custom.css file, but it's not making any changes. All I want to do is make the titles larger. Something like 40px. Could you walk me through that and let me know where in in my css code am I to place this?
Good info. I was able to make changes right away.
Good info. I was able to make changes right away.
Good info. I was able to make changes right away.
I’m a complete newbie. I’m not sure of the timing of this tutorial with different versions and features of thesis, but.. I see a lot of tutorials with changes or additions to the custom_functions.php file. Is that ok or do those violate the rule number ? I’m just playing around and making little changes based on things people say in the tutorials. thanks.