CssClass Property

The CssClass property gets or sets the cascading style sheet (CSS) class rendered by the Web server control on the client.

A Style Sheet exists in the Templates for Visual Studio 2005. A style sheet is added to an application by performing the following steps:

1. Right-click on the project node in the solution explorer and select Add New Item from its context menu. The Add New Item dialog box appears.

2. Select the Style Sheet from the Add New Item dialog box. Click on the Add button.

3. Open the web form and switch to Source view. The following line of code must be entered in order for the StyleSheet.css file to connect to the web form. The code generally appears right after the <head> tag in the HTML page.

4. Open the SyleSheet.css file and enter the following :

.TopicBar

{

border: solid 10px #f0f0f0;

width: 200px;

background-color: #C8B99D;

}

5. Open the code editor for the .aspx file and assign the CssClass property to the GroupStyle object of the C1WebTopicBar control.

· Visual Basic

topicbar.GroupStyle.CssClass = "TopicBar"

· C#

topicbar.GroupStyle.CssClass = "TopicBar";

· Delphi

topicbar.GroupStyle.CssClass := 'TopicBar';

6. Run the web application.

The new border, width, and background color styles are applied to the groups of the C1WebTopicBar.

Note, that if you have property styles other than the CssClass properties, the property styles in the web form's page overrides the CssClass properties.

ItemStyle.CssClass property

To apply the same .TopicBar css style to the ItemStyle object of the C1WebTopicBar control, use the code below:

· Visual Basic

topicbar.ItemStyle.CssClass = "TopicBar"

· C#

topicbar.ItemStyle.CssClass = "TopicBar";

· Delphi

topicbar.ItemStyle.CssClass := 'TopicBar';

This example shows how to apply the same .TopicBar css style to the second item of the first group.

Note: The code below is applicable for the flat controls: C1WebTopicBar, C1WebToolBar, and the C1WebTabStrip. The mechanism for specifying a specific item index is different for the tree type controls: C1WebTreeView and C1WebMenu. Please see the Tree View Control Type in the ItemStyle Class topic section, for a generic example how to set a specific item for the C1WebMenu and the C1WebTreeView.

· Visual Basic

CType(topicbar.Groups(0).Items(1), C1WebLinkItem) ItemStyle.CssClass = "TopicBar"

· C#

((C1WebLinkItem)topicbar.Groups[0].Items[1].ItemStyle.CssClass = "TopicBar";

· Delphi

((C1WebLinkItem)topicbar.Groups[0].Items[1].ItemStyle.CssClass := 'TopicBar';