Hi,
In one aspx page i have 2 tabs with 2 different css styles, both style i saved in external css pages. when i call both style pages and added in cssclass for radtab, both style reflect in both tabs. How to use different style for 2 or more tabs in same aspx page.Below is my code.
Css pages
<link href="CustomSkins/UnderlineTab.css" rel="stylesheet" /> - With bottom line
<link href="CustomSkins/RoundedTab.css" rel="stylesheet" /> - Rounded corner tab
First Tab:
<telerik:RadTabStrip ID="PageTab1" CssClass="UnderlineTab" RenderMode="Lightweight" EnableEmbeddedSkins ="false" OnClientTabSelecting="PageTab_OnClientTabSelecting" MultiPageID="MultiPage" runat="server" Orientation="HorizontalBottom" SelectedIndex="3">
Second Tab:
<telerik:RadTabStrip ID="PageTab2" CssClass="RoundedTab" RenderMode="Lightweight" EnableEmbeddedSkins ="false" OnClientTabSelecting="PageTab_OnClientTabSelecting" MultiPageID="MultiPage" runat="server" Orientation="HorizontalBottom" SelectedIndex="3">
Screenshots if hide one styles :
1.http://prntscr.com/tcio50
2.http://prntscr.com/tcios3
If i enable both css,both style reflect in same tabs -- http://prntscr.com/tcip58
Below are Rounded CSS style
div.RadTabStrip .rtsLevel {
border-color: transparent;
}
div.RadTabStrip .rtsLI,
div.RadTabStrip .rtsLI.rtsHovered {
margin-right: 10px;
border: none;
}
div.RadTabStrip .rtsLI .rtsLink,
div.RadTabStrip .rtsLI.rtsHovered .rtsLink,
div.RadTabStrip .rtsLI.rtsSelected .rtsLink {
background: none;
border: none;
box-shadow: none;
}
div.RadTabStrip .rtsLevel .rtsLI.rtsSelected .rtsLink:before {
background: none;
border: none;
}
div.RadTabStrip .rtsLI.rtsSelected {
background-color: orange;
border-radius: 25px;
}
div.RadTabStrip .rtsLI.rtsSelected .rtsLink {
color: white;
}
----------------------------------------------------------------------------------
Below are Underline Css Style
div.RadTabStrip .rtsLevel {
border-color: transparent;
}
div.RadTabStrip .rtsLI,
div.RadTabStrip .rtsLI.rtsHovered {
margin-right: 10px;
border: none;
color :black;
}
div.RadTabStrip .rtsLI .rtsLink,
div.RadTabStrip .rtsLI.rtsHovered .rtsLink,
div.RadTabStrip .rtsLI.rtsSelected .rtsLink {
background: none;
border: none;
box-shadow: none;
}
div.RadTabStrip .rtsLevel .rtsLI.rtsSelected .rtsLink:before {
background: none;
border: none;
}
div.RadTabStrip .rtsLI.rtsSelected {
color :cornflowerblue;
font-weight :700 ;
border-bottom-width :inherit;
border-bottom-style:solid ;
border-bottom-color :cornflowerblue;
border-radius: 0px;
}
div.RadTabStrip .rtsLI.rtsSelected .rtsLink {
color: cornflowerblue;
}
Pls reply Asap
Thanks