I’ve been working with the Thesis Theme for WordPress for a little over a month now and for the most part I’m pretty impressed. One of my favorite features is the ability to apply custom CSS to individual pages by creating classes in the name of the specific page you want to alter. For example, to apply custom styling specifically to your “About” page, use .custom.about in front of any of the IDs or classes in your stylesheet you want to change.
On one site I’m working on I wanted my “About” page to only have one sidebar instead of the two default sidebars that I’m using on the rest of the site. Using the same naming convention I mentioned above, I simply added the following to my custom.css file.
.custom.about #column_wrap {background:#4ebaff;width:890px;}
.custom.about #content {background:#fff; width: 770px; margin:0; padding:0;-moz-border-radius:.5em;}
.custom.about #sidebar_1 {display:block; width:120px !important;}
.custom.about #sidebars {display:none !important;}
.custom.about #sidebar_2 {display:block; width:0 !important;}
This was all fine and dandy until I wanted to use the same method to apply styling to my static home page. After numerous attempts I couldn’t find an answer. Finally I investigated the source code of my home page as it was being displayed and noticed this interesting little nugget body class="custom main-man". It appeared that this mysterious “Main-Man” was controlling the styling of my home page. So I raced off to my custom.css file, threw together some styling for my home page using the .custom.main-man naming convention, and “wahlah!” my problem was solved.
So who is this “main-man” and where did he come from?
Well, it turns out that I unknowingly created him. When setting up the initial site I named what would be the home page “Main Man” to avoid any confusion within WordPress if I named it “Home.” Later I changed the name of the title of the page but forgot to pay any attention to the slug. This just goes to show how awesome this feature of Thesis is. Create a special CSS class using the naming convention of the page’s slug and presto, you’ve got a new custom page.
by RSS
by Email
Garrett Companies, LLC
Leveragen Technologies, LLC
{ 6 comments… read them below or add one }
Thesis is definitely awesome, once you learn the ropes! Great job with your site and with the post author box. Very impressive!
Where did you find your “.custom.main-man” ??? I know mine will be something different but I would like to know where to find it so I can see what it is. Thanks so much
Hi Jim,
If found it’s even easier than I realized back when I wrote this post. Thesis will automatically apply styling to any page by applying custom CSS in the name you have given the page. For example, if I wanted to style my home page different than the rest, I would begin each CSS statement with .custom.home. For example, if I wanted to change the footer on the home page only, I would use .custom.home #footer {YOUR CSS HERE}.
You can also do this from a somewhat reverse perspective which works well if you want to apply custom CSS to more than one page. You can create whatever class you want, for example let’s call it “myspecial.” You can write all of your CSS statements using the prefix .custom.myspecial. Then, in each page you want to use the custom “myspecial” CSS you can write “myspecial” minus the quotations in the CSS Class field that Thesis provides in the edit options of each page. I’ve found this to be very handy.
Hope that helps.
Jeff
Thanks, but I’m experiencing the same problem you had in your original post, it works on every other page except the homepage, I believe if could find the body class that you were referring to, it just might do the trick.
Try checking the source of the page and look for the body class id right under the closing head tag. You might also want to check what template you’ve selected for that page within the page edit screen. Check to see if you selected “custom” or “no sidebars,” etc as that may make a difference as to what shows up in your source code.
Hi Jeff,
Probably I don’t need the “Main Man” right now, but this is a very helpful information to use it in the future!
But… Thank you 100 times, you have saved my time, I didn’t know that I can customizing the CSS for each page by “.custom.home” , this is amazing, I have fixed my pages problems in less than 2 minute that to you!
Hesham´s last blog ..What Top Niche Web Designers Say about Thesis Theme for WordPress