As an example, I will show you how to modify the template of the Drupal site LearnWebDesignOnline.com. In addition, this tutorial will show the process of figuring out where to make template modifications. It will demonstrate the usefulness of tools such as Firebug and Dreamweaver as well as the importance of clearing the Drupal cache when making template changes.
Currently, (as is the Drupal default) the logo is on the left and the top navigation is on the right in the header...
I am going to modify it so that logo is on right and navigation is on left as in here ...
Step One: Inspect HTML
If I am going to modify the header template, I need to know how the header HTML code is structured. I like to use Firebug to inspect the code right in the browser first.
We see that the header is contained in the div with id "logo-floater". Within it is the div of id "logo-floater" which contains the logo. After that is the ul list element that would be the navigation since menu are normally implemented using lists.
Step 2. Step Two: Find Code
Now I need to find this code in the Drupal templates. I have all the Drupal website files on my local computer so that I can work with it using Dreamweaver. The site is running on the theme files located in "sites/all/themes/learnwebdesignonline" because there have been other alterations to the theme that made it different from the default Garland theme.
So I select that folder and do a Ctrl-F to all files within that folder and its sub-directories for the code ...
id="logo-floater"
Make sure the search droplist in Dreamweaver was set to search "Selected Files in Site".
The search resulted in these two files that contain our logo div...
We will worry about the maintenance-page.tpl.php later. For now, we double-click on sites/all/themese/learnwebdesignonline/page.tpl.php since this is the file that contains the code that we need to work with.
As you can see...
there is a lot of PHP code inside the logo div. So we code-collapse it so that it is much easier to see...
Step 3: Make template changes
Becasue I like to have my left content (the navigation) first in the code order, I interchange the location of the above code so that it looks like this...
I upload the changes to the webserver. If I have my FTP setting configured in Dreamweaver, I can upload the file directly from Dreamweaver by right-clicking on the file and select "Put".
Next I make sure I clear the Drupal cache before seeing if site changed. It did not.
Note that every time I upload template changes, I clear the Drupal cache to ensure that Drupal is putting out the new modifications out to the browser. You can further confirm that the modifications had been pushed out to the browser by inspecting the code using Firebug.
Step 4. Step 4: Make CSS changes
Inspecting the HTML code using Firefox, I can see that the browser is seeing my new HTML modifications.
However, Firefox is showing me ...
that the ul navigation menu is floated right. We need to change the CSS in style.css (found in the same directory) so the the ul.primary-links rule is floating left instead.
Step 5: Move logo to right
I upload, cleared cache, and see that site is showing navigation on left now. Next I want to move logo to right. I see that it is currently positioned absolutely.
I changed it to be positioned relative and floated right ...
Step 6: Template Modification Completed
I upload the CSS and clear Drupal cache and see that the site is now as I want it...
