[Solved] Setting border & color properties of RadSplitter tabs

[Dusty]

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;
 }

[Vessy]

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

 

 

[Dusty]

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!