Hi,
I'm trying to get my panel content to inherit the CSS class of the DIV that surrounds the panel. We change the font and make the text a dark grey - but all the items inside the RanPanel are using this:
so they don't match the rest of the page.
If I use Chrome's 'Inspect Element' screen to disable those two properties, everything appears as I want it to.
Is there an easy way to stop that rpTemplate from overriding the styling of items inside my panel item's <ContentTemplate> so it will properly match the rest of the page? I've tried setting a dummy CssClass class on the Panel and Item that just inherits from it's parent container, but the rpTemplate is applied AFTER those.
Here's what my panel looks like:
I want the label text to use the same styling as the rest of the items on the page. The text color is set in the CSS for the <body> tag of the master page, so reusing the CSS on the label itself isn't really an option. I'd prefer to just disable the rpTemplate styling somehow, or override it with inherit-only styles.
Thanks,
-Adam
I'm trying to get my panel content to inherit the CSS class of the DIV that surrounds the panel. We change the font and make the text a dark grey - but all the items inside the RanPanel are using this:
.RadPanelBar_Transparent a.rpLink, .RadPanelBar_Transparent div.rpHeaderTemplate, .RadPanelBar_Transparent .rpTemplate {
}
so they don't match the rest of the page.
If I use Chrome's 'Inspect Element' screen to disable those two properties, everything appears as I want it to.
Is there an easy way to stop that rpTemplate from overriding the styling of items inside my panel item's <ContentTemplate> so it will properly match the rest of the page? I've tried setting a dummy CssClass class on the Panel and Item that just inherits from it's parent container, but the rpTemplate is applied AFTER those.
Here's what my panel looks like:
<div id="page-formview-content"> <div id="mainBody"> <div style="float: left; width: 100%; padding-bottom: 4px; padding-top: 8px"> <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="100%" > <Items> <telerik:RadPanelItem Text="Test Panel 1" Expanded="true"> <ContentTemplate> <asp:Label ID="Label1" runat="server" Text="HIDE AND SHOW!"> </asp:Label> </ContentTemplate> </telerik:RadPanelItem> </Items> </telerik:RadPanelBar> </div> </div></div>I want the label text to use the same styling as the rest of the items on the page. The text color is set in the CSS for the <body> tag of the master page, so reusing the CSS on the label itself isn't really an option. I'd prefer to just disable the rpTemplate styling somehow, or override it with inherit-only styles.
Thanks,
-Adam
2 Answers, 1 is accepted
0
Hello Adam,
You can override the css class selector and apply the desired styles using the css below:
Regards,
Kate
the Telerik team
You can override the css class selector and apply the desired styles using the css below:
div.RadPanelBar_Transparent a.rpLink,div.RadPanelBar_Transparent div.rpHeaderTemplate, div.RadPanelBar_Transparent .rpTemplate { color: grey; font: normal 12px/24px Tahoma,Arial,sans-serif;}Regards,
Kate
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Adam
Top achievements
Rank 1
Rank 1
answered on 08 May 2012, 04:35 PM
Thank you Kate,
did exactly what I was trying to do. :)
I see now how to apply the same override to other RadControl CSS templates, if necessary. Perfect!
Thanks,
-Adam
div.RadPanelBar_Transparent a.rpLink,div.RadPanelBar_Transparent div.rpHeaderTemplate,div.RadPanelBar_Transparent .rpTemplate{ color:inherit; font:inherit;}did exactly what I was trying to do. :)
I see now how to apply the same override to other RadControl CSS templates, if necessary. Perfect!
Thanks,
-Adam