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
