Thesis has now become the standard platform for serious wordpress bloggers. On the blogosphere the theme from DIY Thesis has consumed a considerable amount of bandwidth being talked about by many who use it [Add +1 if you are reading this]
This post is on how to get started with Custom CSS in Thesis so those who have not been able to get their hands dirty with Thesis CSS, its a good time to start. I’ll quickly summarize the advantages of Thesis over other WordPress themes :
- Rich Customization
- Big Community Support
- In-built SEO
- Very Flexible
- Somewhat resistant to version changes
- Minor Changes possible straight from Thesis Administration Panels
- Thesis Open Hook Plugin
The last point, is a MUST-HAVE plugin for anyone running on Thesis. It allows changes [Addition, modification of Custom Thesis Hooks] to ease manual editing to Core theme functions. These hooks when combined with Custom CSS is what gives programmingkid.com the looks!
Thesis Open Hook Plugin
This plugin developed by Rick Beckman is very important and one of the pre-requisite before you embark on the customization journey.
Thesis OpenHook takes the process of modifying Thesis and simplifies it!
Where once users would be required to open and modify their wp-content/themes/thesis/custom/custom_functions.php file, users can now easily customize Thesis via a new “Thesis OpenHook” panel in the Design area of your blog administration.
Not only can arbitrary HTML, CSS, JavaScript, and even PHP be inserted into any of Thesis’ hooks, you can also easily remove any of the hooked default elements within Thesis with the click of a button!
- Thesis Open Hooks
OpenHooks Plugin modifies the custom_functions.php file, called as Custom Programming for thesis
Custom CSS in Thesis
Thesis has two style-sheets. One is the default theme one which can be edited from the Thesis Layout Administration Panels – Design Options, Layout options like the one below :
- Thesis Administration Panel
The second stylesheet is the custom.css located in the folder thesis/custom/
Let’s start with the customization process :
My suggestion is to copy paste the CSS in Dreamweaver and use intelli-sense feature to make coding convinient.
Changing Link Colours
[sourcecode language='css']
.custom a, .custom a:visited { color: #090; } <--- This makes links green
.custom a:hover { color: #00f; } <--- This makes links blue when you mouse over them
[/sourcecode]
Changing Teaser Style
[sourcecode language='css']
.custom .teaser { text-align: justify; width:100%; }
.custom a:link,.custom a:active{ text-decoration:none; color:#009999; border:none; }
.custom a:visited { text-decoration:none; color:#669999; border:none; }
.custom a:hover { text-decoration:none; color:#333333; border:none; }
[/sourcecode]
Setting Background / Background Image
[sourcecode language='css']
body.custom { background: #333333 50% 0 no-repeat url(images/bg.png); }
.custom #container { margin-top: 0em; margin-bottom: 2em; }
.custom #page { background: #fff; }
[/sourcecode]
Changing the Default Navigation Bar CSS
[sourcecode language='css']
.custom ul#tabs {border-bottom:none; border-left:none; margin-bottom:5px; background:#009999; }
.custom ul#tabs li {margin-bottom:0; border:none; background:none;}
.custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {padding-bottom:0; background:none;}
.custom ul#tabs li.rss { display:none;}
.custom ul#tabs li a {text-decoration:none; color:#ffffff; font-weight:bold}
.custom ul#tabs li a:hover {text-decoration:none; color:#FFF; background:#333;font-weight:bold}
.custom ul#tabs li.current_page_item a, .custom ul#tabs li.current-cat a {}
[/sourcecode]
Adding Custom CSS – Box like effect, background to any element
[sourcecode language='css']
.nameOfElement { border-left: 2px dashed #009900; border-right:2px dashed #009900; border-top: 2px dashed #009900; border-bottom:2px dashed #009900; overflow: hidden; padding: 0.5em; }
[/sourcecode]
I hope, this helps those looking for a no-nonsense copy-paste guide to Thesis Styling. All the best with your Thesis theme! All those who benefited with this guide please post the link to your blog so that other readers can have a look and get insipired.
{ 12 comments… read them below or add one }
Thanks for the article. I will return back to you if I have any problem.
Sure, please note that the Navigation Bar code CSS works only with Thesis 1.5.1, Thesis 1.6.0 has its own options from the Design panel.
Hmmmmmmmmmmmm. I really need to understand it. I will start customizing it offline before giving it a final touch. I will search for few child themes before playing with core files. Kristella is good at customization, m i right?
I’ll tell you a magic formula, for every CSS element you wish to override use .custom element before its name. All Classed start with an .name so a paragraph p class=”mytest” will have a corresponding CSS code as :
.mytest{font-weight:blod; text-decoration:underline;}Thats how you do it, use Dreamweaver for CSS editing.
You’ll just be fine.
And yes, http://www.kristarella.com is quite good at the stuff. She has some nice tutorials.
Thanks for the article. I will return back to you if I have any problem.
Sure, please note that the Navigation Bar code CSS works only with Thesis 1.5.1, Thesis 1.6.0 has its own options from the Design panel.
Hmmmmmmmmmmmm. I really need to understand it. I will start customizing it offline before giving it a final touch. I will search for few child themes before playing with core files. Kristella is good at customization, m i right?
I’ll tell you a magic formula, for every CSS element you wish to override use .custom element before its name. All Classed start with an .name so a paragraph p class=”mytest” will have a corresponding CSS code as :
.mytest{font-weight:blod; text-decoration:underline;}Thats how you do it, use Dreamweaver for CSS editing.
You’ll just be fine.
And yes, http://www.kristarella.com is quite good at the stuff. She has some nice tutorials.
I’m new to WordPress. I have downloaded WordPress 2.9.1, purchased Thesis 1.6 and installed Thesis OpenHook Version 2.2.5. For the life of me I can’t seem to find the “Thesis OpenHook” panel in the Design area of my blog administration. Do you know if this changed in Thesis 1.6?
Hi Bill
OpenHooks would be in the Appearance Tab. Here is a screenshot of mine. http://is.gd/6z3X6
I hope this solves your problem. I also provide WordPress Services including Thesis Customization if you’d be interested.
I’m new to WordPress. I have downloaded WordPress 2.9.1, purchased Thesis 1.6 and installed Thesis OpenHook Version 2.2.5. For the life of me I can’t seem to find the “Thesis OpenHook” panel in the Design area of my blog administration. Do you know if this changed in Thesis 1.6?
Hi Bill
OpenHooks would be in the Appearance Tab. Here is a screenshot of mine. http://is.gd/6z3X6
I hope this solves your problem. I also provide WordPress Services including Thesis Customization if you’d be interested.