Tuesday, May 5, 2009

Drupal: Configuring Your Drupal Theme

Changing Basic Theme Settings:

Let's go to the Theme Configuration page.

1. Click Administer
2. Click Site Building
3. Click on Themes

select themes

By default, the Garland theme is enabled and set to default in Drupal. For this example we are going to leave it set at Garland.

Enabling more than one theme allows users (if you have multiple site members) to select there own theme settings.

NOTE: If you are going to be using a custom theme or want control of how your content is displayed, it is best to leave one theme enabled and set to default.

The picture below is what you should have selected for this example. Next, click on the "configure" link.

configure theme

Changing Colors:

The first thing we are going to do is change the base color.

Ensure that base is selected as shown below.

select base color

The base color is your website's background color. The numbers and letters you see next to the # sign are all apart of the hexadecimal numeral system. It is what browsers use to interpret the color output.

Enter #000000 into the base color field (those are zeros not O's by the way.) and then click save configuration.

The picture below highlights the change in the background color. Although, the hexadecimal code #000000 is black, Drupal does not output the color black because of CSS styling. The color is set to fade from top to bottom. We will get more into custom theme design later.

background color

Next, you should play with the color wheel on the right. The outer wheel will allow you to select a color range, while the block in the middle will let you pick your saturation and value.

Experiment with it as I did in the example below. Remember, your site is off-line.

changed theme

Display Settings:

Next, we are going to cover display settings. On the bottom of the current page, there are two sections, let's edit the "Toggle Display" and "Logo image settings" sections.

Uncheck Logo, Site Name, Mission Statement, and Shortcut Icon, as shown below. Click save configuration.

unchecked items

In the picture below, notice how the Drupal logo and the site name have disappeared. We have unchecked mission statement for processing reasons only, since we have no mission statement to post, there is no need to process it.

before and after

We also unchecked an item called, "Shortcut Icon". The shortcut icon refers to what is commonly called a favicon or the really tiny logo you see next to a website name in the address bar or on the window tab.

favicon before and after

If you have your own custom logo or favicon you can also upload it on this page as well. To upload your logo or favicon, use the browse button to search for the file on your computer, then click save configuration. Drupal will automatically define a path for your logo and check "logo" in toggle display.

printed logo

Now that you know what all this theme stuff does, enable some different themes and play around with the settings.

Thanks agoodi.

0 comments:

Post a Comment