Skin and Css for RadPanel

2 posts, 0 answers
  1. Mary
    Mary avatar
    1 posts
    Member since:
    Jul 2012

    Posted 18 Jul 2012 Link to this post

    I am confused on how to work with the Css for RadPanel.  At first I just had a few classes defined for rpText like one example and the control and site set to default skin/theme but the first item in the list is white text on white so you can't see the description. I tried using WebBlue skin on the control but I don't see any difference in how it renders. There is no rpText class defined either. Also the controls in the expanded area are shifted up into the HeaderTemplate area. I am using HeaderTemplate and ItemTemplate.

    I just wanted it to be a blue header area with a 3d type background and white text. I would like this header area to stay consistent whether it is expanded or not. Same with the expanded panel area. Maybe a light color of blue. For some reason the first item is white, and the second blue.

    Am I missing a main css file ?

    Thanks in advance.
  2. Kate
    Kate avatar
    1898 posts

    Posted 23 Jul 2012 Link to this post

    Hello Mary,

    Thank you for contacting us.

    In general with the RadPanelBar controls there are different css class that are applied to the various html elements that render on the page. In this help article you can find more information on them.  In order to alter the currently applied styles you need to locate the correct css class selector and increase its specificity so that it can overwrite the one that comes with the skin. For instance, using the Default skin, you can use the following css class to set red color to the text to the root RadPanelItems only :
    div.RadPanelBar_Default a.rpLink,
            div.RadPanelBar_Default div.rpHeaderTemplate,
             div.RadPanelBar_Default .rpTemplate
                     color: red;

    However, if you need to apply a specific color to only one RadPanelItem you can use the CssClass property and set a custom css class that you can later use in the following way:
    <telerik:RadPanelItem runat="server" Text="PanelItem1" Value="PanelItem1" CssClass="new">  ...

    div.RadPanelBar_Default    {      color: green;        }

    I hope this helps. Please let me know if you have any further questions that I can assist you with.
    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.
Back to Top