Packt Publishing Community, Experience, Distilled

Customizing the Default Theme in Drupal

HomeBooksSupportFreeAuthorsAward
WELCOME ARTICLES IMPACKT NEWSLETTERS YOUR ACCOUNT ABOUT US

 
Article Network FAQ

Want to know more about Packt's Article Network? Interested in contributing your article ideas?

Please visit our FAQ for more information.


See More

SEARCH

Search our Site


User Access Control in Drupal 6

In this article by David Mercer, we will look at an entirely different aspect of running a Drupal website. Once we have added the functionality to the site, we now have to give some thoughts about how this functionality is to be accessed, or by whom. As the site grows, you will most likely feel the need to delegate certain responsibilities to various people. Alternatively, you might organize a team of people to work on specific aspects of the site. Whatever is required, at some stage you will have to make decisions about who can do what, and Drupal makes sure that it is possible to do precisely this.

Having Drupal simplify the implementation of your access control policies does not mean that the task is a trivial one. There is still much thought that needs to go on behind the scenes in order to create a sophisticated, and above all, effective policy for controlling access to the site. Because of this, we will spend a bit of time exploring the ramifications of the various choices available, instead of simply listing them. Taking a holistic approach to implementing an access control policy will ensure you don't end up with any nasty surprises down the line.

Specifically, this article will look at Planning an access policy, Roles, Users, and Access rules.


See More
 
Customizing the Default Theme in Drupal

You have a Drupal website and an online store; your product catalog is online and you have set up customer and staff users on the site; the only complaint so far is how the website looks. You like the default design, but do not think it is appropriate for your site or your store; you want something more tailored to your business.

In this article by Michael Peacock we will learn how to customize the default theme in Drupal.

Let's look at the default theme (garland) and customize it.

We can customize the following features:

  • Color scheme, either based on a color set, or by changing the individual colors
  • If certain elements, such as the logo, are displayed
  • The logo
  • The favicon

Back in the Themes section of the Administer area, there is a configure link next to each theme; if we click this we are taken to the theme's configuration page.

Although Doug ideally wants a new theme that is unique to his website, he also wants to have a look at a few different options for the default theme. In particular, he wants to add his company's logo to the website and try a number of red color schemes as those are his corporate colors.

Color Scheme

