RadPanelBar CSS Override (Not Working)

6 posts, 0 answers
  1. Ramjet
    Ramjet avatar
    51 posts
    Member since:
    Jul 2009

    Posted 28 Jul 2011 Link to this post

    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
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 29 Jul 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ramjet
    Ramjet avatar
    51 posts
    Member since:
    Jul 2009

    Posted 29 Jul 2011 Link to this post

    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                      |
    -----------------------------------------
  5. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 02 Aug 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Ramjet
    Ramjet avatar
    51 posts
    Member since:
    Jul 2009

    Posted 09 Aug 2011 Link to this post

    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

  7. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 12 Aug 2011 Link to this post

    Hi John,

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


    Regards, Peter
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017