Drupal how to: Editing your theme colors, stylesheets

Published in: 

This article is provided for do-it-yourself'ers who would like to customize their site's theme colors, (which will be a good warm-up for doing other things with your theme, btw). With this information and a some patience it's should not be too hard to change your template's colors around yourself, so take heart, and quit your shakin' already!

To change theme colors, the file you'll usually want to edit is called "styles.css" and it can normally be found inside your selected theme's folder. Every great once in a while you may also need to edit "drupal.css" which is located in the "misc" folder of your root Drupal directory, but most of the time this is not the case.

So now let's get editing:

If you have the theme_editor.module installed you can just edit the styles.css file inside your browser window, but it may be a lot easier to see and/or search and replace things if you copy and paste the contents of " style.css" into a proper text editor like like NoteTab Light for instance ( http://www.notetab.com/ntl.php ). It is VERY important NOT to use a rich-text application like Microsoft Word or Wordpad for editing because those programs will introduce invisible characters which can screw up the processing of your code! Believe it or not, the otherwise enemic "Notepad" which comes with windows CAN be used for editing code, since it is plain-text based and not rich-text.

Once you decide where you'll edit the file the next thing to do is to decide what to edit.

If you have Firefox, you should install the Web Developer extension for it - http://chrispederick.com/work/webdeveloper/ - its tools have been a lifesaver many times. Actually, if you don't have Firefox you should just go ahead and get it because this tool alone is worth going through the 5-10 minute installation process. (additional tip - once you have the developer extension installed find the "CSS" menu item and select "View Style Information". This will turn your cursor into "crosshairs" which you can then use to click any item on your webpage to reveal the css classes styling it. Then simply locate the style in your stylesheet)

We recommend using this handy tool to pick out your new colors and/or to figure out what colors are currently being used.

It will be important to remember that in the online world colors are generally referred to by hex numbers, meaning that something like "596F80" will be the current color of your page titles. By going to the url above and clicking "Enter RGB" (lower left-hand corner) a popup box will open and you can paste an existing hex value and doublecheck the color of your numerical values. With this tool and a little trial and error you can replace the color values of what you don't want with the color values of what you do want. Tip - using the 'search and replace all' function of a html/text editor can be a big time saver here.

Finally, be sure when you are making changes to your themes or styles.css file that you clear your browser cache if it doesn't seem like your changes are showing up. In fact, it may be helpful to temporarily disable the site cache in admin/settings just in case that gets in the way, too. (don't forget to turn it back on though!)

So that's it - you've got snazzy new colors for your theme, you've learned where the files which effect how your theme looks are, and you've got new tools to help you accomplish future theme changes!

21 January, 2007

Comments

Your post was simple but effective. i have been struggling with theming all week. I pray I get a hang of it.