The color scheme settings are quite intuitive and easy to change. We can either:

  • Select a color set
  • Change each color by entering the hexadecimal color codes (the # followed by 6 characters)
  • Select the colors from the color wheel

To change a color using the color wheel, we need to click on the color type (base color, link color, etc.) to select it and then chose the general color from the wheel and the shade of the color from the square within.

When we change the colors or color set, the preview window below the settings automatically updates to reflect the color change.

The following color sets are available:

  • Blue Lagoon (the default set)
  • Ash
  • Aquamarine
  • Belgian Chocolate
  • Bluemarine
  • Citrus Blast
  • Cold Day
  • Greenbeam
  • Meditarrano
  • Mercury
  • Nocturnal
  • Olivia
  • Pink Plastic
  • Shiny Tomato
  • Teal Top
  • Custom

Quite a number of these are red-based color schemes, let's look into them, they are:

  • Belgian Chocolate
  • Meditarrano
  • Shiny Tomato

Belgian Chocolate Color Set

The Belgian Chocolate color set uses a dark red header with a gradient starting with black flowing into a dark red color. The page's background is a cream color and the main content area has a white background as illustrated by the picture below:

Mediterrano Color Set

The Mediterrano color set uses a lighter red color where the gradient in the header starts with a light orange color which then flows into a light red color. Similar to the Belgian Chocolate color scheme the background is cream in color with a white background for the content area.

Shiny Tomato Color Set

The Shiny Tomato color set has a gradient header that starts with deep red and flows into a bright red color. The page's background is light grey with white background for the main content area, reflecting a professional image.

The Shiny Tomato color set uses a red scheme which is in Doug's logo and he feels this set is the most professional of the three and wants us to use that.


This article has been extracted from: Selling Online with Drupal e-Commerce

Selling Online with Drupal e-CommerceWalk through the creation of an online store with Drupal's e-Commerce module
  • Set up a basic Drupal system and plan your shop
  • Set up your shop, and take payments
  • Optimize your site for selling and better reporting
  • Manage and market your site

For more information, please visit:
www.PacktPub.com/drupal-ecommerce/book

Toggle Display

With the toggle display options, we can select the elements we wish to display on our site, these include:

  • Logo
  • Site name
  • Site slogan
  • Mission statement
  • User pictures in posts
  • User pictures in comments
  • Search box
  • Shortcut icon

By default Site Slogan, User pictures in posts, User pictures in comments, and Search box are disabled, the rest are already enabled. Unfortunately with this theme we can only enable the Site Slogan; the other three options cannot be enabled with our choice of theme.

Doug initially wanted the slogan to be enabled; however, because of the length of his slogan, users with a small screen would not see the website name or the slogan:

The slogan and site name will only be displayed if we have a larger screen as illustrated below:

Because of this problem, Doug decided it was not worth leaving the option enabled!

Logo Image Settings

As Doug also wants his logo to go into the website, we need to uncheck the option for using the default logo and select the logo file to upload.

Once the logo has been uploaded, the website's header immediately updates to include the logo we have just uploaded, as shown below:

Shortcut Icon Settings

The final option for customizing the sites theme is the Shortcut icon settings. The shortcut icon is the favicon displayed in the address bar of our browser next to the web address. By default, this is a small version of the Drupal logo.

Let's customize this to a small version of Doug's logo. Graphics editing programs have little provisions for creating icon files, so let's use a web-based tool to turn the logo into a favicon. We can use http://www.htmlkit.com/services/favicon/, which is a popular online favicon generator.

On this website we can upload our logo:

Once the image has been uploaded, a preview of the icon is displayed on the site and we can download a copy of it.

Now that we have our favicon generated and downloaded, we can upload it to our website:

Once this is uploaded our favicon updates automatically, as shown below:

The Customized Skin

These changes leave us with a skin that looks like this:

Doug is really pleased with these changes, and thinks it is a massive improvement on the default theme.

Summary

We have just seen how to customize the default theme in Drupal. It's just one of the many ways in which we can manipulate themes in Drupal.


This article has been extracted from: Selling Online with Drupal e-Commerce

Selling Online with Drupal e-CommerceWalk through the creation of an online store with Drupal's e-Commerce module
  • Set up a basic Drupal system and plan your shop
  • Set up your shop, and take payments
  • Optimize your site for selling and better reporting
  • Manage and market your site

For more information, please visit:
www.PacktPub.com/drupal-ecommerce/book



About the Author

Michael Peacock is a web developer and senior partner of Peacock, Carter & Associates (http://www.peacockcarter.co.uk) a web design and development business. Michael loves building websites and web applications, and when he isn’t, likes to read, watch films and occasionally take part in amateur dramatics.




Books from Packt

Mastering phpMyAdmin 2.11 for Effective MySQL Management
Mastering phpMyAdmin 2.11 for Effective MySQL Management

Building Powerful and Robust Websites with Drupal 6
Building Powerful and Robust Websites with Drupal 6

Learning Drupal 6 Module Development
Learning Drupal 6 Module Development

Building Websites with Joomla! 1.5
Building Websites with Joomla! 1.5

WordPress Complete
WordPress Complete

OpenCms 7 Development
OpenCms 7 Development

WordPress Theme Design
WordPress Theme Design

Drupal 5 Themes
Drupal 5 Themes




 
Article Network


Packt Article Network

Visit Packt's Article Network, for all the latest quality, relevant and free content.
See More



NEWSLETTER

Sign up for updates, offers, free downloads and you could win an iPod Shuffle.
Subscription center

Installing Drupal Themes

You can find both design ideas and complete themes on the Web. You need to decide whether you want to work with an existing theme, or convert a design into a theme, or whether you want to start from scratch, unburdened by any preliminary constraints or alien code.

This article by Ric Shreves assumes you have a working Drupal installation, and that you have access to the files on your server and deals with finding, installing, and then uninstalling an existing and current Drupal theme.


See More
 




© Packt Publishing Ltd 2008

RSS