Drupal: Working with Themes, Templates, and Blogs

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."