RadFormDecorator for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX

CSS Classes Description

The table below shows the classes used by the embedded Telerik RadFormDecorator skin (the non-embedded skins css classes signature conforms to the same concepts):

Skin Specific CSS

 

CSS Class

Description

.RadForm_SkinName.rfdZone

CSS class for styling the decoration zone or the <html /> tag of the page

.RadForm_SkinName.rfdScrollBars

Decorates the scrollbars

.RadForm_SkinName.rfdButton a.rfdSkinnedButton,
.RadForm_SkinName.rfdButton input[type="button"].rfdDecorated,
.RadForm_SkinName.rfdButton input[type="reset"].rfdDecorated,
.RadForm_SkinName.rfdButton input[type="submit"].rfdDecorated,
.RadForm_SkinName.rfdButton .rfdSkinnedButton button

Decorates Input elements of the followyng type: <input type="button | submit | reset" /> and <button type="button | submit | reset" /> - look if there is a secondary .rfdButton class applied to the root element

.RadForm_SkinName.rfdHeading h4,
.RadForm_SkinName.rfdHeading h5,
.RadForm_SkinName.rfdHeading h6

Decorates Headings Elements - <h4>Heading 4</h4>, <h5>Heading 5</h5>, <h6>Heading 6</h6>

.RadForm_SkinName.rfdLabel label

Decorates Labels: <label>Label Name</label>

.RadForm_SkinName .rfdCheckboxUnchecked,
.RadForm_SkinName .rfdInputDisabled.rfdCheckboxUnchecked:hover

Decorates Input elements of Checkbox type for normal and hover states: <input type="checkbox" />

.RadForm_SkinName .rfdRadioUnchecked,
.RadForm_SkinName .rfdInputDisabled.rfdRadioUnchecked:hover

Decorate Input elements of Radio type for normal and hover states: <input type="radio" />

.rfdRoundedInner,
.rfdRoundedOuter,
table.rfdRoundedWrapper,
table.rfdRoundedWrapper_fieldset,
table.rfdRoundedWrapper td,
table.rfdRoundedWrapper_fieldset>tbody>tr>td,
table.rfdRoundedWrapper td, table.rfdRoundedWrapper_fieldset td,
.RadForm_SkinName.rfdFieldset table.rfdRoundedWrapper_fieldset legend,
.RadForm_SkinName fieldset.rfdFieldset legend,
.RadForm_SkinName table.rfdRoundedWrapper:hover
div.rfdRoundedInner

Decorates Fieldset and Legend Elements general layout styles. Decorate normal and hover states: <fieldset><!—fieldset content--> </fieldset>; <legend>Legend Title</legend>

.RadForm_SkinName table.rfdRoundedWrapper:hover .rfdRoundedOuter

This selector decorates the hover of the side bars of the rounded elements

.RadForm_SkinName.rfdTextbox input[type="text"],
.RadForm_SkinName.rfdTextbox input[type="password"],
.RadForm_SkinName.rfdTextarea textarea,
.RadForm_SkinName.rfdTextarea textarea[disabled]:hover,
.RadForm_SkinName.rfdTextbox input[disabled][type="text"]:hover,
.RadForm_SkinName.rfdTextbox input[disabled][type="password"]:hover,
.RadForm_SkinName.rfdTextbox .rfdDecorated:hover,
.RadForm_SkinName.rfdTextbox .rfdDecorated:hover,
.RadForm_SkinName.rfdTextarea textarea:hover

Decorates normal and hover states foe the following input element: <input type="text | password" /> and <textarea />.

For all browsers except IE6 we are using attribute selectors - single or double.

.RadForm_SkinName.rfdFieldset table.rfdRoundedWrapper_fieldset legend,
.RadForm_SkinName.rfdFieldset fieldset.rfdFieldset legend,
.RadForm_SkinName.rfdFieldset table.rfdRoundedWrapper_fieldset fieldset,
.RadForm_SkinName.rfdFieldset fieldset.rfdFieldset

Nb: having a background image on a fieldset is not okay with IE

Decorates Fieldset and Legend Elements styles: <fieldset><!—fieldset content--> </fieldset>; <legend>Legend Title</legend>

.RadForm_SkinName table.rfdRoundedWrapper input,
.RadForm_SkinName table.rfdRoundedWrapper textarea,
.RadForm_SkinName input.rfdInput,
.RadForm_SkinName textarea.rfdTextarea,
{ border: solid 1px #yourColor;
background: #yourColor;
color: #yourColor;
}

.RadForm_SkinName textarea.rfdTextarea,
.RadForm_SkinName table.rfdRoundedWrapper textarea
{
overflow: auto;
}

Decorates the same as the above:

Because of a glitch in IE the following 2 CSS classes must be declared separately for correct parsing of the textarea class in IE6

.rfdSelect_SkinName,
.rfdSelect_SkinName:hover,
.rfdSelect_SkinName .rfdSelectOuter,
.rfdSelect_SkinName:hover .rfdSelectOuter,
.rfdSelect_SkinName .rfdSelectArrow span,
.rfdSelectBox_SkinName .rfdSelect_selected,
.rfdSelectBox_SkinName li:hover,
.rfdSelect_SkinName.rfdSelectDisabled:hover,
.rfdRtl .rfdSelect_SkinName,
.rfdRtl .rfdSelect_SkinName:hover,
.rfdRtl .rfdSelect_SkinName .rfdSelectOuter,
.rfdRtl .rfdSelect_SkinName .rfdSelectOuter:hover
{ }

.rfdSelect_SkinName .rfdSelectOuter,
.rfdSelect_SkinName.rfdSelectDisabled:hover .rfdSelectOuter
{ }

Decorate Select element states.

.rfdSelectBox_SkinName
{ }

