Custom tab - got all but one part

4 posts, 0 answers
  1. Nancy
    Nancy avatar
    5 posts
    Member since:
    Sep 2013

    Posted 13 Sep 2013 Link to this post

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


  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 18 Sep 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nancy
    Nancy avatar
    5 posts
    Member since:
    Sep 2013

    Posted 22 Sep 2013 Link to this post

    Thank you Magdalena but I'm still having difficulty - attached are the images.
  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 25 Sep 2013 Link to this post

    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.
Back to Top