In this chapter I will explain the process of changing the overall look and feel of your site by installing a new theme. I will walk you through the process of selecting, downloading, and enabling your selected theme. You've added some neat things to your site in previous chapters, and we've seen some exciting features of Drupal; but this chapter will have you going "wow!"
The visual layout and presentation of your new Drupal site is defined through a Drupal component called a theme. A theme defines:
The colors used on the page.
The fonts used for text, headings, links, and other elements.
The placement of images and graphics that are present on every page of the site (images and graphics that are associated with the page itself rather than a content item).
The layout of the page (such as a menu at the top, a banner area, a secondary menu below the banner, a column on the left, or a footer).
Drupal themes are designed and developed using HTML, cascading style sheets (CSS), and the PHP programming language. Themes can be as simple as a plain white canvas or as complex and visually energizing as your imagination can conjure up.
We have already worked with a Drupal theme; the basic Drupal 7 site that we installed as part of the earlier chapters in this book used the Garland theme. Garland is a predominantly "blue" theme (see Figure 6-1), with a relatively simple structure. There is a region (a rectangular area on the page where content, menus, widgets, and so on can be assigned) for a header, a left sidebar, a right sidebar, the general content area, and the footer.
You'll find as you browse through various Drupal themes that many of them follow this same generic layout, which for many people is a negative because it makes them believe that every Drupal site looks nearly identical. The truth of the matter is that yes, many off-the-shelf themes follow this same layout pattern. However, you have the ability to create a layout that significantly deviates from the standard. Figure 6-2 demonstrates how I used the capabilities of Drupal's theme engine to create a Drupal site for the University of Oregon that is used by high school students to manage their electronic portfolio of learning assets and track their progress toward graduation. The area at the top of the page with the brown background is the header, the area in the middle of the page with the green background is the content area, and the brown area at the bottom is the footer.
Understanding some of the basics behind how a Drupal theme works will help lay the foundation for some topics that I will cover in later chapters. The fundamentals of how a theme works can be distilled into a few basic concepts, which I explain here.
As the administrator, you have the ability to pick which theme your site will use. You can either download a stock theme from http://drupal.org/project/themes, or you can purchase a commercial theme from various providers that sell Drupal themes. It is likely that you will find something that matches or closely matches what you want from a visual design perspective on the Drupal theme download site. If you scan through the hundreds of themes and can't find one you like, you can always create your own. Pro Drupal Development, also published by Apress, covers many of the aspects of creating a theme from scratch.
If you find a theme that you like, download it, expand the downloaded file (just like you did when you downloaded Drupal), and copy the theme to your web server.
Once copied, you enable the theme through the administration features provided in Drupal 7, and voila! Your site is now displayed using the theme.
Once the theme is enabled, Drupal loads it and its associated cascading style sheets and assembles the content. Drupal then renders each page using the structure, style, colors, fonts, and images as you have defined them in your theme.
Drupal 7 ships with the Garland and Stark themes. Although Garland is a great theme, it's likely one that you won't use on your production site (although browsing around the web you'll often run into a site that uses Garland as its production theme). Stark is an extremely plain theme. If you're going for a very clean and text heavy-theme, then Stark may be a good choice for you, but it's likely that you'll want to pick from one of the hundreds of themes that you can freely download and use.
Before you begin your search for a new theme, you should sit down with a blank piece of paper and sketch out the general layout of at least the homepage of your new site. Key concepts to focus on include:
Will your site use horizontal menus and, if so, how many will you have and where will they be placed?
Will your site have a header or banner area? If so, how tall will the header be, and will it span the entire width of your page?
Does your design call for a left or right side bar? Or does your design call for two sidebars on the right or two on the left?
Will your site have a footer and, if so, does the footer span the entire width of the page?
Will you have a fixed width (say, 960px wide), or will the width of the page expand and contract as the visitor expands and contracts the width of their browser?
Answering these questions will help you narrow the choice of themes to only those that support your general layout and design goals.
There are multiple ways to search for themes. The following are two common ways:
Visit
www.drupal.org/project/themesand browse through the descriptions of themes that are available for download. See Figure 6-3.Visit
http://themegarden.org/and see each theme listed onDrupal.orgin action.Themegarden.orgrenders its entire site in each of the themes listed onDrupal.org, so you can see how your site might look in each.
Both methods work well. Many people browse through the list on Drupal.org and then visit Themegarden.org to see that theme implemented on a live site. You may choose to use one or both of the sites.
For demonstration purposes, let's search the Drupal.org site for a Drupal 7 theme that matches our intended layout and color scheme. On www.drupal.org/project/themes, in the right-hand column, there is a capability for filtering forms based on the version of Drupal that you are using. You'll want to filter the results by Drupal 7, because themes for previous versions will not work on our site.
Drupal will redisplay the list of themes, only listing those that are compatible with Drupal 7. You can also sort the results by title, creation date, last release, or recent activity. Clicking on "Last release" shows all of the newly added themes (or updates to existing themes), which is a nice feature when you visit this page often and want to see what the community has contributed. For this demonstration, let's sort by Title to list the Drupal 7 themes in alphabetical order.
Browse through the pages of themes to see the variety that is available. Most theme developers provide a sample screenshot of their design so you can see the general layout and design of their theme. As an example, select the Aberdeen theme (http://drupal.org/project/aberdeen), because the visual design and layout varies slightly from the standard layouts (such as Garland) and the colors are nice and subtle. See Figure 6-4.
The next step is to download the theme you want. A new feature in Drupal 7 makes downloading and installing themes a simple task of copying the URL for the theme download file and pasting the URL into a form. To get to this form, first click the Appearance link in the top menu. On the Appearance page, click on the "Install new theme" link. See Figure 6-5.
Clicking on the "Install new theme" link exposes the form that is used to upload and install a new theme. See Figure 6-6.
On this form you will see two fields. In the first, you can type (or paste) the URL of the theme's distribution file that you wish to install. Let's do that for this example. Open a new browser window (or a tab) and navigate to the theme that you wish to install (http://drupal.org/project/themes). We'll use the Aberdeen theme for Drupal 7 (http://drupal.org/project/aberdeen).
Using your mouse, hover over the Download link and right-click on it. In the pop-up window that appears, select the option that allows you to copy the links location (URL). Return to the theme installation form. Right-click in the URL text box and select paste.
With the URL pasted in the text box, you're now ready to click the Install button. Click the button and Drupal downloads the files from the URL specified, copies the files the correct directory, expands (uncompresses) the theme, and makes it available for you to enable.
After downloading, Drupal redisplays the list of themes available on your site, including Aberdeen in the Disabled Themes section of the list. See Figure 6-7.
To enable the theme and set it as the default for your site, simply click on the "Enable and set default" link for the theme that you downloaded (we'll use the standard Aberdeen theme, not the fluid layout). At the bottom of the page, click the Save button. Once saved, click on the X in the top right-hand of the Themes page. Return to the home page and click your browsers refresh button. You should now see your site rendered in the new theme. See Figure 6-8.
Administration forms tend to be wide and long, sometimes not fitting too well within the confines of the content area defined for a given theme. To address this problem, Drupal 7 lets you specify a theme that should be used for administrative functions. You can try your new theme to see if it works for administration screens, or you can pick a different theme to use whenever a site administrator is performing site administration tasks. Typically, a simple clean theme that is at least 960px wide works best as the admin theme. To change the administration theme, simply click on the Appearance menu item at the top of the page and scroll to the bottom. You'll see a section titled Administration Theme. From the list of themes in the drop-down list, select a theme that you know will work with administration forms. By default Drupal 7 enables Seven as the administration theme, because it accommodates administration screens. You may also change the administration theme to any other theme listed in the drop-down list. If you change the value, make sure you click the "Save configuration" button.
Drupal 7 provides a set of configuration options that, when changed, updates certain aspects of what is displayed within your theme. Depending on whether the theme author adhered to Drupal standards, you can use this form to determine which elements are displayed on the page (Logo, Site Name, Site Slogan, and so on), whether the theme should use its default logo, and whether the shortcut icon should be used (the shortcut icon is also known as the favicon; it's the little logo that appears to the left of your browsers address bar). To get to this screen, simply click on the Appearance menu item in the top menu and click on the Settings tab at the top of the Appearance page. See Figure 6-9.
In this chapter we stepped into the "wow!" part of building a Drupal-based site: themes. In a matter of minutes, we changed the entire look and feel of our site through a few simple steps. Spend some time browsing through the themes on Drupal.org. You'll be amazed at the breadth of options that are literally a few clicks away from changing the entire look of your site.