Dreamweaver CS5.5 : Edit Tabbed Panels

Edit Tabbed Panels

Note: Insert a tabbed panel group and add content to it, as shown in the previous two sections, and then follow these steps.

Click Window.

Click CSS Styles.

• The CSS Styles panel opens.

Click + to open the style sheet that corresponds to the tabbed panels.

• The styles that control the appearance of the tabbed panels are opened and listed in the CSS Styles panel.

• You can click once on any style name to view and edit the definition in the CSS Styles panel's Properties pane.

• Click here and drag to expand the Properties pane.

Double-click the name of the style that you want to edit.

The selected style opens in the CSS Rule Definition dialog box.

Click a category.

Make your changes to the style.

Note: In this example, the background color is changed from a light gray color to a light blue color.

• You can click Apply to preview the changes.

Click OK.

The style change is reflected in the workspace.

Click the name of another style that you want to edit.

Edit the selected style in the Properties pane.

Note: In this example, the tab color is changed.

Can I use different colors for selected tabs?

Yes. The Spry panel tabs have separate styles for each of the three active link states: Tab, Tab Selected, and Tab Hover. You can specify different colors for each setting.

In this example, the Tab style is light blue, which will make links that are not actively selected light blue.

The Tab Selected style is an orange color. The tab for the selected section is displayed in the selector color.

Link styles can include different background colors, fonts, borders, and other variations to create attractive menu bars.

The Tab Hover style appears only when a user rolls the cursor over a tab.