Where is Wizard skin after update to Q3 2009?

10 posts, 0 answers
  1. Hung
    Hung avatar
    11 posts
    Member since:
    Sep 2012

    Posted 22 Jan 2010 Link to this post

    Hello Team

    Our web application is using Wizard skin for tabstrip from Q3 2008. But it seems not exist in newer version of Telerik (Q3 2009). I tried to customize for this wizard  but new css define may not easy with me. Can you help me to upload Wizard skin for tabstrip? I love this tabstrip style.

    Thank for your help
  2. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 22 Jan 2010 Link to this post

    You should be able to try the Skin Converter to see if you can get this skin in the new format :)
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Hung
    Hung avatar
    11 posts
    Member since:
    Sep 2012

    Posted 22 Jan 2010 Link to this post

    Hi

    I don't know what is converter for. I tried to use the tool and paste below Css to the text area then run convert but nothing change !!!
    .RadTabStrip_Wizard 
        font: bold 10px tahoma, sans-serif; 
     
     
    .RadTabStrip_Wizard li a 
        padding-left: 26px; 
        background:transparent url('img/tabLeftFirstOff.gif') 0px 0px no-repeat; 
        line-height: 29px; 
        margin-right: -18px;  
        color:#666666; 
        text-decoration:none; 
     
    .RadTabStrip_Wizard li.last a, 
    .RadTabStrip_Wizard li.break a 
        margin-right:0; 
     
    .RadTabStrip_Wizard li a .wrap 
     
        padding-right: 7px; 
        line-height: 29px; 
        background:transparent url('img/tabRightLastOff.gif') right 0px no-repeat; 
     
    .RadTabStrip_Wizard li a:hover 
        color: #333; 
     
    .RadTabStrip_Wizard li a .innerWrap 
        line-height: 29px; 
        padding:0 27px; 
        padding-left:14px; 
        background:transparent url('img/tabStripeOff.gif') 0px 0px repeat-x; 
        text-align:center; 
     
    .RadTabStrip_Wizard li a.selected 
        padding-top: 0px; 
        background: transparent url('img/tabLeftFirstOn.gif') 0px 0px no-repeat; 
        line-height: 29px; 
        padding-left: 26px; 
     
    .RadTabStrip_Wizard li a.selected .wrap 
        background-image:url('img/tabRightLastOn.gif'); 
        line-height: 29px; 
        padding-right: 7px; 
        color: white; 
     
     
    .RadTabStrip_Wizard li a.selected .innerWrap 
        background-image:url('img/tabStripeOn.gif'); 
     
    .RadTabStrip_Wizard li a.disabled, 
    .RadTabStrip_Wizard li a.disabled .wrap, 
    .RadTabStrip_Wizard li a.disabled .innerWrap 
        cursor:default; 
        text-decoration:line-through; 
     
    .RadTabStrip_Wizard li a.red, 
    .RadTabStrip_Wizard li a.red .wrap, 
    .RadTabStrip_Wizard li a.red .innerWrap 
        color:Red; 
     
    /* scrolling arrows */ 
     
    .RadTabStrip_Wizard .leftArrow 
        background-image:url(img/ScrollLeft.png); 
        background-repeat: no-repeat; 
        height: 16px; 
        width: 17px; 
     
    .RadTabStrip_Wizard .rightArrow 
        background-image:url(img/ScrollRight.png); 
        background-repeat: no-repeat; 
        height: 16px; 
        width: 17px; 
     
     
    .RadTabStrip_Wizard .leftArrowDisabled 
        background-image:url(img/ScrollLeftDisabled.png); 
        height: 16px; 
        width: 17px; 
        background-repeat: no-repeat; 
     
    .RadTabStrip_Wizard .rightArrowDisabled 
        background-image:url(img/ScrollRightDisabled.png); 
        height: 16px; 
        width: 17px; 
        background-repeat: no-repeat; 
    Thanks.
  5. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 22 Jan 2010 Link to this post

    For Q1 2009 Telerik revamped their skinning system to allow for more efficient and cross-control compatible skins. Because of this older skins do not work with the latest controls. This converter takes the CSS of one older skins and attempts to create CSS for Q1 2009 and beyond. I just ran it in the converter and this is what came out:

    .RadTabStrip, 
    .RadTabStrip *, 
    .RadTabStripVertical, 
    .RadTabStripVertical * 
        margin: 0; 
        padding: 0; 
     
    .RadTabStripVertical { displayinline-block; } 
    *+html .RadTabStripVertical { displayinline; } 
    * html .RadTabStripVertical { displayinline; } 
     
    .RadTabStrip .rtsLevel 
        clear:both
        overflowhidden
        width: 100%; 
        positionrelative
     
    * html .RadTabStrip .rtsLevel 
        position:static
     
    *+html .RadTabStrip .rtsLevel 
        position:static
     
    .RadTabStrip .rtsScroll 
        width10000px
        whitewhite-space:nowrap
     
    /* clear float; for IE - inline-block display */ 
    .RadTabStripVertical:after, 
    .RadTabStrip .rtsLevel .rtsUL:after, 
    .RadTabStripVertical .rtsLevel .rtsUL:after 
        content".";  
        displayblock;  
        height: 0; 
        clearboth;  
        visibilityhidden
     
    .RadTabStrip .rtsUL 
        margin:0; 
        padding:0; 
        overflowhidden
        float:left
     
    .RadTabStrip_rtl .rtsUL 
        floatrightright
     
    .RadTabStripVertical .rtsLevel 
        overflowhidden
        height: 100%; 
     
    .RadTabStrip .rtsLI 
        overflowhidden
        list-style-type:none
        float:left 
     
    * html .RadTabStrip .rtsLI 
        display:inline
        zoom: 1; 
        float:none
     
    *+html .RadTabStrip .rtsLI 
        display:inline
        zoom: 1; 
        float:none
     
    .RadTabStripVertical .rtsLI 
        floatleft
        display: -moz-inline-block
        displayinline-block
        list-style-type:none
        overflowhidden
     
    .RadTabStrip .rtsLink, 
    .RadTabStripVertical .rtsLink 
        display:block
        outline:none
        cursorpointer
     
    .RadTabStripVertical .rtsLink 
        zoom: 1; 
     
    .RadTabStrip .rtsOut, 
    .RadTabStripVertical .rtsOut 
        display:block
     
    .RadTabStrip .rtsIn, 
    .RadTabStripVertical .rtsIn 
        display:block
        /*width:100%;   /* IE hiding long text (required tab width however) */ 
     
    .RadTabStrip .rtsPrevArrow, 
    .RadTabStrip .rtsNextArrow, 
    .RadTabStrip .rtsPrevArrowDisabled, 
    .RadTabStrip .rtsNextArrowDisabled 
        font-size:0; 
        display:block
        text-indent:-9999px
        outline:none
     
    .RadTabStrip .rtsCenter 
        text-aligncenter
     
    .RadTabStrip .rtsImg 
        bordernone
    .RadTabStrip .rtsImg+.rtsTxt { display: -moz-inline-box; } 
    .RadTabStrip .rtsTxt { displayinline-block; } 
     
    .RadTabStrip .rtsRight .rtsUL 
        float:rightright
     
    .RadTabStrip .rtsCenter .rtsUL 
        display: -moz-inline-box; 
        displayinline-block
        float:none
     
    .RadTabStrip .rtsBreak 
        height: 0; 
        width: 0; 
        font-size: 0; 
        line-height: 0; 
        displayblock
        clearleft
        margin-top: -2px
     
    * html .RadTabStrip .rtsCenter .rtsUL { displayinline-block; } 
    * html .RadTabStrip .rtsCenter .rtsUL { displayinline; } 
     
    *+html .RadTabStrip .rtsCenter .rtsUL { displayinline-block; } 
    *+html .RadTabStrip .rtsCenter .rtsUL { displayinline; } 
     
    .RadTabStrip_rtl .rtsLI 
        float:rightright
     
    * html .RadTabStrip_rtl .rtsLI 
        float:none
     
    *+html .RadTabStrip_rtl .rtsLI 
        float:none
     
    @media screen and (min-width:50px
        :root .rtsScroll 
        { 
            widthauto
        } 
         
        :root .rtsLI 
        { 
            float:none
            displayinline-block
        } 
     
    .RadTabStripVertical .rtsUL .rtsLI 
        line-height: 0; 
        font-size: 0; 
     
    .RadTabStripVertical .rtsUL li.rtsSeparator 
        displaynone
     
     
     
    .RadTabStrip_Wizard  
    {  
        fontbold 10px tahomasans-serif;  
    }  
      
      
    .RadTabStrip_Wizard li a  
    {  
        padding-left26px;  
        background:transparent url('img/tabLeftFirstOff.gif'0px 0px no-repeat;  
        line-height29px;  
        margin-right: -18px;   
        color:#666666;  
        text-decoration:none;  
    }  
      
    .RadTabStrip_Wizard li.last a,  
    .RadTabStrip_Wizard li.break a  
    {  
        margin-right:0;  
    }  
      
    .RadTabStrip_Wizard li a .wrap  
    {  
      
        padding-right7px;  
        line-height29px;  
        background:transparent url('img/tabRightLastOff.gif'rightright 0px no-repeat;  
    }  
      
    .RadTabStrip_Wizard li a:hover  
    {  
        color#333;  
    }  
      
    .RadTabStrip_Wizard li a .innerWrap  
    {  
        line-height29px;  
        padding:0 27px;  
        padding-left:14px;  
        background:transparent url('img/tabStripeOff.gif'0px 0px repeat-x;  
        text-align:center;  
    }  
      
    .RadTabStrip_Wizard li a.selected  
    {  
        padding-top0px;  
        backgroundtransparent url('img/tabLeftFirstOn.gif'0px 0px no-repeat;  
        line-height29px;  
        padding-left26px;  
    }  
      
    .RadTabStrip_Wizard li a.selected .wrap  
    {  
        background-image:url('img/tabRightLastOn.gif');  
        line-height29px;  
        padding-right7px;  
        colorwhite;  
    }  
      
      
    .RadTabStrip_Wizard li a.selected .innerWrap  
    {  
        background-image:url('img/tabStripeOn.gif');  
    }  
      
    .RadTabStrip_Wizard li a.disabled,  
    .RadTabStrip_Wizard li a.disabled .wrap,  
    .RadTabStrip_Wizard li a.disabled .innerWrap  
    {  
        cursor:default;  
        text-decoration:line-through;  
    }  
      
    .RadTabStrip_Wizard li a.red,  
    .RadTabStrip_Wizard li a.red .wrap,  
    .RadTabStrip_Wizard li a.red .innerWrap  
    {  
        color:Red;  
    }  
      
    /* scrolling arrows */  
      
    .RadTabStrip_Wizard .leftArrow  
    {  
        background-image:url(img/ScrollLeft.png);  
        background-repeatno-repeat;  
        height16px;  
        width17px;  
    }  
      
    .RadTabStrip_Wizard .rightArrow  
    {  
        background-image:url(img/ScrollRight.png);  
        background-repeatno-repeat;  
        height16px;  
        width17px;  
    }  
      
      
    .RadTabStrip_Wizard .leftArrowDisabled  
    {  
        background-image:url(img/ScrollLeftDisabled.png);  
        height16px;  
        width17px;  
        background-repeatno-repeat;  
    }  
      
    .RadTabStrip_Wizard .rightArrowDisabled  
    {  
        background-image:url(img/ScrollRightDisabled.png);  
        height16px;  
        width17px;  
        background-repeatno-repeat;  
    }  

  6. Hung
    Hung avatar
    11 posts
    Member since:
    Sep 2012

    Posted 22 Jan 2010 Link to this post

    Well I also tried to check "Add control's base stylesheet (if such exists) into the generated file " to add some new lines on the top but nothing happens with my layout. Any idea?
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 25 Jan 2010 Link to this post

    Hello Hung,

    Can you also post all the images for the custom skin you are using and I will help you convert it? Thanks in advance.

    Greetings,
    Kamen Bundev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. Hung
    Hung avatar
    11 posts
    Member since:
    Sep 2012

    Posted 25 Jan 2010 Link to this post

    Hi Team

    The old tabstip I mentioned above is telerik tabstrip 3.6.3.0 not Q3 2008, sorry about this. I attached 2 picture and my custom stylesheet for Q3 2009 version for you.

    .RadTabStrip_Wizard  
    {  
        font: bold 10px tahoma, sans-serif;  
    }  
    .RadTabStrip_Wizard .rtsLevel .rtsFirst  {  
          
        background:transparent url('img/tabLeftFirstOff.gif') 0px 0px no-repeat;  
        line-height: 29px;  
        color:#666666;  
        text-decoration:none;  
    }  
    .RadTabStrip_Wizard .rtsLevel .rtsLink {  
          
        background:transparent url('img/tabRightLastOff.gif') right 0px no-repeat;  
        line-height: 29px;  
        color:#666666;  
        text-decoration:none;  
    }  
     
    .RadTabStrip_Wizard .rtsLevel .rtsLast  {  
          
          
        line-height: 29px;  
        color:#666666;  
        text-decoration:none;  
    }  
    .RadTabStrip_Wizard .rtsLI  {  
          
        background:transparent url('img/tabSeperator.gif') 0px 0px no-repeat;  
        line-height: 29px;  
        color:#666666;  
        text-decoration:none;  
    }  
    .RadTabStrip_Wizard li.last a,  
    .RadTabStrip_Wizard li.break a  
    {  
        margin-right:0;  
    }  
     
    .RadTabStrip_Wizard .rtsLevel .rtsLI .rtsIn  
    {margin-right:-9px;  
        margin-left:15px;  
        line-height: 29px;  
        padding:0 27px;  
        padding-left:14px;  
        background:transparent url('img/tabStripeOff.gif') 0px 0px repeat-x;  
        text-align:center;  
    }  
    .RadTabStrip_Wizard .rtsLevel .rtsLI .rtsSelected .rtsIn  
    {margin-right:-9px;  
        margin-left:15px;  
        line-height: 29px;  
        padding:0 27px;  
        padding-left:14px;  
        background:transparent url('img/tabStripeOn.gif') 0px 0px repeat-x;  
        text-align:center;  
    }  
     
    .RadTabStrip_Wizard .rtsLI .rtsSelected {  
          
        background:transparent url('img/tabSeperatorSelected.gif') 0px 0px no-repeat;  
        line-height: 29px;  
        text-decoration:none;  
    }  
    .RadTabStrip_Wizard .rtsLI .rtsAfter {  
          
        background:transparent url('img/tabSeperatorAfter.gif') 0px 0px no-repeat;  
        line-height: 29px;  
        text-decoration:none;  
    }  
    .RadTabStrip_Wizard .rtsLevel .rtsFirst .rtsSelected {  
          
        background:transparent url('img/tabLeftFirstOn.gif') 0px 0px no-repeat;  
        line-height: 29px;  
        color:#666666;  
        text-decoration:none;  
    }  
    .RadTabStrip_Wizard li a:hover  
    {  
        color: #333;  
    }  
     
     

    Thanks

  9. Hung
    Hung avatar
    11 posts
    Member since:
    Sep 2012

    Posted 27 Jan 2010 Link to this post

    Hi Team

    Can you help me to solve this problem? I'm still waiting for your answer.


  10. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 28 Jan 2010 Link to this post

    Hello Hung,

    I'm attaching your Wizard skin, tested in all browsers with this markup:
    <telerik:RadTabStrip runat="server" Skin="Wizard" EnableEmbeddedSkins="false">
    Let me know if this helps.

    Greetings,
    Kamen Bundev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  11. Hung
    Hung avatar
    11 posts
    Member since:
    Sep 2012

    Posted 29 Jan 2010 Link to this post

    Thank you for your support. But I think that it does not look like the old.

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