Apply CSS on RadTab

[ahmad]

Hi Experts ..


I am trying create css elements to be applied on RadTabs similar to the image in this link : http://cid-ec0cd14d5f0b59d3.skydrive.live.com/self.aspx/telerik/radTabs.bmp, I tried  the following but it does not work!!!

.tab
{
    background:  transparent url(i/navigation-sprite.png) no-repeat;
    width:95px;
    height:26px;
    text-decoration:none;
    font-size:13px;
    color:white !important;
    background-position:0 0;
    float:left;
    text-align:center;
    margin:0 2px;
    line-height:26px;
}

.selectedTab
{
    background-position:0 -26px;
    font-weight:bold;
    font-size:13px;
    color:#187ecc !important;
    background-image:  transparent url(i/navigation-sprite.png) no-repeat !important;
}

.hoveredTab
{
     background-image:url(i/navigation-sprite.png);
}

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0"
        style="margin-top: 0" >
<Tabs>
<telerik:RadTab Text="Tab 1" CssClass="tab" SelectedCssClass="selectedTab"
        HoveredCssClass="hoveredTab" Selected="True">
</telerik:RadTab>
<telerik:RadTab Text="Tab 2" CssClass="tab" SelectedCssClass="selectedTab" HoveredCssClass="hoveredTab" >
</telerik:RadTab>
<telerik:RadTab Text="Tab 3" CssClass="tab" SelectedCssClass="selectedTab" HoveredCssClass="hoveredTab">
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>

[ahmad]

Ok, I fixed that one, but now I am not able to add the spaces before the first tab,

this is the css:

.tabStrip
{
    background: white url('i/header-bg.png') repeat-y right top;
    border-style:none;
    border-bottom:1px solid #187ecc;
    left:41px;
}

.tab
{
    background:  url(i/navigation-sprite.png) no-repeat top;
    width:95px;
    height:26px;
    text-decoration:none;
    font-weight:bold;
    font-size:13px;
    color:white !important;
    background-position:0 0;
    float:left;
    text-align:center;
    margin:0 2px;
    line-height:26px;
}

.selectedTab
{
    background-position:0 -26px;
    font-weight:bold;
    font-size:13px;
    color:#187ecc !important;
    background-image:  url(i/navigation-sprite.png) no-repeat  top;
}

.hoveredTab
{
    background-position:0 -26px;
    font-weight:bold;
    font-size:13px;
    color:#187ecc !important;
    background-image: url(i/navigation-sprite.png) no-repeat  top;
}

[ahmad]

I am still have problem with this issue, any one can help me ?

[ahmad]

I am providing in this post the css style and image of the result of applying the css to RadTabStrip, and hope that someone will respond!

/* This is for RadTabStrip and RadTab */

.RadTabStrip_Default .rtsLI,
.RadTabStrip_Default .rtsLink
{
    color: #000000;
}

.RadTabStrip_Default .rtsLevel1 .rtsLI,
.RadTabStrip_Default .rtsLevel1 .rtsLink
{
    color: #000;
}

.RadTabStrip_Default .rtsLink
{
    font: 11px/25px arial,sans-serif;
    text-decoration: none;
}

.RadTabStrip_Default .rtsLevel1 .rtsLink
{
    font-size: 12px;
    line-height: 20px;
}

.RadTabStripTop_Default .rtsOut
{
    text-align: center;
    vertical-align: middle;
}

.RadTabStrip_Default .rtsTxt
{
    zoom: 1;
}

/* Modified */
.RadTabStrip_Default .rtsLevel1 .rtsIn
{
    background: url(i/navigation-sprite.png) no-repeat top;
    width:95px;
    height:26px;
    text-decoration:none;
    font-weight:bold;
    font-size:13px;
    color:white !important;
    background-position:0 0;
    text-align:center;
    line-height:26px;
    border-bottom:1px solid #ffffff;
}

.RadTabStrip_Default .rtsImg
{
    border: 0;
    vertical-align: middle;
    width: 16px;
    margin: 0 5px 0 0;
}

/* Scrolling */
.RadTabStrip_Default .rtsNextArrow,
.RadTabStrip_Default .rtsPrevArrow,
.RadTabStrip_Default .rtsPrevArrowDisabled,
.RadTabStrip_Default .rtsNextArrowDisabled
{
    height:26px;
    width:12px;
    background:transparent url('TabStrip/ScrollArrows.gif') no-repeat;
}

.RadTabStrip_Default .rtsNextArrow { background-position: 100% 13px; }
.RadTabStrip_Default .rtsPrevArrow { background-position: 0 13px; }
.RadTabStrip_Default .rtsNextArrowDisabled { background-position: 100% 100%; }
.RadTabStrip_Default .rtsPrevArrowDisabled { background-position: 0 100%; }

