Non-scary Drupal theming basics — CSS

Usually when you download and install a Drupal theme the first thing you want to do is customize the look and feel so it’s not so “templatey” (if that’s a word). It’s best to find a theme which has the layout you like and worry about the colors of fonts and backgrounds later as those can easily be changed in the theme’s “style.css” file.

The “style.css” file is located in the root directory of your theme files.

Changing the color of links

Link colors and styles are changed in your theme’s CSS file. Open up your theme’s “style.css” file and locate the code that looks similar to this:

a:link,
a:visited {
color: #86bd21;
text-decoration: underline;
font-weight: bold;
 }

The code within the “{…}” will be applied to the link styles. This is where colors, font styles, background colors and more as specified for the specific element.

For this example I want my link styles to be red instead of the green which was previously specified. I like the underline and the bold so I’m going to leave those alone.

a:link,
a:visited {
color: #ff0000;
text-decoration: underline;
font-weight: bold;
}

Notice that for red I used a combination of letters and numbers rather than just typing “red”. This is because color values can be defined as a hexadecimal notation or by the color name. Keep in mind that if you wanted to use a shade of red you would have to use the hexadecimal equivalent rather than something like “light red”.

Changing background and text color of a div

For this example I am going to demonstrate how to change the background color as well as the text color within the “preface-last” div. This bit of code was pulled from an existing theme which already has these elements specified.

#preface-wrapper #preface-last {
background: #3e4862;
color: #9ec854;
 }

Say I want to change the background color to a shade of blue and change the text color to black. I would use this code to do so.

#preface-wrapper #preface-last {
background: #c2cfef;
color: #000;
 }

Changing other styles

As you go through the “style.css” file you will see many instances of similar code. All of the code in the CSS is editable and can be changed at any time. So if you don’t like a color, a style or a background, open up the “style.css” and make your changes.

A node on cascading

The “C” in CSS stands for “cascading”, a concept that you’ll quickly run into once you start editing CSS files, especially in a large system like Drupal. A little reading will go a long way towards understanding how this cascade works and how to use it to your advantage.