Theming Drupal
From ThemesWiki
| Official Page |
| Project Documentation |
| Download |
|
Contents
|
[edit] Basic Principles
Two basic principles will guide our design work:
- make things as simple as possible
- hide unnecessary options
[edit] Keep it as Simple as Possible
If you look at the Google homepage at http://google.com you don't see much.
And that's precisely the point. You're not presented with a huge number of options because the people designing that page have made some decisions about why people are navigating to http://google.com they have arrived there to search. The screen is remarkably uncluttered. Nothing gets in the way of what the user is there to do: type in a search string, click submit, and then browse away.
The minimalistic web design with a splash of color in the logo supports the main activity people engage in at Google.
To look at it in another way, there is nothing on the page to distract or impede the user from what they are there to do.
Which brings us to the second main principle of creating an easily navigated site: hide unnecessary options.
[edit] Hide Unnecessary Options
Frequently, people designing educational portals attempt to create a landing page that links to the full range of activities within the site. While creating such a detailed and useful landing page is a worthwhile goal, it often results in a page that is visually cluttered and text-heavy. For an example of what I describe, navigate to virtually any page built within Ning. An example of such a page is shown below. The screenshot has been split into two:
In order to conserve space, we are only showing the top half of the page. The text-heavy layout makes it difficult for users to find content; imagine how a user with any spatial processing issues would fare with a page like this.
By paying attention to how you build your menus and how you organize your site, you can avoid this problem. A series of well-organized menus allows you to group related options together, and create a site that is intuitive to navigate. By keeping your pages as uncluttered as possible, with simple, well organized menus, you will create a site that is far easier to use than the site shown above.
These ease of use issues are particularly important when you are working with students learning a language, or with adult language-learners. Additionally, sites with uncluttered pages will be easier to use for students with learning difficulties.
[edit] Setting the Home Page
Create a page that gives an overview of your site. As shown in the following screenshot, alias this page in the URL path settings to home.
Then, click the Administer | Site configuration | Site information link, or navigate to admin/settings/site-information. As shown in the following screenshot, set the Default front page setting to home.
Click the Save configuration button to save the default front page settings.
The other items on the Site information page are covered later in this tutorial.
[edit] Menus, Blocks, and Primary Links
Menus and Blocks are the central elements used to build a navigational structure. A Menu' is a collection of links; Blo'cks have many uses, but for this discussion we will focus on how they are used to display menus.
At its most basic, designing a navigational structure can be reduced to this simple process:
1. Create a list of places that you want your users to go, and/or of things they will need to do. For example, you want your students to be able to see a list of assignments, your blog, and other student blogs; you could place links to these pages in a custom menu, which would automatically generate a block.
2. Then, via the block display settings, show the block.
[edit] Primary and Secondary Links
Primary links are a unique type of menu in that most Drupal themes are set up to format and display them in a specific way. Primary links are usually displayed across the top of your site; they are useful for presenting your users with a consistent set of links across all pages on the site.
Primary and Secondary links can be set and configured through the menu settings accessible via Administer | Site building | Menu | Settings link, or by navigating to admin/build/menu/settings. Secondary links can be connected to primary links, or can be set apart as a smaller sub-menu, completely distinct from the primary links.
In short, primary and secondary links can be used in a variety of different ways, and the most effective use of them will be determined by the specific goals of your site.
If you are looking to extend the functionality of primary and secondary links, you should look at the Menu Block module at http://drupal.org/project/menu_block. This module allows you to display nested menus in a block. While primary links are excellent for displaying a small number of important links, they are not good at showing more than a couple of options below that primary menu. The Menu Block module solves that problem.
[edit] Creating Customized Menus
As is usually the case with Drupal, you have several viable ways of doing something. In this instance, we need to get back to our goal: creating a clean, easy-to-use navigation structure. Toward this end, we want to complete the following three tasks:
1. Split the Administration functionality into a separate menu, and display the resulting block
2. Separate the "Create Content" links into a separate menu, and display the resulting block
3. Create the Primary links
[edit] Create a Separate Administration Menu
The core Drupal navigation menu lumps the site administration options menu in with the non-administrative options. For users who have a limited set of administrative responsibilities, this can create a large number of options that can be confusing to navigate. To reduce screen clutter, we will seek to strip out as many unnecessary options as possible. Then, we will organize the remaining menu items in a way that makes sense.
As we add and customize new menus and blocks, we will follow these general steps:
1. Add a new menu (or use an existing menu)
2. Enable the block associated with the menu
3. Add menu items into the menu
4. Fine-tune the block settings, including the block name and the visibility settings
These four steps will guide us as we create a more intuitive navigational structure.
[edit] Adding New Menus
Let's start by adding new menus:
1. Click the Administer | Site building | Menus link, or navigate to admin/build/menu.
2. Click the Add Menu tab.
3. On the Add menu form, enter the following values:
Menu name: site-administration
Title: Site Administration
Description: This menu contains all the links to administer your site. By separating these links into a separate menu, you create a site that is easier to use.
4. Click the Save button to create the menu.
|
Whenever you create a new menu, Drupal automatically creates a block to display that menu. In order for your new menu to be displayed, you need to enable the block. |
[edit] Enabling the Block
In order to enable the block, we will carry out the following steps:
1. Once you have created the menu, navigate to the Block administration section by clicking the Administer | Site building | Blocks link, or by navigating to admin/build/blocks.
2. Enable the Site Administration block by dragging it to the Left sidebar region.
3. Click the Save blocks button to save your changes.
4. Examine the Navigation menu in the left sidebar. Nothing has changed! What kind of sham is this?
5. No sham at all. Although we have created the menu and enabled the block, the menu currently has nothing to display, therefore the block isn't displayed. This order, however, is critical, for reasons explained below.
[edit] Adding items to the Menu
For this step, we are moving the existing administrative options into our new menu.
1. Click the Administer | Site building | Menus link, or navigate to admin/build/menu. Click the Navigation link, as pictured in the following screenshot:
2. Scroll down the page until you see the Administer menu item. Click the edit link to the right of this item.
3. This opens the Menu settings page, as seen in the following screenshot:
4. The only setting we need to change here is the Parent Item. As shown in the following screenshot, select the Site Administration option as the parent item:
5. Click the Sa've' button. Now you will see the structure of the left sidebar change. The Site Administration block we enabled earlier now appears with all of the administrative options contained within it.
In the above instructions, I referred to the order of these steps as "critical." The reason we created a new menu and left it empty, then enabled the empty block, and finally filled the menu, has to do with the relationship between menus and blocks. If we hadn't enabled the block, we would have effectively caused the administrative menu to disappear.
If that should ever happen to you, don't worry: you can always return to the administrative options by navigating to /admin in your site.
For this example, we do not need to adjust the block visibility settings.
[edit] Create a Separate "Add Content" Block
Within Drupal usability studies, many respondents point to confusion when it comes to adding content within a site. To help reduce this confusion, we will separate out the links to add content into a separate block. This step helps distinguish the process of adding content from the other possibilities in the site.
Just as when we added the custom site administration block, we will follow these four steps:
1. Add a new menu (or use an existing menu)
2. Enable the block associated with the menu
3. Add menu items into the menu
4. Fine-tune the block settings, including the block name and the visibility settings
[edit] Adding New Menus
Click the Adm'inister | Site building | Menus' link, or navigate to admin/build/menu. As described earlier in this tutorial, we will use the Add tab to add two new menus: Add New Content and Holding Tank.
As the name implies, we will use the Add New Content block to hold the links for adding new posts.
When creating the Add New Content block, use the following values:
- Menu name': add-content.
- Title': Add New Content.
- Description': This menu contains links for adding content. It replaces the default "Add Content" menu.
We will use the Holding Tank as a place to store links we are not going to use. Although we could just disable these menu items, moving them to the Holding Tank menu also simplifies the menu administration.
When creating the Holding Tank block, use the following values:
- Menu name': holding-tank
- Title': Holding Tank
- Description': This menu is a storage tool for links we do not need or want to use
Once the two new menus have been created, we will enable the block for Add New Content.
[edit] Enabling Blocks
To enable the new block, browse to the Block administration section by clicking the Administer | Site building | Blocks link, or by navigating to admin/build/blocks.
Enable the Add New Content block on the Left Sidebar. Drag and Drop the blocks in the order you want them.
[edit] Adding Menu Items into the Menu
To begin with, return to the menu administration screen by clicking the Administer | Site building | Menus link, or by navigating to admin/build/menu. Click the Navigation link to edit the navigation menu, and then click the edit link for the Create content menu item. As shown in the following screenshot, move the Create content menu item to the Holding Tank menu.
Once you have moved the menu item into the Holding Tank, click the Save button to submit the form and save your changes.
By moving items into the Holding Tank, you remove them from the menu administration screen and the menus/blocks presented to the end user. If you do not want to use the Holding Tank, you can disable the individual menu items. The only real difference is that moving the unused menu items to the holding tank reduces visual clutter for people administering the menus.
Now that we have moved the entire Create content menu into the Holding tank, the options to add content are removed from the default navigation menu. The remaining step requires that we move the individual menu items into the Add New Content menu we created earlier in this section.
To do this, click the edit link next to a menu item you want to move.
Then, place the menu item into the Add New Content menu.
Repeat these steps for all of the content types you want to move.
When you are done, your users will have a distinct menu to use when they need to add content.
[edit] Populate the Primary Links
In this step, we will add some useful links into the Primary links menu. As you populate the Primary links, think about the work your site members will be performing. You want your primary links to act as doorways to their most commonly-performed tasks.
The process for adding menu items into the Primary links is just the same as moving them into other menus. As shown in the following screenshot, when editing an existing menu item, select Primary links as the Parent item.
[edit] Adding a Post Directly to a Menu
Users in a role with administer menu privileges can assign new posts directly into existing menus. For this example, we will assign our home page post, created earlier into this tutorial, into the Primary links.
To return to the home page, click the logo or the site name in the top left corner of your screen. Then, click the edit tab to edit the post.
|
To be able to edit the post, you must be logged in as a user with the sufficient privileges. |
As shown in the following screenshot, the Menu settings are at the top of the page.
Enter Home as the Menu link title, select Primary links as the Parent item, and submit the page.
Once you have saved the page, you will see the link to Home appearing in the Primary links, as shown in the following screenshot:
The Primary links appear in the top right corner of the screen as text links. As noted above, different themes present the Primary links in different ways. For example, some themes display Primary links as tabs or buttons. For a complete look at contributed themes and how they display the primary links, see http://drupal.org/project/themes.
[edit] Adding a New Menu Item
In some cases, such as creating a menu item that links to an external site, you will need to add a new menu item into an existing menu for example, you might want to link to your main school site from the class website.
For this example, we will add a link to http://drupal.org. At the risk of stating the obvious, you can use these same steps to place a link to any site in any menu.
To begin with, return to the menu administration screen by clicking the Administer | Site building | Menus link, or by navigating to admin/build/menu. Click the name of the menu you want to edit. For this example, click Primary links.
To add a menu item, click the Add item tab, as shown in the following screenshot:
For each new menu item, you need to specify a:
- Path': this can be internal or external
- Menu link title': this text will be displayed in the menu
- Description': this text will be displayed when hovering over a menu item
- Parent item': to determine where the new menu item will be displayed
Click the Save button to submit the form and create the new menu item.
After the menu item has been saved, you are redirected to a page where you can reorganize the menu items via drag and drop.
[edit] Theme Settings
In this section, we will look at enabling themes, adjusting Global settings, and then adjusting the settings for the Garland theme, one of Drupal's core themes.
[edit] Enabling Themes
To view the list of installed themes, click the Administer | Site building | Themes link, or navigate to admin/build/themes. On this page, you will see a list of all of the installed themes, as shown in the following screenshot:
To install a theme, refer to the instructions given in Tutorial 3. To enable a theme, click the box under the Enabled column, and then click the Save configuration button.
To set a theme as a site-wide default, click the Default option button, and then click the Save configuration button.
On most sites, you will only need to have one theme enabled.
[edit] Global Theme Settings
To access the Global theme settings, click the Configure link as indicated by point 1 in the preceding screenshot, or navigate to admin/build/themes/settings.
The global theme settings have four different sections: Toggle display; Logo image settings; Shortcut icon settings; and Display post information on.
|
Of the four sections within the global theme settings, only one must be set in this section: Display post information on. The other three sections can be set within the individual themes, and if a setting is set within a theme it will override the global setting. |
[edit] Display Post Information on
This setting refers specifically to the text that, by default, accompanies most posts, as pictured in the following screenshot:
This setting allows you to turn this information on or off for specific content types by toggling the options on or off.
For example, this information is useful for blog posts, where the time and author are often relevant. It can be useful to know, for example, if your students are posting content after midnight, as that information can be used in a conversation about managing workload.
However, if you are running an event calendar on your site, you will probably want to hide the time that event was posted, as this could be confused with the time of the actual event. Note that even when this setting is turned off, Drupal still stores this information. For example, even with this option turned off for the theme, it could still be displayed in a view.
Once you adjusted these settings to how you want them, save your choices by clicking the Save Configuration button.
[edit] Toggle Display
This section lets you toggle the display of information collected from various areas of the site configuration.
Items in group 1 can be set by clicking the Administer | Site configuration | Site information link, or by navigating to admin/settings/site-information. These settings were covered in detail earlier in this tutorial.
Items in group 2 can be set by clicking the Administer | User management | User settings link, or by navigating to admin/user/settings.
Items in group 3 can be set within the menu system by clicking the Administer | Site building | Menus link, or by navigating to admin/build/menu. These settings were covered in detail earlier in this tutorial.
The Search box is simply a search area displayed within the theme. The Shortcut icon is covered later in this section.
Once you have adjusted the settings to how you want them, save your choices by clicking the Save Configuration button.
[edit] Logo Image Settings
The next two sections Logo and Shortcut icon allow you to customize the logo displayed on the site's pages and the shortcut icon (also called the favicon) displayed in the browser address bar and favorites.
A new logo can be uploaded via the form pictured in the following screenshot. Note that an oversized logo can break a site layout!
Once you've adjusted the settings to how you want them, save your choices by clicking the Save configuration button.
[edit] Shortcut Icon Settings
You can upload a custom shortcut icon, also called a favicon, using the form shown in the following screenshot:
You can create favicons using most graphic software, but it is easier to use one of the free online favicon creators. My personal favorite is http://www.chami.com/html-kit/services/favicon/ this site will automatically generate a favicon from a picture.
Once you've adjusted the settings to how you want them, save your choices by clicking the Save configuration button. Theme-Specific Settings
As stated above, adjusting the theme-specific settings will override the global settings.
In this tutorial, we are configuring the options for the Garland theme. This theme includes a color picker, which allows you to choose specific colors for the different elements of your theme.
The color picker, shown in the following screenshot, provides a way of selecting colors for specific theme elements via the web browser.
Using the color picker, you can select new colors via drag and drop, and redefine the text color, the link color, and the general color scheme.
Once you have selected a color scheme, save your choices by clicking the Save configuration button.
[edit] Drupal's Theme Structure
At the outset, I want to make a couple things clear, First, a detailed analysis of Drupal's theming system is beyond the scope of this book. Second, Drupal offers a lot of flexibility for those who want to mess around with the code; however, just because you can doesn't mean you should.
Additionally, developing a theme is not complete without checking to see how the theme displays in different browsers. This means looking at your site in at least the following browsers: Internet Explorer 6 and 7, Firefox on the Mac, PC, and Linux, Safari, and Opera. Cross-browser compatibility checking can be incredibly time-consuming, particularly when trying to get a complex page to render cleanly in both Explorer and Safari. Often, adjusting a value to get a clean display in one browser causes a new problem to arise in another. When you edit your theme via the settings described above, you minimize the risk of creating more complex issues. However, leveraging the full power of design within Drupal requires the editing of theme files.
With that said, the following screenshot gives an overview of the directory structure of the Garland theme.
[edit] css Files
CSS is an abbreviation for Cascading Style Sheets. Style sheets contain information about how the content within your site should be displayed. For background information on style sheets, visit http://en.wikipedia.org/wiki/Cascading_Style_Sheets.
|
When working with your themes' |
The first place to get started when modifying a theme is within the theme's css files. In the preceding screenshot you can see the five css files that are included with the Garland theme; of these five files, we are mostly interested in style.css, as that is where the bulk of the information concerning the look and feel of the Garland theme is stored.
A full exploration of CSS is beyond the scope of this book, but for those interested in learning more, the following resources are indispensable and freely available online:
- The W3 school's CSS tutorial' (http://www.w3schools.com/css/): This website gives a top-to-bottom tutorial on
css. Great for beginners looking to learn and CSS gurus who don't want to remember every single detail. - The Web Developer Toolbar ('https://addons.mozilla.org/en-US/firefox/addon/60): This Firefox add-on includes tools that highlight the CSS used on a page, and lets you edit it to see the effects of the changes in real time.
- Firebug ('https://addons.mozilla.org/en-US/firefox/addon/1843): This Firefox add-on is a more technical web developer tool that allows you to (among MANY other things) highlight specific sections of a page to see the CSS in use on that section.
[edit] tpl.php Files
If you have edited the CSS files of your theme and still haven't achieved the results you wanted, you still have another option: editing the code that creates the theme. The code that creates the theme is contained within the various *.tpl.php files for your theme. Additionally, many themes have a template.php file that contains functions used by the theme.
|
When working with your themes' |
If you look at the preceding screenshot, you will see several tpl.php files; for example: block.tpl.php, comment.tpl.php, node.tpl.php, and page.tpl.php.
In general terms, the page.tpl.php collects all of the information passed to it by the other tpl.php files. This makes the page.tpl.php file of singular importance within the theme, as it controls the general layout of every page rendered on your site.
To effectively work with these files, you need to have some familiarity with PHP. In short, by working with these files you have a great degree of control over how your site looks. The downside of this power is that, if you make a mistake in editing one of these files, you can cause your entire site to crash.
As I said earlier, a full discussion of Drupal's theming system is beyond the scope of this book. However, some quick highlights will serve as a starting point for people looking to learn more about building custom themes in Drupal.
[edit] Custom tpl.php Files
To create custom pages, make a copy of your original page.tpl.php (or block.tpl.php, or node.tpl.php) file and rename it as described below:
You can build custom pages based on the node id by creating a page-x.tpl.php (where x is the node id of the specific page you want to theme) file.
You can create a custom home page for your site by creating a page- front.tpl.php file.
You can theme blocks differently by region by creating a block-regionname.tpl.php file so, if you created block-footer.tpl.php then this file would control how any block placed in the footer region appeared.
You can theme separate content types differently by creating a node-contenttype.tpl.php file. For example, node-blog.tpl.php can be used to customize how blogs are displayed.
[edit] CSS and JavaScript Aggregation
Drupal 6 comes with the ability to aggregate your css and javascript files. Aggregating these files can improve the performance of your site, and it can also help eliminate some bugs in Internet Explorer. Turn on aggregation after you have configured your site to its desired settings. Developing your site with aggregation enabled can cause delays in seeing the results of changes and tweaks, which can complicate the design process.
To aggregate your CSS and JavaScript files, click the Administer | Site configuration | Performance link, or navigate to admin/settings/performance, and select the appropriate options in the Bandwidth optimizations settings.
[edit] Additional Resources
The Drupal handbooks contain a wealth of good information on developing and customizing themes.
Two good places to start in the handbooks are:
- The theme snippets page at http://drupal.org/node/45471 this page contains user-submitted theme modifications
- The theme HowTos page at http://drupal.org/node/22803 a collection of css and php-based solutions for a variety of theme-related issues
Additionally, there is a Drupal Themer Module available as part of the devel module. This module can be used by advanced designers to help develop custom themes. For more details, see http://drupal.org/project/devel.
[edit] Additional References
- For instructions on Installing Drupal, click here
- For instructions on Building Drupal themes, click here
- For instructions on Customizing Drupal Theme, click here
- For instructions on Setting Up The Development Environment for Drupal 6, click here
- For instructions on Troubleshooting Drupal, click here
- For instructions on Customizing Drupal 6 Themes, click here
- For instructions on Advanced Theming on Drupal Multimedia, click here
- For instructions on Creating and Customizing Drupal 6 Themes, click here
- For instructions on Theming Drupal6, click here
- For instructions on Theming Drupal 5 Views Recipes, click here
- For instructions on Setting up Drupal for web services, click here
- For instructions on Installing Drupal Views Module , click here
[edit] Source
The source of this content is Chapter 14: Theming Drupal of Drupal for Education and E-Learning by Bill Fitzgerald (Packt Publishing, 2008). Logo Designby ThemesWiki.org Kevin Josh 2010
Executive Editor Sean Lopez own : SEO Company and provider of Link Building Services and SEO Services
And Like Costumes and Halloween Costumes and criar sites
And Like The Global Information Network and Global Information Network
