All skins of Telerik RadToolBar reside in the ~\Rad Controls\ToolBar\Skins folder. Each skin has its elements placed in a separate folder named after the skin. A skin contains a set of images and a content style sheet (a css file). All images are summoned up in an img subfolder under the main folder of the skin.
The naming convention of the content style sheet classes is the following:
.[name_of_the_skin]_[name_of_the_element]_[status]
For some elements it is possible to have additional information in the naming. For example the radbutton element can have specification in the name of the CSS class which appoints whether it is for image only button, or contains text:
Exemplary CSS definitions
The CSS classes listed in the table specify a predefined skin named Office2003. The toolbar with the applied Office2003 skin looks and feels like this:
|
Exemplary CSS definitions |
Description |
|
.office2003_radbutton_normal
.office2003_radbutton_hover
.office2003_radbutton_disabled
.office2003_radbutton_mousedown |
The css classes that define the look-and-feel of the normal button in its different statuses. |
|
.office2003_radtbutton_normal
.office2003_radtbutton_hover
.office2003_radtbutton_toggled,
.office2003_radtbutton_hover_toggled
.office2003_radtbutton_disabled
.office2003_radtbutton_mousedown |
The css classes that define the look-and-feel of the toggle button in its different statuses. |
|
.office2003_radtoolbar_horizontal |
The css class that defines the look-and-feel of the toolbar when oriented horizontally. |
|
.office2003_radtoolbar_vertical |
The css class that defines the look-and-feel of the toolbar when oriented vertically. |
|
/* left */
.office2003_radtoolbar_left
/* right */
.office2003_radtoolbar_right
|
The css classes that define the look-and-feel of the grips of the toolbar when oriented horizontally. |
|
/* top */
.office2003_radtoolbar_top
/* bottom */
.office2003_radtoolbar_bot |
The css classes that define the look-and-feel of the grips of the toolbar when oriented vertically. |
|
/* horizontal */
.office2003_radseparator_h
/* vertical */
.office2003_radseparator_v |
The css classes that define the look-and-feel of the horizontal and the vertical separators of the toolbar. |
|
.office2003_radbutton_normal IMG, .office2003_radbutton_normal SPAN, .office2003_radbutton_hover SPAN
.office2003_radbutton_hover IMG, .office2003_radtbutton_hover IMG
.office2003_radtbutton_mousedown IMG, .office2003_radtbutton_mousedown SPAN, .office2003_radtbutton_toggled IMG, .office2003_radtbutton_hover_toggled IMG
.office2003_radtbutton_normal IMG, .office2003_radtbutton_normal SPAN, .office2003_radtbutton_hover SPAN
.office2003_radbutton_mousedown IMG, .office2003_radbutton_mousedown SPAN
.office2003_radbutton_disabled IMG
|
The css classes that define the margins fix for the elements of the toolbar. |
|
/* normal */
.office2003_radbutton_text_normal, .office2003_radtbutton_text_normal
/* hover */
.office2003_radbutton_text_hover, .office2003_radtbutton_text_hover
/* mousedown */
.office2003_radbutton_text_mousedown, .office2003_radtbutton_text_mousedown, .office2003_radtbutton_text_toggled, .office2003_radtbutton_text_hover_toggled
/* button text */
.office2003_radbutton_text_normal SPAN, .office2003_radbutton_text_hover SPAN, .office2003_radbutton_text_mousedown SPAN
.office2003_radbutton_text_normal IMG, .office2003_radbutton_text_toggle IMG, .office2003_radbutton_text_hover IMG, .office2003_radbutton_text_mousedown IMG |
The css classes that define the look-and-feel of the buttons which contain text with/without images. |