Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.
- Double-click the body tag in the list of tags under the style.css (all) style to open the CSS Rule Definition dialog for this style. With the Type category selected, experiment by choosing a new color for the body tag (see Figure 6). This action changes the color of any text that doesn't have color assigned through an overriding style. Click OK to see the result on your page.
- Double-click the body tag again in the set of tags in the style.css style to reopen the CSS Rule Definition dialog. Iin the Background category, select a new Background-color and click OK to apply it to the site. Then experiment with other attributes of the body tag.
- Go back to the CSS Styles panel and double-click the a:link style in the style.css set of styles. In the Rule Definition dialog, choose a new color for unvisited links in the Color palette. Click OK to apply the change.
- Now we'll try changing a class style, using a quicker method to edit styles. Click the .form-item label class style. In the Properties section of the CSS Styles panel (the bottom half of the panel), choose a different color, as shown in Figure 7. Notice that the change appears immediately on your page.
- As a last example, let's reformat one of the ID styles that our Drupal theme uses to define containers that display page content. Click the #sidebar-left, #sidebar-right style in the style.css list in the CSS Styles panel. In the Properties section of the CSS Styles panel, choose a different background color from the background-color swatch to change the background colors of the left and right sidebars (see Figure 8).
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.