Drupal: Working with Themes, Templates, and Blogs

This is the third part of the Drupal web development in Ubuntu tutorial. This article will cover some of the very important things you’ll need to do to complete your Drupal website. The tasks discussed in this article will help you customize the site to make it truly yours.

These tasks include:

  • Changing Drupal themes and customizing templates to add a logo, background image, etc.

  • Adding sample text and pages to your Drupal website for testing purposes.

  • Enabling the Drupal blog module.

  • Configuring blocks in your existing website to add blog entries and recent posts.

  • Adding a blog entry in Drupal.

In part two, this was the sample output of our work:

Suppose you would like to change that to:

The following are the tasks that need to be done:

  1. Change the theme from Garland (current theme used) to Fusion Starter.

  2. Retain the website logo.

  3. Change the site name from “About our travel agency” to “Welcome to my Drupal website.”

  4. Activate the Drupal blog module and add sample blog entries (under the “Recent blog posts” block).

  5. Add a background image (very light blue in color) and color.

Let’s implement these changes in this article one by one.

Changing Drupal Themes, logo, favicon.ico

To change themes from Garland to Fusion Starter:

1. First, download the theme from http://drupal.org/project/fusion. Scroll down the page until you see the download link. If you are using Drupal 6.19, then you need to download 6.x-1.0

Download the archive file (containing the theme files) to your Ubuntu download folder.

2. Extract the archive file by right clicking on it, and then click “Extract here.”

3. Copy the extracted folder named “fusion” to your Drupal themes folder in XAMPP htdocs.

Important note: Some themes require another module to be enabled. For example, the “Fusion” theme requires the “skinr” module. So you need to install that module first, before activating the theme.

4. Log in as administrator and then go to Administer-> Site building -> Themes.

5. The fusion theme has three components, namely the “Fusion core,” “Fusion Starter” and “Fusion Starter lite.” Enable these three components by checking on them.
 
6. Change the default from the Garland theme to “Fusion Starter” by selecting the “Fusion Starter” radio button under the “Default”column. Disable the Garland theme by unchecking it.

This is how it looks after making these changes:

7. Finally, click “Save configuration” to implement the changes.

To add the website logo and favicon.ico:

1. Log in as administrator and go to Administer -> Themes.

2. In the “Fusion Starter” theme, click the “configure” link.

3. Scroll down and look for “Logo image” settings. You need to find the image saved on your computer and use “Upload logo image” to use that image as your website logo.

Do not click “Save configuration” yet.

4. Now, under “Short icon settings,” upload the website icon image. This is your website favicon.ico. The image dimension should be 16 x 16 pixels.

5. Finally, click “Save configuration.”

Enabling the Drupal Blog Module and Adding Sample Text

You can easily enable the blog module and add sample text. These are included as built-in modules in Drupal. Assuming you are already logged in as administrator:

  1. Go to Administer -> Site Building -> Modules.
  2. Click “Blog” under “Enabled.”
  3. Click “Save configuration.”

To add a sample blog entry:

  1. Click “Create Content.”

  2. Click “Blog entry.”

  3. Enter the “Title” and the content under “Body.”

  4. If you are still developing the blog and you need sample text, you can go to this URL: http://www.lipsum.com/. It features a "Lorem ipsum" generator that you can configure to provide sample text, either in the form of words or entire paragraphs. For example, to get three sample paragraphs, enter 3 and then select paragraphs. Finally click “Generate Lorem Ipsum.” Copy and paste the sample text only to your text editor (e.g. gedit). You can then copy and paste the text to “Body.”

  5. Under “Menu link title:”, select the anchor text which you would like to show in your Drupal website. This can be the same as the post title.

  6. Under “Parent item,” select “Blog entry.” Leave the weight as “0” and then click “Save.”

If you would like to add another posts, repeat the above steps.

To add a “Recent blog post” block according to the location provided in the second screen shot of this article:

  1. Go to Administer -> Site Building -> Blocks.

  2. Make sure that “Recent blog posts” is set to “sidebar last.”

  3. Finally, click “Save blocks.”

{mospagebreak title=Modification of Drupal Pages and Site Name}

There are times when you need to edit the text of your Drupal pages as well as the site name. To edit the site name (e.g changing “About our travel agency” to “Welcome to my Drupal website”), go through the following steps:

  1. Click Administer -> Site Configuration -> Site information.

  2. Under “Name,” assign a new name for your website. This will be reflected in the website header section.

  3. Click “Save configuration.”

To modify the text of your existing Drupal pages:

  1. Go to Administer -> Content management -> click “Content.”

  2. Click “Edit” for each “Page” type.

  3. You can then change the content of that page. If you are still developing your website and it does not have actual text, you can use http://www.lipsum.com/ as explained earlier in this article to generate sample text.

  4. Click save to implement the changes.

This is how the website looks after implementing all the changes discussed in the above sections:

Adding a Background Image and Colors to Your Drupal Theme

To add a background image:

1. You can go to a website that offers free background images, such as http://www.designedtoat.com/backgroundsmain.htm. If you have an existing background image, however, you could use that.

Suppose you will use this image: http://www.designedtoat.com/backgrounds/blue7.jpg

You need to download it to your Ubuntu desktop.

2. In Ubuntu, go to Applications -> Graphics -> GIMP Image Editor.

3. In GIMP, go to File ->  Open and then open the image blue7.jpg

4. In GIMP, go to Image -> Scale Image and then set:

Width: 1 pixe l
Height: 300 pixels

Leave the resolution both at 72 pixels per inch. Scaling the image is done to reduce the file image size, which is beneficial for fast loading of the web page.

5. Click “Scale.”

6. Go to File -> Save As, save the file as: background.png, and then save the  image in drupal/themes/fusion/fusion_core/css/images.

Important note: if you cannot see the “images” folder, you need to create that folder  first.

7. To implement this image into your Drupal theme, you need to edit the css file. Go to drupal/themes/fusion/fusion_core/css, and then open style.css using your favorite CSS editor — or gedit will do.

8. Look for this body tag CSS entry:

body
{

}

If you cannot find that one, you need to create it, and then include a CSS line that instructs your theme to use the background image you specified previously, so it will be:

body
{
background: url("images/background.png") repeat-x;
}

You need to add the above code just below /*HTML elements. For example:

9. Save the style.css file and then reload your website in the web browser. This is how your website should now look:

You might observe that the background image is only implemented around one half of the web page’s length. To correct this, you will be adding a background color similar to the background image color.

Adding a Background Color Similar to the Theme Background Image Color

To do this:

1. Go to the Linux terminal and in the prompt, type grabc. This is a program that will pick up color on the web page. Example:

codex-m@codex-m-desktop:~$ grabc

Note: If you do not have grabc installed, you can install it using the Synaptics manager.

2. After you press the Enter key, your mouse cursor will change to an arrow. Point this arrow to the last row area of your background image (where the color is still light blue) and then left click your mouse to get the color code. It will then pick up the color. For example, the results will be:

codex-m@codex-m-desktop:~$ grabc
#e8f4fb
232,244,251


3. Reopen your theme style.css file which you edited earlier and change:

body
{
background: url("images/background.png") repeat-x;
}

TO:

body
{
background: #e8f4fb url("images/background.png") repeat-x;
}

It will now implement the background color aside from the background image.

4. Save style.css. Reload your Drupal website in the web browser, and  the colors will be now evenly distributed throughout the page:

[gp-comments width="770" linklove="off" ]

chat