Your message has been sent.
This article has been saved to your account.
Go to my account
This article has been emailed to your Kindle.
Send this article
In the previous article we saw how to replace the default Drupal theme by installing a ready-made theme, free or commercial, and use it as is. In this article by George Papadongonas and Yiannis Doxaras, authors of Drupal E-commerce with Ubercart 2.x, we will learn learn how to customize your frontend, to get the look and feel of your site to match your corporate visual identity. You will learn to use your company logo and colors to create a familiar and friendly environment for your visitors.
Customizing a theme
In this section, after we have elected our primary theme, we will go step-by-step customizing it and making it suit our business need. These configurations are necessary even if you choose to hire a designer or buy a ready-made theme.
Changing basic elements
Every Drupal theme using the template engine produces HTML code from Drupal core objects. Therefore, some content of the final HTML code generated is actually site-wide property such as site slogan, mission, and site name. We will have to change Drupal default settings and provide our business details. To do this, go to Home | Administer | Site configuration and edit the fields as we describe next. If you do not want to provide specific information, for instance if you do not have a corporate slogan, you need not fill this option. Nothing will appear if the attribute is not set to the main page of your online shop.
You can edit the following elements:
- Name: This is your site's name and will be displayed in the site name theme section and can also be a part of the HTML <title> element.
- E-mail address: A valid e-mail address for your website, used by the mailer functionality during registration, new password requests, notifications, purchases, and all mail communication to your users. E-mail server details that your site uses are placed in your php.ini file. The majority of web hosting solutions have a preconfi gured mail server environment and you will not have to deal with it.
- Slogan: The slogan of your website. Some themes display a slogan when available. It will also display in the title bar of your user web browser, so if you decide to choose one, do it wisely.
- Mission: Your site's mission statement or focus. Your mission statement is enabled in your theme settings and requires that the theme supports its display.
- Footer: This text will be displayed at the bottom of each page. Useful for adding a copyright notice to your pages. You can also use HTML tags to include an image for instance.
- Anonymous user: The user name for unregistered users is "Anonymous" by default. Drupal gives you the option to change this to something different according to your target user group (for example "New Customer").
- Default front page: This setting gives site administrators control over what Drupal-generated content a user sees when they visit a Drupal installation's root directory.
We quote from the Drupal documentation section for site configuration:
This setting tells Drupal which URL users should be redirected to. It's important to note that the URL is relative to the directory your Drupal installation is in. So, instead of
it is only necessary to type "node/83". For those not using clean URLs, note that there is no need to type in "?q=" before typing the URL.
By default, the "Default front page" is set to "node," which simply displays articles that have been "Promoted to front page." Note that when changing the "Default front page" to something other than "node", nodes that are "Promoted to front page" will no longer appear on the front page. They can however, still be viewed by visiting the relative URL path "node".
If the path specified is not a valid Drupal path the user will be confronted with a "Page not found" error. It is not possible to redirect users to any web documents (e.g. a static HTML page) not created by the Drupal site.
eBook Price: €20.99
Book Price: €34.99
Changing page properties and layout
As we have seen, each theme comes with its own special options along with Drupal's default configuration. These options let us interfere with most of theme layout settings and perform in-depth customization. In this section, we will refer to these options one by one. To do so, we should navigate to Home | Administer | Site Building | Themes | Configure.
Theme global settings
In every fresh Drupal installation, Garland is enabled as the default theme. Click on the Configure tab next to List, and you will see the global settings for themes. Apparently these settings apply to all themes. On this screen, you can configure the following options:
- Toggle display: It handles visibility for specific page elements. You have to configure them in the Site configuration page first. (see previous section).
- Logo image settings: If toggled on, the following logo will be displayed. You have the option to upload a new logo image replacing the old one.
- Shortcut icon settings: Your shortcut icon, or favicon, is displayed in the address bar and in the bookmarks of most browsers. Drupal also provides the option to upload your own custom favicon to replace the smiling Druplicon. We like Druplicon, but your site should display your identity and a custom favicon is indication of good design. If you want to easily create a favicon for your site, you can use an online tool like FavIcon generator, available at http://tools.dynamicdrive.com/favicon/.
- Display post information: Enable or disable the submitted by Username on date text when displaying posts. This is a very useful option and should be used in non-content or community-oriented Drupal installation such as online shops. It is strongly advisable to uncheck this option.
Next to the Global settings subtab is a list of enabled themes. On a new installation, only Garland will be listed. Select Garland for now. At this moment, you should feel free to experiment.
- General Settings: These are the settings concerning visibility of certain UI elements.
- Mission Statement: This option lets you choose where to display your mission statement.
- Breadcrumb: This option lets you choose whether or not to display a breadcrumb trail. If you have a product catalog, this is a very useful feature for your site. For instance, if a customer navigates to the iPod page, the breadcrumb trail will provide the full navigation, Electronics | MP3 | Apple. Therefore, your customer can go directly to the MP3 section and see other products, such as Creative or Sony walkmans.
- Username: Display "not verified" for unregistered usernames.
- Node Settings: Adjust how and which information is being shown with your content. You can modify these settings, so they apply to all content types, or check the Use content-type specific settings box to customize them for each content type. For example, you may want to show the date on stories, but not pages.
- Author & Date: Check accordingly to display or not the author's username and the date the node is posted. Remember that you can globally configure this display from the default theme setting page. The date format is also customizable through the Date and Time settings page Home | Administer | Site configuration | Date and Time.
- Taxonomy Terms: This is a very important screen, because as of Drupal 6, there are so many theming and display options in theme confi guration.
- Links Read More: This setting provides options to change the display texts for the Read more functionality below node teasers or views.
- Comments Full Content: The link when the full content is being displayed. HTML is allowed.
- Comments Teaser: Customize new comment links. You can choose the label end users will see when they are called to comment on content.
In a ll the fields we discussed, you can use HTML fragments along with performing label translations through Drupal translation interface.
Theme development settings are strictly the developer's concern and they handle theme registry parsing, a procedure that searches for all template files from the filesystem. We should leave this checkbox unchecked.
In this article we saw how you can install and customize a ready-made theme. In the next article we will Create a theme from scratch using the Zen theme.
If you have read this article you may be interested to view :
- Installation of Drupal and Ubercart 2.x
- Drupal and Ubercart 2.x: Install a Ready-made Drupal Theme
- Drupal and Ubercart 2.x: A new Approach to Drupal Theming
- Drupal and Ubercart 2.x: Creating a Theme from Scratch Using the Zen Theme
- User Interface Enhancement Techniques with Drupal and Ubercart 2.x
- Product Cross-selling and Layout using Panels with Drupal and Ubercart 2.x
eBook Price: €20.99
Book Price: €34.99
About the Author :
George Papadongonas is the owner of a small web development firm, located in Athens, Greece. He started his career as a freelancer web developer in 2000 and works with small and medium size enterprises. He has experience in many development platforms, but felt in love with Drupal in 2007 and with Ubercart in 2008. He is a member of Drupal Association and an active supporter of the open source community.
Yiannis Doxaras has studied theoretical physics at University of Athens and University of Cambridge. He is co-founder of OSIS, a Greek open source startup company that provides turn-key solutions in industries like travel, e-learning, and e-government. Yiannis is an active committer in various open source projects mainly with Java, Python and PHP technologies. He is a serial entrepreneur and innovation broken in Greece and the Balkans.