TabStrip Style Problem

2 posts, 0 answers
  1. Neda
    Neda avatar
    25 posts
    Member since:
    Oct 2011

    Posted 28 Dec 2014 Link to this post

    Hello

    I have attached to photos in this thread , i want to set my style in a way that , my tab looks like photo2,what ever I do i cant make it looks like photo2 ,i have attached my style ,please help me...

    Thanks a lot


    .RadTabStrip
    {
        
       margin-top:3px;    
       height:37px;
       float:right;
       margin-right:200px;
    }
    .RadTabStrip div
    {
        float:right;
    }

    .RadTabStripTop_Default_rtl .rtsLevel .rtsLink
    {
        padding-right:0 !important
    }
    .RadTabStrip .rtsUL, .RadTabStripVertical .rtsUL
    {
        
    }
    .RadTabStrip_Default .rtsLI, .RadTabStrip_Default .rtsLink
    {


    }
    .RadTabStrip .rtsLI .rtsLink
    {
       
    }
    .RadTabStrip .rtsLevel1 .rtsLI .rtsLink
    {
        color:#fff;
        background:url(../Images/Cool_Tab/tab-uselected-left.png) 10px 0 no-repeat;
        height:37px;
        font-family:Yekan,YekanNumbers,Tahoma;
        font-size:9pt;
        font-weight:normal;
        padding-left:53px;
        margin-left:0;
     
    }
    .RadTabStrip .rtsLevel1 .rtsLI .rtsLink .rtsOut
    {
       background:url(../Images/Cool_Tab/tab-uselected-right.png) right 0px no-repeat;
        height:37px;
        padding-right:53px;
     
         
    }
    .RadTabStrip .rtsLevel1 .rtsLI .rtsLink .rtsIn
    {
          background-image:url('../Images/Cool_Tab/tab-uselected.png');
     height:37px;
       background-repeat:repeat-x;
       line-height:37px;
    }
    .RadTabStrip .rtsLevel1 rtsLI .rtsLink:hover
    {
        color:Green;
    }
    .RadTabStrip .rtsLevel1 .rtsLI .rtsLink.rtsSelected
    {
        padding-top: 0px;
       background: transparent url('../Images/Cool_Tab/tab-selected-left.png') 10px 0px no-repeat;
       line-height:40px;
       width:53px;
       
       z-index:2 !important
     
    }
    .RadTabStripTop_Default_rtl .rtsLevel .rtsLink
    {
       /*padding-right:5px !important*/
    }
    .RadTabStrip .rtsLevel1 .rtsLI .rtsLink.rtsSelected .rtsOut
    {
       background-image:url('../Images/Cool_Tab/tab-selected-right.png');
       background-position:right;
       background-repeat:no-repeat;
       height: 40px;
       color: #fff;   
       font-family:Yekan,YekanNumbers,Tahoma;
       font-size:9pt;
       font-weight:normal;
     
       
    }
    .RadTabStrip .rtsLevel1 .rtsLI .rtsLink.rtsSelected .rtsIn
    {
      background-image:url('../Images/Cool_Tab/tab-selected.png');
     height:40px;
       background-repeat:repeat-x;
       color:#000
        
    }

  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 01 Jan 2015 Link to this post

    Hello.

    I have attached a proof of concept skin that illustrates how to achieve something similar to your desired skin.

    In a nutshell: tab containers are shifter to the left (or right in your case); the tabs are given z-index and then the selected tab is given a higher z-index so it "pops" out.

    Regards,
    Ivan Zhekov
    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top