ComponentOne SuperPanel for ASP.NET AJAX: SuperPanel for ASP.NET AJAX Task-Based Help > Customizing C1SuperPanel's Appearance > Adding Custom Visual Styles

Adding Custom Visual Styles

You can use the VisualStyle, VisualStylePath, and UseEmbeddedVisualStyles properties to create a custom visual style for your C1SuperPanel.

For more information on custom visual styles, see Custom Visual Styles.

To create a custom visual style for the C1SuperPanel control based on the Arctic visual style, complete the following:

1.   Copy the theme folder C:\Program Files\ComponentOne\Studio for ASP.NET\C1WebUI\VisualStyles\ArcticFox\C1SuperPanel to a new folder in your Visual Studio project. ~/VisualStyles/ArcticFoxNew/C1SuperPanel.

 

2.   Open the styles.css file inside the new folder, rename all the class names to make sure they end with the new visual style name "ArcticFoxNew". Replace all instances of _ArcticFox with _ArcticFoxNew.

Suppose the original class name is .C1SuperPanel_ArcticFox, then rename it to .C1SuperPanel_ArcticFoxNew.

3.   In the styles.css file find the ".C1spnl-ArcticFoxNew" and replace it with the lower-case embedded visual style name, ".C1spnl-arcticfoxnew".

4.   In the styles.css file find the ".spnl-ArcticFoxNew" and replace it with the lower-case embedded visual style name, ".spnl-arcticfoxnew".

5.   Save and close the modified .css file.

6.   Select the Refresh button in your project’s solution explorer to add the new styles.css file to your project.

7.   Add the C1SuperPanel control to your page.

8.   Select the C1SuperPanel control on your page and navigate to its properties window and set the VisualStylePath property to ~/VisualStyles.

9.   Set the UseEmbeddedVisualStyles property to False.

10.  Set the VisualStyle property to the new external custom theme, ArcticFoxNew (external).

 

 

11.  Now you can open the new styles.css file and edit the corresponding CSS classes. In this example, we modify the border color and border width for the SuperPanel control. Locate the .C1SuperPanel_ArcticFoxNew selector and modify the border color to "#666699" and border width to "10px".

.C1SuperPanel_ArcticFoxNew

{

    background: #fafafa url('Images/resizer.png') no-repeat right bottom;

    display:inline-block;

    -moz-outline:0 none;

    outline:0;

    border: solid 10px #666699;

}

12.  Rebuild your project and observe the new visual style changes to C1SuperPanel.

 This task illustrates the following:

The following image shows how the C1SuperPanel control appears after you run the program:

 


Send comments about this topic to ComponentOne.
Copyright © 1987-2010 ComponentOne LLC. All rights reserved.