Form Decorator / Skin Style?

4 posts, 0 answers
  1. Thomas Derenthal
    Thomas Derenthal avatar
    38 posts
    Member since:
    Apr 2010

    Posted 18 Jun 2010 Link to this post

    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
  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 21 Jun 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Thomas Derenthal
    Thomas Derenthal avatar
    38 posts
    Member since:
    Apr 2010

    Posted 21 Jun 2010 Link to this post

    Thank you for that. Id did the job. One other thing: I need to set the hover text of the radmenu items to red.
  5. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 22 Jun 2010 Link to this post

    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
Back to Top