Lab 10: Creating a Custom Theme

20 points

You can customize the look of your website by creating your own theme. The easiest way to do this is to start with an existing theme that is similar to what you want and changing it as needed to get the exact look you are seeking.

In Lab 10 you will create your own theme which will be a customized version of an existing theme.

Tasks

  1. For this lab you will customize the Bartik default theme, which should already be installed. First, copy the entire /var/www/html/themes/bartik directory directory into sites/all/themes and change the name of that directory to "newbartik".
  2. The .info file holds basic information about the theme such as its name. Change the name of the .info file in the newbartik directory from bartik.info to newbartik.info and open it in a text editor. Change the name line to reflect the new name. Change the description appropriately. Enable the NewBartik theme and make it the default for your lab site. (Make sure the Upcoming Events block is still visible on the home page.)
  3. The template.php file contains some php functions for the theme to process pages, handle variables, etc. Edit this file and replace all instances of "bartik" with "newbartik".

    Changing the CSS

  4. Drupal will optionally combine all CSS files together into one big file for performance reasons. However, this will prevent you from seeing changes you make to CSS files. For this lab, click on Configuration -> Performance and make sure the "Aggregate" options are disabled. Turn off caching.
  5. Let's put a box around content items on the home page to make them stand out. Open NewBartik's style.css file in a text editor. Locate this rule (line 584):
    .node-teaser .content {
    font-size: 1em;
    }
    and add two new rules:
    border: 1px dashed #ccc;
    padding: .5em;
    Save the file and reload the page.

    6. Modifying template files

    Modifying CSS can get you a long way, but for some changes you will need to modify the HTML generated by your theme. Nodes, comments, and other content types are generated by template files, which you can customize. For example, comments are generated by comment.tpl.php and the entire page is generated by page.tpl.php. These files are mostly HTML with a little bits of PHP to print out the contents of elements like titles, breadcrumbs, etc. We'll modify the page template to move breadcrumbs into the page header area.

    It can be difficult to figure out what templates generate each section of a page. Fortunately, there is a way to configure Drupal to give you some help along those lines by adding a setting in the settings.php file. Add the following line at the end:

    $conf['theme_debug'] = TRUE;

    Now restart your server and view the source of your home page. In source of your home page, search for "logo". Now scroll back a couple of lines. You should see in the comments that theme debug mode adds that the template that generates this section is "page.tpl.php".

  6. Go to the home page and then to another page, e.g. "Available Positions." Notice the breadcrumb ("Home") near the top of the content area. Let's move it into the header area, below the slogan.
  7. Edit the file page.tpl.php in the newbartik/templates directory. Go to line 117 and see where the name and slogan are being displayed. Now go to line 177 and notice where the breadcrumb is being printed. Move the line printing the breadcrumb so it appears inside the header section on line 120, just before the </div>. Reload the page and observe the difference.

    8. Theming specific content types

    It is possible to customize the way specific content types are displayed by edting the appropriate template file. For example, to customize the way comments are displayed, you would edit comment.tpl.php. Let's modify the way articles are displayed to display author submission information below the story. Since there is no article.tpl.php file already, we'll create our own by copying node.tpl.php.

  8. Create a new article with a title and contents. Note the position of the submission information.
  9. Copy node.tpl.php to node--article.tpl.php and open it in a text editor. Note that the user picture and submission information appear before the contents of the story. Move them after the contents of the story. View the story again and note the new position of the submission information. If you don't see any changes, go to Configuration > Performance and clear all caches. Then go back and reload the page.

    10. Adding or overriding template variables

    Drupal generates many useful variables for you, like $site_name and $submitted, but what if they don't generate the exact output you want? A process_page hook lets you run code when a page is generated to modify available variables or creates new ones (The Drupal site offers much more information about these advanced overrides.)

  10. We will add a line to the newbartik_process_page() that may be found in the template.php file to add a new variable. Edit that file and find the appropriate hook (function). Add the line
    $variables['random_number'] = rand(1,100);
    at the beginning of the function. Now put the random number in the header section of each page by putting <?php print $random_number; ?> in the page template. Don't forget to clear the cache to see the change.

    11. Optional challenge

  11. Change the "Submitted by" message to "Offered by" for job postings.

The Drupal.org website has much more information about customizing templates. One place to start is the customization snippets page, which has small cookbook recipies for customizing themes and modules.

Turn In

I will check your lab website for the NewBartik theme with the changes we made in this lab.