Chapter3 :Customizing Drupal Website

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

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


Chapter 3


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


Chapter 3


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


Chapter 3


Image 3.1.5 :Your new template ready to use

Mohd alif azman

6


Chapter 3

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


Chapter 3


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


Chapter 3


Image 3.2.3 : Menu for Main Menu created.

Mohd alif azman

9


Chapter 3


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


Chapter 3


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


Chapter 3


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


Chapter 3


Copy this link and paste to Path field on menu item settings.

Paste here.

Mohd alif azman

13


Chapter 3


Menu and menu item created.

-End of Chapter 3 -

Mohd alif azman

14


Chapter3 :Customizing Drupal Website

Recommend Documents