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).
-
The CSS panel displays the existing styles (see Figure 21). If you cannot see the CSS panel, select Window > CSS 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).
-
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).
-
Select the color by clicking the button displayed in the value field. Pick an orange shade from the color picker (see Figure 24).
-
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).
-
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). -
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).
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).
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).
In the next section, you will learn how to display messages in a particular topic.
Comments