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

Custom tab - got all but one part

3 Answers 25 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Nancy
Top achievements
Rank 1
Nancy asked on 13 Sep 2013, 08:49 PM
I'm trying to duplicate our in-house tabs using the TabStrip and I have got all but one part working. I'm copying  my wfTabs.css which controls our in house custom tabs and the custom .css for radTabstrip I'm trying to create. As you can see from the image I'm attaching - I have all looking the same except the selected tab left image. This is found at tabHeader .current. I tried putting it in SelectedTab class but that doesn't work. I need it to attach to the LI element for selected tab (as I did with the right image) but I don't see a way to do that. Can someone help me fix this.

wfTabs.css:

.tabHeader {
    float:left;
    width:100%;
    /*  background:#DAE0D2 url("bg.gif") repeat-x bottom; */
    background: white;
    font-size:8pt;
    line-height:normal;
    border-bottom: 1pt solid #CFCFCF;
}
.tabHeader ul {
    margin:0;
    padding:3px 10px 0;
    list-style:none;
}
.tabHeader li {
    float:left;
    background:url("../images/wfTabs/left_blue.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 9px;
}
.tabHeader a, .tabHeader a:visited {
    float:left;
    display:block;
    background:url("../images/wfTabs/right_blue.gif") no-repeat right top;
    padding:3px 10px 3px 3px;
    text-decoration:none;
    font-weight:bold;
    color:#ffffff;
    outline:0;
}
.tabHeader a:hover
{
    text-decoration:underline;
    color:#ffffff;
    cursor:pointer;
}

.tabHeader a:focus, .tabHeader a:active
{
    outline:0;
    text-decoration:underline;
   color:#ffffff !important;
    }
    

.tabHeader .disabledTab a
{
    color:#ffffff;
    cursor:text;
}
 
.tabHeader .disabledTab a:hover
{
    text-decoration:none;
}

.tabHeader .current {
    background-image:url("../images/wfTabs/left_grey.gif");
}
.tabHeader .current a {
    background-image:url("../images/wfTabs/right_grey.gif") !important;
    color:#333 !important;
}
.tabHeader .current a:hover {
    text-decoration:none;
}

.tabHeader .markgreen
{
    background-image:url("../images/wfTabs/left_green.gif");
}
.tabHeader .markgreen a {
    background-image:url("../images/wfTabs/right_green.gif") !important;
    color:#ffffff !important;
}
________________________________________________________________________________________________
custom radTabstrip .css:
.radTabDiv {
    float: left;
    width: 100%;
    /*  background:#DAE0D2 url("bg.gif") repeat-x bottom; */
    background: white;
    font-size: 8pt;
    line-height: normal;
    border-bottom: 1pt solid #CFCFCF;
    margin: 0;
    padding: 3px 10px 0;
    list-style: none;
}

div.RadTabStrip .rtsLI {
    margin-right: 2px;
    float: left;
    background: url("../images/wfTabs/left_blue.gif") no-repeat left top;
    margin: 0;
    padding: 0 0 0 9px;
}

div.RadTabStrip .rtsUL {
    margin: 0;
    padding: 3px 10px 0;
    list-style: none;
}

div.RadTabStrip .rtsLink {
    float: left;
    display: block;
    background: url("../images/wfTabs/right_blue.gif") no-repeat right top;
    padding: 3px 10px 3px 3px;
    text-decoration: none;
    font-weight: bold;
    color: #ffffff;
    outline: 0;
}

div.RadTabStrip .rtsSelected {
    background-image: url("../images/wfTabs/right_grey.gif") !important;
    color: #333 !important;
}


3 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 18 Sep 2013, 11:50 AM
Hello Nancy,

The background sprite of the RadTabStrip is on the two elements:
  • rtsLink (left part)
  • rtsOut (center and right part)
so to create a custom layout of the RadTabStrip you should use these two selectors. For selected tab the selectors are the following:
  • rtsSelected (left part)
  • rtsSelected rtsOut (center and right part)

If you need more help, could you please provide me the images you are using to I can customize the CSS for your scenario?

Regards,
Magdalena
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Nancy
Top achievements
Rank 1
answered on 22 Sep 2013, 10:39 PM
Thank you Magdalena but I'm still having difficulty - attached are the images.
0
Magdalena
Telerik team
answered on 25 Sep 2013, 08:51 AM
Hi Nancy,

Thank you for resources you provided.

In the attached project you can find an exemplar solution which is customized for your case using images you provided. There is used the Default skin as a base. Stronger selectors used in the added CSS overwrite the inbuilt styles of backgrounds of the tabs.

Do not hesitate to contact me if you have other questions.
 

Regards,
Magdalena
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
TabStrip
Asked by
Nancy
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Nancy
Top achievements
Rank 1
Share this question
or