Steve Fletcher
Top achievements
Rank 1
Rank 1
Steve Fletcher
asked on 13 Feb 2009, 11:43 PM
I would like to have a bottom (blue) border on the input text box of the Default2006 skin just like on the sides and the top. I've tried changing some styles in the skin's stylesheet, but can't seem to make it work. Any ideas?
5 Answers, 1 is accepted
0
Hello Steve,
To override the default borders set through the embedded Default2006 calendar skin, you can either define css styles with higher specificity as explained in this blog post on our site, or expose the same styles on the page followed by an !important keyword at the end.
The styles applied for the separate calendar elements are listed in the following article from the RadCalendar documentation:
http://www.telerik.com/help/aspnet-ajax/calendar_appearancestyles.html
Best regards,
Sebastian
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
To override the default borders set through the embedded Default2006 calendar skin, you can either define css styles with higher specificity as explained in this blog post on our site, or expose the same styles on the page followed by an !important keyword at the end.
The styles applied for the separate calendar elements are listed in the following article from the RadCalendar documentation:
http://www.telerik.com/help/aspnet-ajax/calendar_appearancestyles.html
Best regards,
Sebastian
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Steve Fletcher
Top achievements
Rank 1
Rank 1
answered on 16 Feb 2009, 07:16 PM
Sebastian,
The links helped to some extent. One key point that I didn't understand is:
"The CSS class definitions for the embedded RadInput control are found in the Input CSS skin file rather than the Calendar CSS file".
Given that, I was able to customize the Date Input box's font properties to match those of the other text boxes on my form. That's an improvement.
However, I am still having trouble knowing what style in which style sheet to change, add or delete in order to get a bottom border on the Date Input box.
Thanks
Ralph
The links helped to some extent. One key point that I didn't understand is:
"The CSS class definitions for the embedded RadInput control are found in the Input CSS skin file rather than the Calendar CSS file".
Given that, I was able to customize the Date Input box's font properties to match those of the other text boxes on my form. That's an improvement.
However, I am still having trouble knowing what style in which style sheet to change, add or delete in order to get a bottom border on the Date Input box.
Thanks
Ralph
0
Hi Steve,
Based on the description in the article, you need to add the setting for bottom border to the RadInput styles listed in the table at the bottom section. For this purpose you can utilize one of the options explained in my previous reply.
Best regards,
Sebastian
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Based on the description in the article, you need to add the setting for bottom border to the RadInput styles listed in the table at the bottom section. For this purpose you can utilize one of the options explained in my previous reply.
Best regards,
Sebastian
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Steve Fletcher
Top achievements
Rank 1
Rank 1
answered on 17 Feb 2009, 06:20 PM
I'm sorry. The article is not clear enough. I can't map what I read in the article to the contents of the stylesheet.
For example, the article lists:
How does this map to the contents of the stylesheet for the Default2006 skin? Is it
Or is this a totally new class that I need to add to the stylesheet?
Have you tried adding the bottom border to the Default2006 Date Input yourself? Did it work? If so, please show me the customizations that you made to the stylesheet.
Thanks
For example, the article lists:
| Property | Default CSS class | Description |
|---|---|---|
| EnabledStyle | riEnabled | The style for the enabled input control. |
How does this map to the contents of the stylesheet for the Default2006 skin? Is it
.radEnabledCss_Default2006 ?
Or is this a totally new class that I need to add to the stylesheet?
Have you tried adding the bottom border to the Default2006 Date Input yourself? Did it work? If so, please show me the customizations that you made to the stylesheet.
Thanks
0
Hello Steve,
The actual style with higher specificity you need to use is .RadInput_Default2006 input.riTextBox.riEnabled. Here is a simple example which worked on my end:
Kind regards,
Sebastian
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
The actual style with higher specificity you need to use is .RadInput_Default2006 input.riTextBox.riEnabled. Here is a simple example which worked on my end:
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title>Untitled Page</title> |
| <style type="text/css"> |
| .RadInput_Default2006 input.riTextBox.riEnabled |
| { |
| border: 1px solid blue; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <div> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Skin="Default2006"> |
| <Calendar Skin="Default2006" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" |
| ViewSelectorText="x"> |
| </Calendar> |
| <DatePopupButton HoverImageUrl="" ImageUrl="" /> |
| </telerik:RadDatePicker> |
| </div> |
| </form> |
| </body> |
| </html> |
Kind regards,
Sebastian
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.