HTM5-CSS3 customization

[Martin Roussel]

Hi, Im searching the documentation for a tutorial on how to customize the style and appearance of the RadComboBox (when using RenderMode="Lightweight"). Im especially looking for CSS3 examples for rounding the controls corners and changing colors/gradients. 

TIA

Martin

[Ivan Zhekov]

Hello, Martin.

Currently, we do not have such a resource, but I can explain in a nut shell about the selectors and what is what:

.RadComboBox || .RadComboBox_skinName -- that the main selector of the control. We usually use it to set the base font of the control;

.rcbInner -- that's the inner container of the combo part. We use it to set the background color, background image, border color, border radius...

    .rcbHovered .rcbFocused .rcbDisabled -- additional class names for the interactive state

.rcbInput -- that the input that holds the actual text typed. If you are targeting CSS3, you should leave this untouched, as it should inherit styles from the .rcbInner (inheriting styles work in all browsers except IE6-7)

    .rcbEmptyMessage -- additional class name when there is empty message applied

.rcbActionButton -- the toggle popup button.

That's in a very small nutshell. If you have specific question e.g. how to make more rounded corners, or how to change gradients, I will provide you with answers.

We'll also add documentation about such scenarios in our help portal.

Greetings,
Ivan Zhekov
the Telerik team

[Martin Roussel]

Thanks Ivan,

yes indeed I would like more details regarding gradient and rounded corners please.

TIA

Martin

[Ivan Zhekov]

Hi, Martin.

Examine the snippet bellow (taken from the Default skin):

/** Default skin */



/**
 * Control wrapper
 *
 * Contains generic styles, like the font used
 */
