One of thing that sets Thesis apart from other themes is the way you can edit it. You are only required to edit two files to make any customizations throughout your whole website.
Those two files, as you know, are
custom.css. The reasoning behind this is 100% for organization purposes. In regular WordPress themes, you have many files to work from. In Thesis, you just have two. It makes so much more sense, and it will ultimately make your site run faster.
The only problem I have with editing only two files is that everything can start to get rather cluttered. You control every element and every piece of the layout in these two files, that if you have a lot of customizations – you’re going to have a mess.
As a Thesis skin developer, I have to find ways to keep all of my functions and CSS organized so I can go back to them later and make proper changes.
I’m going to share with you the things I do to keep my files more organized. You can apply some of these tips to any theme really, but I’m going to be speaking in Thesis throughout this tutorial (yes, I did just refer to Thesis as a language).
1. When to use
.custom in CSS
This was a mistake I made at first, and is something I think is being made on some other Thesis powered blogs as well.
If you read the instructions in the default
custom.css file, you will see that:
You can use the “custom” class to override *any* CSS declarations contained in the style.css file.
You only need to add
.custom in front of the class you are editing from the default
style.css. If you made something up on your themes, you do not need
.custom in front of it!
2. Create A Color Code Chart
Designing has a lot to do with consistency. In your theme, you don’t want to use a lot of different colors because it can start to look weird and inconsistent. I find that if you create a color chart of all of the colors you use throughout your coding, you will be in some good shape.
What I will do sometimes is create a color chart and place it at the top of my CSS files. Just so I can refer back to the colors later:
Always make sure to comment it out!
You don’t even have to keep it in your CSS, maybe a file you keep somewhere on your desktop.
3. Use Comments!
Using comments in your CSS will help a lot, especially in Thesis. Because you usually don’t write many of your own styles &mdash but edit them, having some comments around are crucial for future editing.
You don’t know what most of the names are, and what exactly they control from the name all the time. So by distinguishing where each line of code goes, it will help you a lot.
More Thesis Organization Tips
- Multiple Custom Page Templates
- Free widgetized footer by Kolakube
- Thesis OpenHook Plugin
- Using Firebug for CSS
I hope you have learned a thing or two about keeping your Thesis files nice and clean. These tips will be useful for you if you do a lot of customizations, but if you don’t have that many, they may not be as handy.