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

Skin and Css for RadPanel

1 Answer 74 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Mary
Top achievements
Rank 1
Mary asked on 18 Jul 2012, 06:17 PM

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.
Mary

1 Answer, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 23 Jul 2012, 08:50 AM
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 div.rpHeaderTemplate.new    {      color: green;        }

I hope this helps. Please let me know if you have any further questions that I can assist you with.
 
Greetings,
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.
Tags
PanelBar
Asked by
Mary
Top achievements
Rank 1
Answers by
Kate
Telerik team
Share this question
or