Suppressing rpTemplate CSS class?

3 posts, 0 answers
  1. Adam
    Adam avatar
    13 posts
    Member since:
    Sep 2011

    Posted 04 May 2012 Link to this post

    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. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 07 May 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Adam
    Adam avatar
    13 posts
    Member since:
    Sep 2011

    Posted 08 May 2012 Link to this post

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