ComponentOne Slider for ASP.NET AJAX: Slider for ASP.NET AJAX Appearance > Custom Visual Styles

Custom Visual Styles

If you choose to completely customize the appearance of the C1Slider you may not wish to use any of the available built-in Visual Styles. In that case, you can create your own visual style using CSS. To create your own visual style, you will need to do three things: add a custom style sheet to your project, set the UseEmbeddedVisualStyles property to False, and set the VisualStylePath and VisualStyle properties. For an example of creating a custom visual style, see Customizing the Slider's Appearance.

Step 1: Add a Custom Style Sheet

In order to create your own custom style, you must add a style sheet to your project. The VisualStylePath property determines the location of your visual style. The default directory and file name that the VisualStylePath property looks in for custom visual styles is: ~/VisualStyles/StyleName/C1Slider/styles.css (replacing "StyleName" with the name of each style).

Step 2: Set theUseEmbeddedVisualStyles Property

The UseEmbeddedVisualStyles property allows you to override built-in visual styles with your own custom appearance. By default C1Slider.UseEmbeddedVisualStyles property is True and Visual Styles are used. Any customizations you make while using Visual Styles will simply set specific elements in the control's appearance on top of the current Visual Style. To start customizing the control's appearance from scratch set C1Slider.UseEmbeddedVisualStyles to False and set your own styles.

Step 3: Set the VisualStylePath and VisualStyle Properties

Once you have created a custom visual style and set the UseEmbeddedVisualStyles to False you must assign the C1Slider control's the VisualStylePath and VisualStyle properties to the visual style directory and the visual style name that you are using. For example, if you add your style sheet to the following location ~/VisualStyles/StyleName/C1Slider/styles.css the VisualStylePath should be set to ~/VisualStyles and the VisualStyle property should be set to StyleName (assuming that StyleName is the name used to define the style in the styles.css file.


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