/* Orientation: Top */

.RadTabStrip_Default .rtsUL .rtsSeparator
{
    display: none;
}

/* Modified */
.RadTabStripTop_Default .rtsLink:hover
{
}

/* Modified */
.RadTabStripTop_Default .rtsSelected,
.RadTabStripTop_Default .rtsSelected:hover
{
    background-position:0 -26px;
    font-weight:bold;
    font-size:13px;
    color:#187ecc !important;
    background-image:  url(i/navigation-sprite.png) no-repeat top;

}

.RadTabStripTop_Default .rtsLast
{
    background: none;
}

/* Modified */
.RadTabStripTop_Default .rtsLevel1
{
    /*background: none;*/
}

.RadTabStripTop_Default .rtsLevel1 .rtsLI { padding: 0; }

.RadTabStripTop_Default .rtsLevel1 .rtsOut { margin-left: 20px; }
.RadTabStripTop_Default .rtsLevel1 .rtsIn { padding-left: 0; }

/* Modified */
.RadTabStripTop_Default .rtsLevel1 .rtsSelected .rtsOut
{
    background-position:0 -26px;
    font-weight:bold;
    font-size:13px;
    color:#187ecc !important;
    background-image:  url(i/navigation-sprite.png) no-repeat  top;
}

/* Modified */
.RadTabStripTop_Default .rtsLevel1 .rtsSelected .rtsIn
{
    background-position:0 -26px;
    font-weight:bold;
    font-size:13px;
    color:#187ecc !important;
    background-image:  url(i/navigation-sprite.png) no-repeat  top;
}

.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsOut { margin-left: 0; margin-right: 20px; }
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsIn { margin-left: 20px; padding-right: 0; }

/* Modified */
.RadTabStripTop_Default .rtsLevel1 .rtsLink
{
    background-position:0 -26px;
    font-weight:bold;
    font-size:13px;
    color:#187ecc !important;
    background-image:  url(i/navigation-sprite.png) no-repeat  top;
}

/* Modified */
.RadTabStripTop_Default .rtsLevel1 .rtsLink:hover
{
    /*color: #fff; background-position: 0 -36px; */
}
.RadTabStripTop_Default .rtsLevel1 .rtsLink:hover .rtsOut
{
     /*background-position: 100% -36px; */
}

.RadTabStripTop_Default .rtsLevel1 .rtsSelected:hover { /*color: #000;*/ }
.RadTabStripTop_Default .rtsLevel1 .rtsSelected,
.RadTabStripTop_Default .rtsLevel1 .rtsSelected:hover
{
    /*background: transparent url('TabStrip/TabStripHStates.gif') no-repeat 0 -72px; text-decoration: none;*/
}

.RadTabStripTop_Default .rtsLevel1 .rtsSelected .rtsOut,
.RadTabStripTop_Default .rtsLevel1 .rtsSelected:hover .rtsOut
{
    /*background: transparent url('TabStrip/TabStripHStates.gif') no-repeat 100% -72px; */
}

/* Modified
.RadTabStripTop_Default .rtsLevel1 .rtsFirst .rtsLink { background-position: 0 -108px; }
.RadTabStripTop_Default .rtsLevel1 .rtsFirst .rtsLink:hover { background-position: 0 -144px; }
.RadTabStripTop_Default .rtsLevel1 .rtsFirst .rtsSelected,
.RadTabStripTop_Default .rtsLevel1 .rtsFirst .rtsSelected:hover { background-position: 0 -180px; }

.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsLink { background-position: 100% -108px; }
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsOut { background: transparent url('TabStrip/TabStripHStates.gif') no-repeat 0 0; }
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsLink:hover { background-position: 100% -144px; }
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsLink:hover .rtsOut { background-position: 0 -36px; }
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsSelected,
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsSelected:hover { background-position: 100% -180px; }
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsSelected .rtsOut,
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsSelected:hover .rtsOut { background-position: 0 -72px; }
*/

/* disabled tabs */
.RadTabStripTop_Default .rtsLevel1 .rtsDisabled:hover { background-position: 0 0; }
.RadTabStripTop_Default .rtsLevel1 .rtsFirst .rtsDisabled:hover { background-position: 0 -108px; }
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsDisabled:hover { background-position: 100% -108px; }
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsDisabled:hover .rtsOut { background-position: 0 0; }

