styling createuserwizard

[Mark]

i have a form decorater styling my createuserwizard control in one of the default skins.

however id like to override some of these style elements making things a big bigger and adding padding.

where would i go to do this?

is there a style sheet imported into my project ?

[Bozhidar]

Hello,

To make things bigger you should do a lot of changes in the base stylesheet. Probably the first thing you should do is to define whcih parts of RadFormDecorator you want to make bigger. Buttons, RadioButtons, Checkboxes, Select DropDown?

This is a RadButton custom button height tutorial: http://www.telerik.com/help/aspnet-ajax/button-custom-height.html it does explains how to make RadButton with different height and includes a code example. Yes, this is for another controls, but it has exactly the same rendering and you could use the approach with just changing the CSS class names.

Here is a simple explanation how to make select drop down bigger and what you have to change - CSS/Sprites.

The styles that you are trying to change are placed in base RadFormDecorator css  - FormDecorator.css. The dropdown select is styled be the following:

/* skinned selectbox */
.rfdSelect
{
    display: inline-block;
    text-decoration: none;
    font-size: 12px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    cursor: default;
    outline: none;
    -moz-user-select: none;
    max-width: 1024px;
    background-position: 0 0;
    padding-left: 2px;
    zoom: 1;
    z-index: 3000;
    vertical-align: middle;
    margin-right: 5px;
}

*html .rfdSelect
{
    background-position: right -22px;
    padding-right: 19px;
    padding-left: 0;
    vertical-align: top;
    margin-right: 0;
}

*+html .rfdSelect
{
    vertical-align: top;
    margin-right: 0;
}

.rfdSelect:hover
{
    background-position: 0 -44px;
}

*html .rfdSelect:hover
{
    background-position: right -66px;
}

.rfdSelect .rfdSelectOuter,
.rfdSelect.rfdSelectDisabled:hover .rfdSelectOuter
{
    background-position: right -22px;
    display: block;
    line-height: 22px;
    height: 22px;
    white-space: nowrap;
    width: inherit;
    margin-left: 2px;
}

.rfdSelect.rfdSelectDisabled:hover
{
    background-position: 0 0;
}

*html .rfdSelect .rfdSelectOuter,
*html .rfdSelect.rfdSelectDisabled:hover .rfdSelectOuter
{
    background-position: 0 0;
    margin-right: 0;
    margin-left: 0;
    padding-left: 2px;
}

.rfdSelect .rfdSelectOuter,
.rfdSelect.rfdSelectDisabled:hover .rfdSelectOuter
{
    margin-right: -1px\9;
}

.rfdSelect:hover .rfdSelectOuter
{
    background-position: right -66px;
}

*html .rfdSelect:hover .rfdSelectOuter
{
    background-position: 0 -44px;
}

.rfdSelect .rfdSelectOuter span
{
    margin-right: 22px;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*NEW - TEKI - Support for SELECT dropdowns using the new rendering */
.rfdSelect .rfdSelectBox
{
    position: absolute;
    overflow-y: auto;
    float: left;
    width: inherit;
}

.rfdSelect li
{
    padding: 0 0 0 3px;
    line-height: 16px;
    height: 16px;
    background-image: none !important;
}

.rfdSelectDisabled
{
    opacity: .4; /* Gecko, Opera */
}

.rfdSelectDisabled .rfdSelectText
{
    filter: alpha(opacity=40); /* IE */
}


/* dropdown settings */
.rfdSelectBox
{
    font-size: 12px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    display: inline-block;
    overflow-x: hidden;
    z-index: 2900;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.rfdSelectBox.rfdSelectDisabled:hover
{
    background-position: 0 0;
}

.rfdSelectBox ul
{
    width: inherit;
}

.rfdSelectBox ul,
.rfdSelectBox li
{
    padding: 0;
    margin: 0;
    list-style: none;
}

.rfdSelectBox li
{
    cursor: default;
    padding-left:3px;/* In AJAX CSS-es are registered skin-specific first, base second, which creates problems*/
    line-height: 16px;
    height: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.rfdSelectBox_optgroup li
{
    padding-left: 20px !important;
    height: 18px !important;
    line-height: 18px !important;
}

.rfdSelectBox_optgroup .rfdSelectBox_optgroup_label
{
    font-style: italic;
    font-weight: bold;
    padding-left: 0 !important;
}

.rfdSelectBox_Default .rfdSelectBox_optgroup_label:hover
{
    background: none;
    color: #000;
}

.rfdSelectBox.rfdSelectDisabled li:hover
{
    background: none !important;
}

.rfdSelectBox .rfdSelectBox_optgroup li
{
    padding-left: 12px !important;
}

.rfdSelectBox li.rfdSelectBox_optgroup_label
{
    padding-left: 0 !important;
}

For your case you should change the background positions by making the selectors heavier using !important or adding an additional element in the CSS cascade. The Default height of the combo is 22px and in the sprite you have 8 rows - dropdown background normal state, dropdown arrow normal state, dropdown background hover state, dropdown arrow hover state, dropdown background normal state left to right, dropdown arrow normal state left to right, dropdown background hover state left to right, dropdown arrow hover state left to right - all these elements has a height of 22px and the background positions are set respectively to this height and the positions of the elements in the sprite. If you want your custom background to have a height of 30px, you should change firstly your sprite and make all elements with 30px height and then to change the background positions according to the new positions in the custom sprite.

For example, the default position for select background hover state is:

.rfdSelect:hover
{
    background-position: 0 -44px;
}

This is because the position of the element is 44px from the top of the sprite - we have the normal state on position 0 0 and normal state arrow on position 0 -22px, so it is oblivious that the next position will be 22px down - 0 -44px. If we assume that the new custom height is 30px, we will have the normal background again at position 0 0, the normal dropdown arrow at 0 -30px and the select background hover position at 0 -60px.

Using FireBug with FireFox will make easier for you to find the correct positions for the background images and the correct element that you need to apply padding, margin etc.

Note that Telerik does not support custom solutions, and even if we try to give you the right direction of how to do something it is a developer`s responsibility to make the controls work properly after the customization.

In Addition I could say that such an override is a complex work and requiters a deep CSS knowledge and testing to be sure that the control will work properly.

Regards,
Bozhidar
the Telerik team