RadPanelBar CSS Override (Not Working)

[Ramjet]

Hello,

I have tweaked styles before using the majority of a Telerik theme and changing a few items. Using version 2010.1.519.35 I am trying to do the same for the RadPanelBar only I am not getting the style correct. What I would like to do is have the panelbar use the WebBlue theme and then change a few things on the panel bar item only. Children can be left alone. So I thought the following would work but it doesn't?

.RadPanelbar_WebBlue
{
    margin:0 0 0 0 !important;
    text-align:center !important;
    vertical-align:text-top !important;
}

Any help in understanding what I am missing would be greatly appreciated.
JB

[Peter]

Hi John,

Can you try using .rpLink or .rpItem?
 
Here is a complete list of the rendered css classes -
http://www.telerik.com/help/aspnet-ajax/panelbar-appearance-css-selectors.html

All the best, Peter
the Telerik team

[Ramjet]

Well this is helpful but not all the way. The link is very helpful and I see where I can get the css skin file info for other controls but I am having difficulty seperating the PanelBar from the child items. When I use rpRootGroup (or others) it applies to everything.
For example I would like the PanelBar text to be centered but the Child items left aligned. Here is some ASCII art.....lame I know :)

-----------------------------------------
|               Group1                    |
| Child item grp1                      |
| Child item grp2                      |
|              Group2                     |
| Child item grp1                      |
| Child item grp2                      |
| Child item grp3                      |
| Child item grp4                      |
-----------------------------------------

[Peter]

Hello John,

Please, try the following css selectors:

//Targets root items
   .rpRootGroup .rpItem .rpLink
   {
      color: Red;
   }

   //Targets child items
   .rpRootGroup  .rpGroup .rpItem .rpLink
   {
      color: Green;
   }

All the best, Peter
the Telerik team

[Ramjet]

The samples you provide work great but I am still missing the boat somewhere. So the categories are centered and the list item are left which is what I asked you for. Thank You.

So building off what I thought I had learned I tried to set the background transparent with this:

.rpRootGroup
       {
           background-color:transparent !important;
       }

No effect. Perhaps my skin file was interfering so I removed it and I got the default telerik skin. We are not quite ready to upgrade to the latest asp .net controls so the transparent skin is not an option yet. So looking at the example above I want the centered category to have a transparent background but on mouseover etc. I want all the webblue skin "effects/styles" I'm sorry for not grasping the css skin file layout quickly.

JB

[Peter]

Hi John,

If you need to create a custom skin, I recommend you use Telerik style builder.


Regards, Peter
the Telerik team