Tags: Drupal ThemesDrupalThemingThemesDrupal Planet

There are a lot of quality contributed Drupal themes available that can be found at http://drupal.org/project/themes You can probably find one that will suit your needs for the most part within the first few pages of this listing.

What if you want to customize it and tweak it a little bit though? Perhaps everything about the theme is perfect, except for a few minor details that you would like to change

One option is to download and install the theme, and then start modifying the CSS (http://en.wikipedia.org/wiki/Cascading_Style_Sheets) files contained within that theme.

This may not be the best option though, since if that contributed theme is ever updated, you will either lose all of your changes, or make updating very difficult since you will be overwriting all of the previous changes you made.

Drupal themes are similar to modules, in that their directory and file structure follow a set pattern.

Every theme is contained within a directory that bears the same name as the theme. We’ll be using the “Sky” theme for this tutorial, and it can be found at (http://www.drupal.org/project/sky) Go ahead and download this theme now and place in your /sites/all/themes directory.

Let’s look at the Sky theme in a little more detail:

Navigate to your sky theme directory. (Generally located at /sites/all/themes)

Within the “Sky” directory, you’ll notice a few files, including the “sky.info”. The .info file is the most important file to any module or theme. Without this file, your theme will not display as an available theme. This file could be considered the biography of the theme or module for Drupal, since it provides important information that tells Drupal about itself.

Open this file with any text-editor. The first few lines provide Drupal with the information needed to install and use this theme.

This information populates the /admin/appearance section for the theme in the Drupal interface for that theme.

An important thing to remember is that the .info file must be named with the exact name of the parent directory containing it. Our example for sky shows that it is indeed named “sky” and the parent directory is also named “sky”.

Let’s create a sub-theme of the “Sky” theme so that we can customize it. This method will apply to any theme that you want to customize.

First, we’ll copy the entire sky directory, and rename it to “myskytheme”.

Now navigate to your new “myskytheme” directory.

You should have the exact files in here that are contained within the original “sky” directory, including the sky.info file.

If you were to visit /admin/appearance from your Drupal site right now, your theme would not appear because you don’t have a .info file that corresponds with your new theme directory, “myskytheme” yet.

Locate the sky.info file and rename it to match the directory it is contained in. In this case, it should be renamed to “myskytheme.info”.

Now, using a text editor, open your “myskythem.info” file. It should look familiar and be an exact copy of the original sky.info file you already opened.

Notice on lines 3 and 4 there are corresponding entries for “Name” and “Description”. This is where the information for your theme comes from that appears on the /admin/appearance page on the Drupal interface.

Let’s customize the entry for name to make this theme our own. Change the name of this theme to “My Sky Theme”.

Let’s also add a new description. Perhaps something like, “A sky sub-theme”.

Navigate down to line 23 and you should see a ; STYLESHEETS entry.

We are going to add our own stylesheet to this entry so that we can place our overrides within it.

Create a new entry above the print.css and call it local.css like this:

; STYLESHEETS
;-------------------------------------------------------------------------------
stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
stylesheets[all][] = css/forms.css
stylesheets[all][] = css/colors.css
stylesheets[all][] = css/local.css
stylesheets[print][] = css/print.css

This tells Drupal to load our local.css stylesheet as well. We will use this for our own styling overrides.

Save your .info file. We are all finished with it.

Now visit your /admin/appearance using the Drupal interface and you will see your new theme listed under the disabled themes!

Don’t enable it just yet though. We have one more file to modify, and a new file to create.

Find the template.php file located in your “myskytheme” directory.

Open this file in a text editor and take a look at it. It is php code, but don’t worry, you don’t have to know what any of it does or means.

On line 12, you will see function sky_preprocess_html(&$vars) {

Each function contained within this file is identified first with the name “sky” we need to rename each of these functions to correspond to our new theme name. Using a find and replace within your text editor, rename each of these original sky functions to match your new theme name of myskytheme.

Line 12 should now read: function myskytheme_preprocess_html(&$vars) {

Go ahead and save this new file as well and we’re almost done.

Navigate back to your sub-theme’s folder and locate the css folder.

Open it and create a new, blank local.css file.

If you’re using linux or the mac, a quick command-line trick is “touch local.css” to create a new file.

Go back to your Drupal interface and visit /admin/appearance and enable your new theme.

You now have an almost exact copy of the original Sky theme that you can modify and hack to as you wish, without fear!

Within the local.css file you just created, you can now place your own custom CSS.

A great tool to use for theming is Firebug. (http://getfirebug.com)

This tool can be used to identify the CSS within your page that you want to override.

Let’s change the site title of the theme to all uppercase letters.

After installing firebug, locate the particular element you would like to change within your browser and right-click on it. You should have a new menu entry called “Inspect Element”.

Firebug will open and show you the CSS creating this styling.

Inspecting the site title example, shows us that it is controlled by the styles.css file on line 108 and is created by the h1.site-name css class.

Open your local.css file now and paste that class into it:

Let’s make this text uppercase by adding text-transform: uppercase; so that our entry now reads:
h1.site-name {
font-size: 3.692em;
margin: 0 0 0.2em 0;
padding: 0;
text-transform: uppercase;
}
Save this and then reload your Drupal page. You will now see the site title is all uppercase.

You now have a complete and working theme that you can customize and add your own css overrides to.

You learned how to copy a contributed theme and then create your own sub-theme from it. This allows you to modify and change the theme without changing the original theme. The most important aspect to remember though is to preserve the naming of the files and directory. They all must match and coincide with the name of the directory.