This topic illustrates how to apply a border style to the first panel of a C1Splitter control using CSS styles. To accomplish this task, you'll create a CSS style sheet, add a class specifying the background image, and then call that class by setting CSSClass property.
Complete the following steps:
1. Add a C1Splitter control to your Web project.
2. Add an image to your project by completing the following steps:
a. Right-click on the project and select Add Existing Item.
The Add Existing Item dialog box appears.
b. Navigate to the folder where your image is located and select your image.
c. Press Add to add the image to the project.
3. In Solution Explorer, right-click on the project name and select Add New Item.
The Add New Item dialog box appears.
4. In the Add New Item dialog box, complete the following tasks:
a. From the Templates pane, select Style Sheet.
b. Enter "BackgroundStyles.css" into the Name field.
c. Press Add to close the Add New Item dialog box.
BackgroundStyles.css is added to your project.
5. In Solution Explorer, double-click BorderStyle.css to open the file in Visual Studio. The CSS body style appears by default:
body {
}
6. Place the following CSS code after the right bracket of the body style, replacing YourImage.gif with the name of the image you added in step 2:
.BackgroundStyles
{
background-image:url(YourImage.gif);
}
7. Return to the Design view of your .aspx page and complete the following tasks:
a. Right-click the C1Splitter control to open its context menu and select Properties.
C1Splitter's properties take focus in the Properties window.
b. Expand Panel1's node and set the CSSClass property to "BackgroundStyles".
8. 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:
<link href="BackgroundStyles.css" type="text/css" rel="stylesheet"/>
9. Click the Design tab to return to Design view. Observe that your background image has been added to Panel1.
This Topic Illustrates
the Following:
The following image depicts Panel1 of a C1Splitter control with a rainbow background image:
|
