Setting border & color properties of RadSplitter tabs

3 posts, 0 answers
  1. Dusty
    Dusty avatar
    8 posts
    Member since:
    May 2007

    Posted 15 Sep 2014 Link to this post

    Hi there!  I'm trying to slightly change the appearance of the tabs of a radsplitter with sliding panes.  I'm currently using the WebBlue skin, but would like to add distinct borders to the tabs and a different color to the expanded tab.  I've added the following css code to my page, but nothing changes.

    I must be missing something.  Any help appreciated.  Thanks!
    ​.
    RadSplitter .paneTabContainer
     {
     border-color: #424242 !important;
     border-width: thin !important;
     
     }
     
     .RadSplitter .paneTabContainerDocked,
     .RadSplitter .paneTabContainerDockedHorizontal
     {
     background: #FAAC58 !important;
     }
     
     .RadSplitter .tabsContainer .paneTabContainerExpanded,
     .RadSplitter .tabsContainer .paneTabContainerExpandedHorizontal
     {
     background: #FAAC58 !important;
     }
  2. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 18 Sep 2014 Link to this post

    Hi Doran,

    The correct CSS selector you should use are as follows:
    .RadSplitter .rspPaneTabContainer
    {
        border-color: #424242 !important;
        border-width: thin !important;
    }
     
    .RadSplitter .rspPaneTabContainerDocked,
    .RadSplitter .rspPaneTabContainerDockedHorizontal
    {
        background: #FAAC58 !important;
    }
     
    .RadSplitter .rspTabsContainer .rspPaneTabContainerExpanded,
    .RadSplitter .rspTabsContainer .rspPaneTabContainerExpandedHorizontal
    {
        background: #FAAC58 !important;
    }

    Can you please give us information on where you took this selectors from so we can update them right away? Basically, the easiest way to determine the class of the desired element is to use a developer tool like Firebug: video.

    Regards,
    Vessy
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dusty
    Dusty avatar
    8 posts
    Member since:
    May 2007

    Posted 18 Sep 2014 Link to this post

    That worked perfectly - thank you so much.  Now that I look again at the source of the code I was using, it is very old.  Here is the link, if it's helpful:  http://www.telerik.com/support/kb/aspnet-ajax/splitter/details/removing-the-border-of-radsplitter-panes-and-the-radsplitter

    Thanks again!
Back to Top