/* all disabled tabs */
.RadTabStrip_Default .rtsLevel .rtsDisabled,
.RadTabStrip_Default .rtsLevel .rtsDisabled:hover,
.RadTabStrip_Default_disabled .rtsLevel .rtsDisabled,
.RadTabStrip_Default_disabled .rtsLevel .rtsDisabled:hover
{
    color: #888;
    cursor: default;
}

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" MultiPageID="RadMultiPage1" EnableEmbeddedSkins="False">
<Tabs>
<telerik:RadTab Text="Tab 1" Selected="True">
</telerik:RadTab>
<telerik:RadTab Text="Tab 2">
</telerik:RadTab>
<telerik:RadTab Text="Tab 3" >
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>

You can see the result in the following link: http://cid-ec0cd14d5f0b59d3.skydrive.live.com/self.aspx/telerik/modifiedRadTabs.bmp?lc=1033

The issues I am having:
1) The selected tab looks like the first tab in this link http://cid-ec0cd14d5f0b59d3.skydrive.live.com/self.aspx/telerik/modifiedRadTabs.bmp?lc=1033, also I want the tab to be like a selected when *hover*, which element should be modified ?

2) The spaces between tabs is not like the original image, which element used to set the padding (spaces between tabs)?

3) The bottom border should be *blue*, also the bottom border of the selected tab should be white, and the edge of the selected tab should be linked with the bottom-border of the tab-strip (just like in the image in the first post).

could you please help me with that?

Thanks,
Ahmad

[ahmad]

Ok, so far I was able to solve the first and the second issues, but I am still not able to find a way to make the selected tab bottom border to override the border of the tabstrip border, the bottom border of the selected tab should be white. where are you guys ? :)

/* This is for RadTabStrip and RadTab */

.RadTabStrip_Default
{
    position:relative;
    background: white url('i/header-bg.png') repeat-y rightright top;
    border-bottom:1px solid #187ecc;
}

.RadTabStrip_Default .rtsLI,
.RadTabStrip_Default .rtsLink
{
    color: #000000;
}

/*
.RadTabStrip_Default .rtsLevel1
{
    border-bottom:1px solid White !important;
    margin-bottom:-1px;
}
*/

.RadTabStrip_Default .rtsLevel1 .rtsLI,
.RadTabStrip_Default .rtsLevel1 .rtsLink
{
    color: #000;
}

.RadTabStrip_Default .rtsLink
{
    font: 11px/25px arial,sans-serif;
    text-decoration: none;
}

.RadTabStrip_Default .rtsLevel1 .rtsLink
{
    font-size: 12px;
    line-height: 20px;
}

.RadTabStripTop_Default .rtsOut
{
    text-align: center;
    vertical-align: middle;
}

.RadTabStrip_Default .rtsTxt
{
    zoom: 1;
}

/* Modified */
.RadTabStrip_Default .rtsLevel1 .rtsIn
{
    background: url(i/navigation-sprite.png) no-repeat top;
    width:95px;
    height:26px;
    text-decoration:none;
    font-weight:bold;
    font-size:13px;
    color:white !important;
    background-position:0 0;
    text-align:center;
    line-height:26px;
    border-bottom:1px solid white;
    margin-bottom:-1px;
}

/* Added */
.RadTabStrip_Default .rtsLevel1 .rtsIn:hover
{
    background-position:0 -26px;
    font-weight:bold;
    font-size:13px;
    color:#187ecc !important;
    background-image: url(i/navigation-sprite.png) no-repeat  top;
}

.RadTabStrip_Default .rtsImg
{
    border: 0;
    vertical-align: middle;
    width: 16px;
    margin: 0 5px 0 0;
}

/* Scrolling */
.RadTabStrip_Default .rtsNextArrow,
.RadTabStrip_Default .rtsPrevArrow,
.RadTabStrip_Default .rtsPrevArrowDisabled,
.RadTabStrip_Default .rtsNextArrowDisabled
{
    height:26px;
    width:12px;
    background:transparent url('TabStrip/ScrollArrows.gif') no-repeat;
}

.RadTabStrip_Default .rtsNextArrow { background-position: 100% 13px; }
.RadTabStrip_Default .rtsPrevArrow { background-position: 0 13px; }
.RadTabStrip_Default .rtsNextArrowDisabled { background-position: 100% 100%; }
.RadTabStrip_Default .rtsPrevArrowDisabled { background-position: 0 100%; }

/* Orientation: Top */

.RadTabStrip_Default .rtsUL .rtsSeparator
{
    display: none;
}

/* Modified */
.RadTabStripTop_Default .rtsLink:hover
{

}

