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:
-
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
-
The CSS panel displays the existing styles (see Figure 21). If you cannot see the CSS panel, select Window > CSS Styles.
Figure 21. CSS panel displaying the existing styles
Notice that the
a:link
anda:visited
styles are already defined for you, but they have no properties. To define a new property, click the Add Property link. -
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).
Figure 22. Selecting the settings that remove the default underlining
-
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).
Figure 23. Selecting the Color option
-
Select the color by clicking the button displayed in the value field. Pick an orange shade from the color picker (see Figure 24).
Figure 24. Selecting an orange shade
-
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).
Figure 25. Defining a new CSS rule for a mouse-over effect
-
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).Figure 26. Choosing the
a:hover
selector for the new CSS rule -
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).
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).
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).
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