Easy web development using Drupal CMS (Content Management System)

by:

MOHD ALIF AZMAN

http://www.alifazman.com

Visit alifazman's Scribd Channel on:

http://scribd.com/alifazman

Creative Commons International :Malaysia

Chapter 3 Customizing Your drupal Website

Chapter 3

Customizing Your drupal Website

In this chapter, we will try to do :

1. Customizing our website looks (Change our website theme)

• Installing a theme(template)

2. Adding Menu to our website.

• Creating new menu.
• Positioning Menu
• Linking menu with content

Mohd alif azman 2 http://www.alifazman.com

Chapter 3 Customizing Your drupal Website

3.1 Customizing our website looks

Design and how the web look are very important for a web development process. Most of the end user
doesn't count about how complex the development could be, because the important thing for them, is
how the web looks like. For drupal, a lot of web theme available to use. You can pick whether it's a free
or paid template. Free template is sufficient enough for this session of tutorial.

For the time being, lets us find our template for drupal by google it , or you can just visit drupal website
where they provide free theme for download http://drupal.org/project/Themes.

Image 3.1.1: Drupal theme

Mohd alif azman 3 http://www.alifazman.com

Chapter 3 Customizing Your drupal Website

3.1.1 Installing Drupal Theme

Step :
1. Download your picked theme. Usually drupal theme comes with .tar.gz file format. You will
need unrar or equivalent software that could extract that package.

Image 3.1.2 : Download a theme

2. Extract your theme.

Image 3.1.3 : Extract drupal theme

Mohd alif azman 4 http://www.alifazman.com

Chapter 3 Customizing Your drupal Website

3. Now, if you are using local machine and you OS is windows with additional you used xampp
bundle, so you should look into you htdocs folder. Default xampp location could be on
C:\xampp\htdoccs\yourdrupalfolder\themes. Paste your extracted theme file to themes folder .if
you are using Linux, I hope you should now it by yourself =) .
4. Lets point to our theme section inside drupal admin panel

Image 3.1.4 : Click on themes to display your installed themes

Notes :
To use your new installed template, just tick at the check-box enable and default.
Then click save to activate and apply the template to your website

Mohd alif azman 5 http://www.alifazman.com

Chapter 3 Customizing Your drupal Website

Image 3.1.5 :Your new template ready to use

Mohd alif azman 6 http://www.alifazman.com

Chapter 3 Customizing Your drupal Website

3.2 : Adding Menu to Our Website

Creating menu is simple but tricky. To take a look at the differences before and after creating menu, have a look
at this picture.

Image 3.2.1: Our front-page before adding menu

Now, we only have a simple content, a user log-in menu and also our created block on previous chapter. Now
let's start creating our menu.

To start, (make sure you logged in as registered user with admin access) point to “Administer”>,Site Building>,
Menu.

Mohd alif azman 7 http://www.alifazman.com

Chapter 3 Customizing Your drupal Website

Image 3.2.2 : Menu list.

By default, we should have this kind of Menus in our panel : Navigation, Primary links, Secondary links. Unless
you created yourself a menu before. Now, to create new menu, just click on the “Add menu” link above (take a
look at image above).

Then, refer to image below, for Menu name field, fill it with a name that suit with your menu (just give any)
.Same goes with the title and descriptions. Once you created, your menu is ready to be fill by you with menu
item.

Notes : Menu name must contain only lowercase letters, numbers, and hyphens, and must
be unique.

Mohd alif azman 8 http://www.alifazman.com

Chapter 3 Customizing Your drupal Website

Image 3.2.3 : Menu for Main Menu created.

Mohd alif azman 9 http://www.alifazman.com

Chapter 3 Customizing Your drupal Website

3.2.2 : Positioning Menu

Now, our target is to put our menu at the front-page of our website. To do that, just point to blocks management
and you should find a disable “Main Menu” block which you created just now. You not only created only menu,
but it's automatically create a block as well. Select from the drop down list the positioning of your menu. For
this one I choose to put my menu on the right sidebar. Click save to activate it.

Image 3.2.4 : Main menu on disable block panel.

Mohd alif azman 10 http://www.alifazman.com

Chapter 3 Customizing Your drupal Website

3.2.3 : Linking Menu item with content

After done with it, it doesn't mean that our menu was created. Of course we need a menu item for that main
menu we created just now which is main menu.

Now, we point back to menu management (refer above image) and click add item to add a menu item for our
selected menu. Now, this going to be tricky. Fill the setting for your menu item. The title and description. As you
can see, the Path field is compulsory to be fill in. The path is actually the link for your menu item.

Mohd alif azman 11 http://www.alifazman.com

Chapter 3 Customizing Your drupal Website

To save our time, just open a new tab in your browser. Point to : Content Management>,Content.

From here you can see the list of content that you created before. What are we going to do is, copy the link for
this content that you created

Mohd alif azman 12 http://www.alifazman.com

Chapter 3 Customizing Your drupal Website

Copy this link and paste to

Path field on menu item
settings.

Paste here.

Mohd alif azman 13 http://www.alifazman.com

Chapter 3 Customizing Your drupal Website

Menu and menu item created.

-End of Chapter 3 -

Mohd alif azman 14 http://www.alifazman.com