Rank 1
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
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:<html xmlns="http://www.w3.org/1999/xhtml"><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
Rank 1
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