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

Setting border & color properties of RadSplitter tabs

2 Answers 109 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Dusty
Top achievements
Rank 1
Dusty asked on 15 Sep 2014, 04:46 PM
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 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 18 Sep 2014, 01:32 PM
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.

 
0
Dusty
Top achievements
Rank 1
answered on 18 Sep 2014, 03:20 PM
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!
Tags
Splitter
Asked by
Dusty
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Dusty
Top achievements
Rank 1
Share this question
or