This topic illustrates how to apply a border style to the entire C1Splitter control using CSS styles. At the completion of this topic, the C1Splitter control will be surrounded by a thick, dotted border that is fuchsia in color. To accomplish this task, you'll add a CSS style sheet to the project, create a CSS class specifying the border styles, and then call that class by setting the CSSClass property.
To add a border to the C1Splitter control, complete these steps:
Complete the following steps:
1. Add a C1Splitter control to your Web project.
2. In Solution Explorer, right-click on the project name and select Add New Item.
The Add New Item dialog box appears.
3. In the Add New Item dialog box, complete the following tasks:
a. From the Templates pane, select Style Sheet.
b. Enter "BorderStyle.css" into the Name field.
c. Press Add to close the Add New Item dialog box.
BorderStyle.css is added to your project.
4. In Solution Explorer, double-click BorderStyle.css to open the file in Visual Studio. The CSS body style appears by default:
5.
body {
}
6. Place the following CSS code after the right bracket of the body style:
.C1Splitter_Border
{
border-color:Fuchsia;
border-style:dotted;
border-width:thick;
}
7. Return to the Design view of your .aspx page.
8. Right-click the C1Splitter control to open its context menu and select Properties.
C1Splitter's properties take focus in the Properties window.
9. Locate C1Splitter's CSSClass property and enter "C1Splitter_Border" into its text box.
10. Now you will have to link the Web project to the BorderStyle.css style sheet by calling it in the project's Source code. To link the style sheet to the project, click the Source tab to switch to Source view and place the following line of code between the <head> tags:
11.
<link href="BorderStyle.css" type="text/css" rel="stylesheet"/>
12. Press F5 to run the program. Observe that Panel1 has adopted the border styles specified in the BorderStyle.css style sheet.
This Topic Illustrates
the Following:
By completing the steps in this topic, you have added a thick, fuchsia, dotted border to the C1Splitter control. The final product will resemble the following image:
|
