Thesis CSS Map

January 24

Thesis Theme CSS Map

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; }

Thesis Theme Default CSS Tags Map (Click the the thumbnail for the full size link)

Clip to Evernote

You may also enjoy these related posts:

{ 4 comments… read them below or add one }

Justin Bartlett May 10, 2010 at 11:44 pm

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

Reply

Jim May 11, 2010 at 10:51 am

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…

Reply

Kristina Saric December 11, 2010 at 4:25 pm

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

Reply

Jim December 11, 2010 at 8:40 pm

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.

Reply

Leave a Comment

*