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

Suppressing rpTemplate CSS class?

2 Answers 30 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Adam
Top achievements
Rank 1
Adam asked on 04 May 2012, 08:10 PM
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:

.RadPanelBar_Transparent a.rpLink, .RadPanelBar_Transparent div.rpHeaderTemplate, .RadPanelBar_Transparent .rpTemplate {
  1. colorblack;
  2.   fontnormal 12px/24px Tahoma,Arial,sans-serif;
}

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

Sort by
0
Kate
Telerik team
answered on 07 May 2012, 09:20 AM
Hello Adam,

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
answered on 08 May 2012, 04:35 PM
Thank you Kate,

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
Tags
PanelBar
Asked by
Adam
Top achievements
Rank 1
Answers by
Kate
Telerik team
Adam
Top achievements
Rank 1
Share this question
or