Editing Drupal Themes with the CSS Styles Panel
Now comes the fun part! We've connected a Drupal site with Dreamweaver and generated a working, viewable version of the Drupal home page in the Dreamweaver Design window. Now we can customize the selected Drupal theme.
Dreamweaver CS5 has some cool new features that make it easier to find and edit CSS styles. I'll invoke some of those features here as we walk through the process of identifying and editing styles from a Drupal page. Follow these steps to use the CSS panel in Dreamweaver to change your Drupal theme:
- Open your Drupal site's home page in Dreamweaver. Then choose Window > CSS Styles.
- The All tab of the CSS Styles panel lists several .css files. These files control every minute detail of the look and feel of the Drupal site. The essential formatting elements are stored in the style.css file. Scroll down the CSS Styles panel until the style.css file is visible. If the style is not expanded, click the right-pointing triangle to expand the set of styles in the style.css file.
- Examine the styles. You'll notice four types of styles:
- Tags. These styles indicate tags such as body, h1 (for Heading 1), h2 (for Heading 2), and p (for paragraph).
- Links. Link styles begin with a: and indicate one of three states:
- The link has not been visited.
- The link has been visited.
- A pointer has hovered over the link.
- Class. Class styles begin with a period (for example, .site-slogan) and can be applied to any content on a page, any number of times.
- ID. ID styles begin with a number sign (#) and can be used only once on a page. Typically the style defines the location and size of a content block.
We'll use one of each of these styles as examples, and then you'll be in a good place to go off on your own and touch up other elements of your site.
Figure 6 Changing the font color for type across a Drupal site.
Figure 7 Editing a class style assigned by Drupal.
Figure 8 Editing the sidebar styles.
How can you tell which class or ID tag corresponds to which element on the page? I've been unable to find online documentation listing what each style does for the hundreds of styles associated with the Drupal Bluemarine theme. Dreamweaver CS5 comes with new tools to help detect styles, but those features are disabled in Live view, which we're using to facilitate editing a Drupal site. For this tutorial, I took educated guesses and used trial-and-error to determine which style is associated with each element of the page. Generally, the style names are helpful clues.