This is a migrated thread and some comments may be shown as answers.

Form Decorator / Skin Style?

3 Answers 98 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Thomas Derenthal
Top achievements
Rank 1
Thomas Derenthal asked on 18 Jun 2010, 08:41 PM
First off, let me say that Telerik kicks ass! Way easier to use than Infragistics. I gave up on trying to find the right videos for learning and used code from the demos.

The best way to explain my problem, look at this page. Mouse over text box and see that the border shows green. I want it to be red. I am not a design/layout/graphics/make-pretty expert. Where is the style/file/property to change green to red?

http://pickuptrucker.com/Contact.aspx

Thanks,
Tom

3 Answers, 1 is accepted

Sort by
0
Bozhidar
Telerik team
answered on 21 Jun 2010, 01:06 PM
Hi Thomas,

Thanks for the good words!

Each of the controls included in the RadControls for ASP.NET AJAX suite is styled with two CSS files that are loaded in a certain order. The first one - ControlName.css, also called base stylesheet contains CSS properties and values that are common for all skins, i.e it is layout-specific, not skin-specific. These are CSS float, padding, margin, font-size, font-family, etc. In the general case, when creating a custom skin for a control this file should not be edited, unless the custom skin needs different sizes, padding and/ or margins.

The second file represents the actual skin of the control, and its name consists of the control name plus the skin name, i.e -FormDecorator.Default.css. Upon creating a custom skin for the control, one should edit that particular file, as it contains skin-specific CSS properties, and references to images, colors, borders and backgrounds.

In your case, a fast fix to change the hover border style from green to red would be the following CSS, inserted in the head of the document:

<head runat="server">
    <title></title>
    <style type="text/css">
        .RadForm.RadForm_Black table.rfdRoundedWrapper:hover div.rfdRoundedInner
        {
            border-color: #f00 !important;
        }
        /* this selector styles the hover of the side bars of the rounded elements */
        .RadForm.RadForm_Black table.rfdRoundedWrapper:hover .rfdRoundedOuter
        {
            background-color: #f00 !important;
        }
        .RadForm_Black.rfdTextbox .rfdDecorated:hover,
        .RadForm_Black.rfdTextbox .rfdDecorated:hover,
        .RadForm_Black.rfdTextarea textarea:hover
        {
            border: solid 1px #f00 !important;
            border-left: solid 1px #444444\9 !important;
            border-right: solid 1px #444444\9 !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all"
        Skin="Black"></telerik:RadFormDecorator>
    <div>
        <fieldset style="height: 200px; width: 245px">
            <legend>Text Boxes</legend>
            <label for="UsernameBox">
                Username: </label>
            <asp:TextBox runat="server" ID="UsernameBox" Width="120px"></asp:TextBox><br />
            <br />
            <label for="PasswordBox">
                Password: </label>
            <asp:TextBox runat="server" TextMode="Password" ID="PasswordBox" Width="120px"></asp:TextBox><br />
            <br />
            <asp:TextBox ID="TextArea1" Style="margin-left: 6px; margin-bottom: 2px;" runat="server"
                TextMode="MultiLine" Text="Enter Text..." Rows="4" Columns="20"></asp:TextBox>
        </fieldset>
    </div>
    </form>
</body>
</html>


If you want to have more changes in the color scheme, like anchor colors, background colors etc., it will be better to create your own custom skin. You could find how to do that at: Creating RadFormDecorator Cusom Skin.

Kind regards,
Bojo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Thomas Derenthal
Top achievements
Rank 1
answered on 21 Jun 2010, 04:43 PM
Thank you for that. Id did the job. One other thing: I need to set the hover text of the radmenu items to red.
0
Georgi Tunev
Telerik team
answered on 22 Jun 2010, 12:21 PM
Hi Thomas,

You can use the following styles for that purpose:

.RadMenu a.rmLink:hover
{
    background: red !important
}
 
.RadMenu a.rmLink:hover .rmText
{
    background: red !important
}


Kind regards,
Georgi Tunev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
FormDecorator
Asked by
Thomas Derenthal
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Thomas Derenthal
Top achievements
Rank 1
Georgi Tunev
Telerik team
Share this question
or