
I haven’t found a lot of great resources for adding basic CSS customizations for the Thesis theme so I created one of my own.
Note: If you’re looking for a Thesis theme hooks map, you can find one here.
I didn’t drill down to every single child element, but if you’re looking for the basic container divs on the main default page or need some place to start here it is.
I colored the divs with the following custom CSS.
.custom #body {}
.custom #container { border: 1px solid blue !important; }
.custom #page { border: 1px solid green !important; margin:4px;}
.custom .menu { border: 1px solid red !important; }
.custom #header { border: 1px dashed blue;}
.custom #content_box { border: 1px dashed green; width: 952px;}
.custom #content { border: 1px dashed red;}
.custom .post { border: 1px dotted blue;}
.custom .headline_area { border: 1px dotted green;}
.custom .teasers_box { border: 1px dotted red; }
.custom #sidebars {border: 1px dashed purple;}
.custom #sidebar_1 { border: 1px dashed brown; width: 190px;}
.custom #sidebar_2 { border: 1px dashed black; width: 190px;}
.custom #footer {border: 1px solid red; }
(Click the the thumbnail for the full size link)
{ 4 comments… read them below or add one }
Jim,
Thank you so much for this; I’m surprised there hasn’t been a ton of people here thanking you for how invaluable this info is; I guess it’s simply enough to insert content into hooks or follow “customizing” tutorials to change one element – sidebar, footer, etc., without actually learning the different css areas; this saves me sooo much time and makes it much easier to take a great design made in photoshop and get it onto the web.
I’m very impressed with Thesis’ default typography, and I’m going with it based off of 1) SEO friendly Code and 2) Great Community, but man, turning a design into a thesis site can be really irksome! This greatly reduces my frustration, I can’t thank you enough and I hope that I’ll eventually get my website to look the same way it does in Photoshop..
Cheers!
Justin
Thanks for the kind words. I’m glad you found it helpful. That was my goal. With Theme mods, View Source is your friend.
As for getting a design to look the same as Photoshop, good luck.
I’ve abandoned that goal and design mainly in html/css. But do whatever works…
I actually found your map to be possibly the most useful thing about thesis ever since I got thesis. The theme is great but man is there little useful information on customization.
I am still trying to find a way to kill the form elements formatting that it defaults to..
Thanks for the map. It is great
Thanks, I’m glad it helps out. My 2 favorite resources are the DIYThemes Users Guide and the Thesis Hook Reference, the first 2 results when searching on “Thesis Hooks”. The rest of the styling is made easy thanks to Firebug.