Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Building a Forum with Dreamweaver – Part 1: Styling Your Forum with CSS

Styling Your Forum with CSS

In this section you will use the unified CSS panel in Dreamweaver 8 to style the links in your forum.

Here you will make the forum links orange and then apply a mouseover effect, so that they become underlined when users hover their mouse cursors over them:

  1. With the index.php page open in Dreamweaver, select the dynamic text that displays the topic title. Then, in the tag selector, click the tag (see Figure 20).

    Figure 20. Clicking the

    tag in the tag selector

  2. The CSS panel displays the existing styles (see Figure 21). If you cannot see the CSS panel, select Window > CSS Styles.

    CSS panel displaying the existing styles

    Figure 21. CSS panel displaying the existing styles

    Notice that the a:link and a:visited styles are already defined for you, but they have no properties. To define a new property, click the Add Property link.

  3. Select Text-Decoration from the first pop-up menu and None from the second one. This removes the default underlining of links (see Figure 22).

    Selecting the settings that remove the default underlining

    Figure 22. Selecting the settings that remove the default underlining

  4. Now make the links orange. Click the Add Property text to define a new rule. From the properties pop-up menu, select the Color option (see Figure 23).

    Selecting the Color option

    Figure 23. Selecting the Color option

  5. Select the color by clicking the button displayed in the value field. Pick an orange shade from the color picker (see Figure 24).

    Selecting an orange shade

    Figure 24. Selecting an orange shade

  6. Add a mouse-over effect for links. To do that, you need to define a new CSS rule by clicking the corresponding button from the CSS panel (see Figure 25).

    Defining a new CSS rule for a mouse-over effect

    Figure 25. Defining a new CSS rule for a mouse-over effect

  7. In the displayed dialog box, select the Advanced option button and then choose the a:hover selector and make sure you define it in the forum.css style sheet (see Figure 26).

    Choosing the a:hover selector for the new CSS rule

    Figure 26. Choosing the a:hover selector for the new CSS rule

  8. Click OK to create the rule. A new dialog box is displayed, where you can define the CSS properties for the new rule. The only property you need, for now, is to make the text underlined. Click the Underline option in the Decoration section and then click OK (see Figure 27).

    Configuring the a:hover CSS rule in the CSS Rule Definition dialog box

    Figure 27. Configuring the a:hover CSS rule in the CSS Rule Definition dialog box

Notice how easy it is to edit the existing properties, add new properties, or define a new CSS rule from scratch in Dreamweaver 8—you can do it all from one panel. The topic title links have now changed their color (see Figure 28).

Topic title link with its new color

Figure 28. Topic title link with its new color

Notice that the CSS file attached to the page is opened. Save the CSS file and the page and upload both of them to the server. Preview the forum home page in the browser to see the changes (see Figure 29).

Forum in a browser showing the topic title links in their new color

Figure 29. Forum in a browser showing the topic title links in their new color

In the next section, you will learn how to display messages in a particular topic.

Comments