.rfdSelectBox_SkinName li
{ }

.rfdSelectBox_SkinName .rfdSelect_selected,
.rfdSelectBox_SkinName li:hover
{ }

.rfdSelectBox_SkinName
.rfdSelectBox_optgroup_label:hover
{ }

Decorate dropdown settings which replace the HTML Select element during the RadFormDecorator skinning.

* html .rfdSkinnedButton.rfdInputDisabled
{ }

* html .RadForm_SkinName.rfdButton
a.rfdInputDisabled:hover
{ }

* html .RadForm_SkinName.rfdButton a.rfdInputDisabled:hover
*
{ }

.RadForm_SkinName.rfdTextbox input.rfdIE6TextBox,
.RadForm_SkinName.rfdTextbox textarea.rfdIE6TextBox
{ }

IE6 disabled state fix - this should not be added to the base stylesheet, but at the bottom of the skin file

@media screen and (-webkit-min-device-pixel-ratio: 0)
{ /* all between brackets marked in red will be renders only
from Safari and Chrome */

/* checkboxes */
.rfdCheckbox input[type="checkbox"],
.rfdCheckbox
input[type="checkbox"][disabled]:hover
{
background-image: url(''); } /* radio buttons */
.rfdRadio input[type="radio"],
.rfdRadio input[type="radio"][disabled="disabled"]:hover
{ background-image: url(''); } }

The styling of radiobuttons and checkboxes in Safari and Chrome is already fully achieved with CSS.

Skin-specific Scrollbar Settings for WebKit Browsers (Safari, Chrome,Midori, Shiira, Epiphany)

 

CSS Class

Description

.RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-thumb:vertical,
.RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-thumb:horizontal,
.RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-thumb:vertical,
.RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-thumb:horizontal

Decorates scrollbar face color.

.RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-track-piece,
.RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-track-piece

Decorates scrollbar track background color.

.RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-button:vertical:decrement,
.RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-button:vertical:increment,
.RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-button:horizontal:decrement,
.RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-button:horizontal:increment,
.RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-thumb:vertical,
.RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-thumb:horizontal,
.RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-button:vertical:decrement,
.RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-button:vertical:increment,
.RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-button:horizontal:decrement,
.RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-button:horizontal:increment,
.RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-thumb:vertical,
.RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-thumb:horizontal

Decorates scrollbar track border color.

.RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-button:vertical:decrement,
.RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-button:vertical:increment,
.RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-button:horizontal:decrement,
.RadForm.rfdScrollBars.RadForm_SkinName textarea::-webkit-scrollbar-button:horizontal:increment,
.RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-button:vertical:decrement,
.RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-button:vertical:increment,
.RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-button:horizontal:decrement,
.RadForm.rfdScrollBars.RadForm_SkinName div::-webkit-scrollbar-button:horizontal:increment

Decorates increment / decrement button settings.

GridView, FormView, DetailsView

 

CSS Class

Description

.RadForm_SkinName.rfdGrids .rfdTable

Decorates Grid Table: <table>…content…</table>

.RadForm_SkinName.rfdGrids .rfdTable th

Decorates Grid Table heading cell: <th>table heading</th>

.RadForm_SkinName.rfdGrids .rfdTable td

Decorates Grid Table data cell: <td>table data</td>

.RadForm_SkinName.rfdGrids .rfdTable a

Decorates Grid Table anchor: <a>link text</a>

Common CSS

 

CSS Class

Description

.rfdRealInput

Input position

.rfdButton a.rfdSkinnedButton

Decorates the skinned button

.rfdButton a.rfdSkinnedButton:focus

Decorates the focused button

.rfdButton a.rfdInputDisabled.rfdSkinnedButton:hover

Decorates the hovered button

.RadForm.rfdTextbox .rfdSkinnedButton input, .RadForm.rfdTextbox .rfdSkinnedButton button, .RadForm.rfdTextbox .RadComboBox input, .RadForm.rfdTextbox .RadComboBox input[type="text"]

Decorates Buttons

.RadForm.rfdTextbox input[type="button"].rfdDecorated, .RadForm.rfdTextbox input[type="reset"].rfdDecorated, .RadForm.rfdTextbox input[type="submit"].rfdDecorated

Decorates decorated Buttons

.rfdCheckboxChecked, .rfdCheckboxUnchecked, .rfdRadioUnchecked, .rfdRadioChecked

Decorates radio buttons and check boxes

.rfdSkinnedButton.rfdInputDisabled, .rfdTextarea textarea[disabled], .rfdTextbox input[type="text"][disabled], .rfdTextbox input[type="password"][disabled]

Decorates disabled FormDeocrator elements

.rfdSelectBox, .rfdSelectBox.rfdSelectDisabled:hover, .rfdSelectBox ul, .rfdSelectBox li, .rfdSelectBox li .rfdSelectBox_optgroup li, .rfdSelectBox_optgroup, .rfdSelectBox_optgroup_label, .rfdSelectBox.rfdSelectDisabled li:hover, .rfdSelectBox .rfdSelectBox_optgroup li, .rfdSelectBox li.rfdSelectBox_optgroup_label

Dropdown settings select box

.rfdValidationSummaryControl, .rfdLoginControl

Validation Summary control and Login control decorated by RadFormDecorator

.rfdValidationSummaryControl ul

Styles unordered list nested in Validation summary field[!]

.RadForm_SkinName .rfdValidationSummaryControl, .RadForm_SkinName.rfdLoginControl

Validation Summary control and Login control skin specific

.RadForm_SkinName a.rfdLoginControl, .RadForm_SkinName a.rfdLoginControl:active, .RadForm_SkinName a.rfdLoginControl:visited, .RadForm_SkinName a.rfdLoginControl:hover

Login control skin specific anchor styles