.RadComboBox_Default {
    color: #333333;
    font: normal 12px "Segoe UI", Arial, Helvetica, sans-serif;
    line-height: 16px;
}


    /**
     * Inner container
     *
     * Border color, backgorund color, border-radius etc...
     */
    .RadComboBox_Default .rcbInner {
        border-color: #8e8e8e;
        color: #333333;
        background-color: white;
        /** Note the border radius here. Set it to as much as you want */
        border-radius: 3px;
    }


    /**
     * Input
     *
     * Styles for the input
     */
    .RadComboBox_Default .rcbInput {
        color: #333333;
        font: normal 12px "Segoe UI", Arial, Helvetica, sans-serif;
        line-height: 16px;
    }

        /** The input in empty message styles */
        .RadComboBox_Default .rcbEmptyMessage {
            color: #a5a5a5;
            font-style: italic;
        }


    /**
     * Action button
     *
     * Styles for the toggle butotn.
     */
    .RadComboBox_Default .rcbActionButton {
        background-image: -webkit-linear-gradient(top, #faf9f9 0%, #e8e8e8 100%);
        background-image: -moz-linear-gradient(top, #faf9f9 0%, #e8e8e8 100%);
        background-image: -ms-linear-gradient(top, #faf9f9 0%, #e8e8e8 100%);
        background-image: -o-linear-gradient(top, #faf9f9 0%, #e8e8e8 100%);
        background-image: linear-gradient(top, #faf9f9 0%, #e8e8e8 100%);
        border-color: #8a8a8a;
        color: #333333;
        background-color: #fafafa;
        /** Set the same ammount of border radius here */
        border-radius: 0 3px 3px 0;
    }

        /** Icon */
        .RadComboBox_Default .rcbActionButton .rcbIcon {
            background-image: url('<%=WebResource("Telerik.Web.UI.Skins.Common.Sprites.radActionsSprite.png")%>');
            _background-image: url('<%=WebResource("Telerik.Web.UI.Skins.Common.Sprites.radActionsSprite.png")%>');
            background-position: -2px -22px;
        }




    /**
     * Hovered state (the inner container)
     */
    .RadComboBox_Default .rcbHovered {
        border-color: #515151;
        color: black;
        background-color: white;
    }


        /** Input */
        .RadComboBox_Default .rcbHovered .rcbInput {
            color: black;
        }


        /** Button */
        .RadComboBox_Default .rcbHovered .rcbActionButton {
            background-image: -webkit-linear-gradient(top, #e2e2e2 0%, #c3c3c3 100%);
            background-image: -moz-linear-gradient(top, #e2e2e2 0%, #c3c3c3 100%);
            background-image: -ms-linear-gradient(top, #e2e2e2 0%, #c3c3c3 100%);
            background-image: -o-linear-gradient(top, #e2e2e2 0%, #c3c3c3 100%);
            background-image: linear-gradient(top, #e2e2e2 0%, #c3c3c3 100%);
            border-color: #515151;
            color: black;
            background-color: #e5e5e5;
        }

            /** Icon */
            .RadComboBox_Default .rcbHovered .rcbActionButton .rcbIcon {
                background-position: -2px -22px;
            }




    /**
     * Focsed state (the inner container)
     */
    .RadComboBox_Default .rcbFocused {
        border-color: #515151;
        color: black;
        background-color: white;
    }


        /** Input */
        .RadComboBox_Default .rcbFocused .rcbInput {
            color: black;
        }


        /** Butotn */
        .RadComboBox_Default .rcbFocused .rcbActionButton {
            background-image: -webkit-linear-gradient(top, #c7c7c7 0%, #dedede 100%);
            background-image: -moz-linear-gradient(top, #c7c7c7 0%, #dedede 100%);
            background-image: -ms-linear-gradient(top, #c7c7c7 0%, #dedede 100%);
            background-image: -o-linear-gradient(top, #c7c7c7 0%, #dedede 100%);
            background-image: linear-gradient(top, #c7c7c7 0%, #dedede 100%);
            border-color: #888888;
            color: black;
            background-color: #dedede;
        }

            /** Icon */
            .RadComboBox_Default .rcbFocused .rcbActionButton .rcbIcon {
                background-position: -2px -22px;
            }




    /**
     * Disabled state (the inner container)
     */
    .RadComboBox_Default .rcbDisabled {}


        /** Input */
        .RadComboBox_Default .rcbDisabled .rcbInput {
            color: #a5a5a5;
        }


        /** Button */
        .RadComboBox_Default .rcbDisabled .rcbActionButton {
            background-image: -webkit-linear-gradient(top, #faf9f9 0%, #e8e8e8 100%);
            background-image: -moz-linear-gradient(top, #faf9f9 0%, #e8e8e8 100%);
            background-image: -ms-linear-gradient(top, #faf9f9 0%, #e8e8e8 100%);
            background-image: -o-linear-gradient(top, #faf9f9 0%, #e8e8e8 100%);
            background-image: linear-gradient(top, #faf9f9 0%, #e8e8e8 100%);
            border-color: #d0d0d0;
            color: #a5a5a5;
            background-color: white;
        }

            /** Icon */
            .RadComboBox_Default .rcbDisabled .rcbActionButton .rcbIcon {
                background-position: -2px -22px;
            }

Regarding border radius:

• Rounded corners are set like this border-radisu: TL_VALUE TR_VALUE BR_VALUE BL_VALUE;
• If values are omitted the previous one are taken
• So border-radius: 3px is the same as border-radius: 3px 3px 3px 3px
• Content of interest will be found in the .RadComboBox_Default .rcbInner selector. Notice the border radius property. That property sets the rounded corners of the control;
• In addition in the .RadComboBox_Default .rcbActionButton selector you need to set the rounds of the button, other wise it will "bleed" out of the containing box.

Regarding gradients

• Gradients are trickier
• Many implementations
• the important part is how you order the values in the parentheses e.g. ( color1, color2, color3 )

Am i getting close to answering your question or away from it?

Regards,
Ivan Zhekov
the Telerik team

[Martin Roussel]

Thanks Ivan,

im already alright with the CSS3 syntax as ive already used radius and gradient in the past. The question was more which selectors/properties are used to style the combobox, which I think your last reply answers to.

Looking also forward for the documentation in the portal.

thanks to you!

Martin