/* Modified */
.RadTabStripTop_Default .rtsSelected/*,
.RadTabStripTop_Default .rtsSelected:hover  */
{/*
    background-position:0 -26px;
    font-weight:bold;
    font-size:13px;
    color:#187ecc !important;
    background-image: url(i/navigation-sprite.png) no-repeat top;
*/
}

/* Modified */
.RadTabStripTop_Default .rtsLevel1
{
    /*background: none;*/
}

.RadTabStripTop_Default .rtsLevel1 .rtsLI { padding: 0; }

.RadTabStripTop_Default .rtsLevel1 .rtsOut
{
     padding-left: 4px;
}

/* Added */
.RadTabStripTop_Default .rtsLevel1 .rtsFirst .rtsOut { padding-left: 41px; }
/*.RadTabStripTop_Default .rtsLevel1 .rtsIn { padding-left: 0; }*/

/* Modified */
.RadTabStripTop_Default .rtsLevel1 .rtsSelected .rtsOut
{
    /*background-position:0 -26px;
    font-weight:bold;
    font-size:13px;
    color:#187ecc !important;
    background-image:  url(i/navigation-sprite.png) no-repeat  top;*/
}

/* Modified */
.RadTabStripTop_Default .rtsLevel1 .rtsSelected .rtsIn
{
    background-position:0 -26px;
    font-weight:bold;
    font-size:13px;
    color:#187ecc !important;
    background-image:  url(i/navigation-sprite.png) no-repeat  top;
}

/* Modified */
.RadTabStripTop_Default .rtsLevel1 .rtsLink
{
    background-position:0 -26px;
    font-weight:bold;
    font-size:13px;
    color:#187ecc !important;
    background-image:  url(i/navigation-sprite.png) no-repeat  top;
}

/* Modified */
.RadTabStripTop_Default .rtsLevel1 .rtsLink:hover
{
    /*color: #fff; background-position: 0 -36px; */

}
.RadTabStripTop_Default .rtsLevel1 .rtsLink:hover .rtsOut
{
     /*background-position: 100% -36px; */
}

.RadTabStripTop_Default .rtsLevel1 .rtsSelected:hover { /*color: #000;*/ }
.RadTabStripTop_Default .rtsLevel1 .rtsSelected,
.RadTabStripTop_Default .rtsLevel1 .rtsSelected:hover
{
    /*background: transparent url('TabStrip/TabStripHStates.gif') no-repeat 0 -72px; text-decoration: none;*/
}

.RadTabStripTop_Default .rtsLevel1 .rtsSelected .rtsOut,
.RadTabStripTop_Default .rtsLevel1 .rtsSelected:hover .rtsOut
{
    /*background: transparent url('TabStrip/TabStripHStates.gif') no-repeat 100% -72px; */
}

/* Modified
.RadTabStripTop_Default .rtsLevel1 .rtsFirst .rtsLink { background-position: 0 -108px; }
.RadTabStripTop_Default .rtsLevel1 .rtsFirst .rtsLink:hover { background-position: 0 -144px; }
.RadTabStripTop_Default .rtsLevel1 .rtsFirst .rtsSelected,
.RadTabStripTop_Default .rtsLevel1 .rtsFirst .rtsSelected:hover { background-position: 0 -180px; }

.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsLink { background-position: 100% -108px; }
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsOut { background: transparent url('TabStrip/TabStripHStates.gif') no-repeat 0 0; }
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsLink:hover { background-position: 100% -144px; }
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsLink:hover .rtsOut { background-position: 0 -36px; }
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsSelected,
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsSelected:hover { background-position: 100% -180px; }
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsSelected .rtsOut,
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsSelected:hover .rtsOut { background-position: 0 -72px; }
*/

/* disabled tabs */
.RadTabStripTop_Default .rtsLevel1 .rtsDisabled:hover { background-position: 0 0; }
.RadTabStripTop_Default .rtsLevel1 .rtsFirst .rtsDisabled:hover { background-position: 0 -108px; }
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsDisabled:hover { background-position: 100% -108px; }
.RadTabStripTop_Default .rtsLevel1 .rtsLast .rtsDisabled:hover .rtsOut { background-position: 0 0; }

/* all disabled tabs */
.RadTabStrip_Default .rtsLevel .rtsDisabled,
.RadTabStrip_Default .rtsLevel .rtsDisabled:hover,
.RadTabStrip_Default_disabled .rtsLevel .rtsDisabled,
.RadTabStrip_Default_disabled .rtsLevel .rtsDisabled:hover
{
    color: #888;
    cursor: default;
}

[Kamen Bundev]

Hi Ahmad,

The easiest way to do that is to assign two classes to the first tab and style one of them to take care of the spaces. You can do it using CssClass="tab firsttab" for instance.

All the best,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.