Where is Wizard skin after update to Q3 2009?

[Hung]

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

[Schlurk]

You should be able to try the Skin Converter to see if you can get this skin in the new format :)

[Hung]

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.

[Schlurk]

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 { display: inline-block; }
*+html .RadTabStripVertical { display: inline; }
* html .RadTabStripVertical { display: inline; }

.RadTabStrip .rtsLevel
{
    clear:both;
    overflow: hidden;
    width: 100%;
    position: relative;
}

* html .RadTabStrip .rtsLevel
{
    position:static;
}

*+html .RadTabStrip .rtsLevel
{
    position:static;
}

.RadTabStrip .rtsScroll
{
    width: 10000px;
    whitewhite-space:nowrap;
}

/* clear float; for IE - inline-block display */
.RadTabStripVertical:after,
.RadTabStrip .rtsLevel .rtsUL:after,
.RadTabStripVertical .rtsLevel .rtsUL:after
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.RadTabStrip .rtsUL
{
    margin:0;
    padding:0;
    overflow: hidden;
    float:left;
}

.RadTabStrip_rtl .rtsUL
{
    float: rightright;
}

.RadTabStripVertical .rtsLevel
{
    overflow: hidden;
    height: 100%;
}

.RadTabStrip .rtsLI
{
    overflow: hidden;
    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
{
    float: left;
    display: -moz-inline-block;
    display: inline-block;
    list-style-type:none;
    overflow: hidden;
}

.RadTabStrip .rtsLink,
.RadTabStripVertical .rtsLink
{
    display:block;
    outline:none;
    cursor: pointer;
}

.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-align: center;
}

.RadTabStrip .rtsImg
{
    border: none;
}
.RadTabStrip .rtsImg+.rtsTxt { display: -moz-inline-box; }
.RadTabStrip .rtsTxt { display: inline-block; }

.RadTabStrip .rtsRight .rtsUL
{
    float:rightright;
}

.RadTabStrip .rtsCenter .rtsUL
{
    display: -moz-inline-box;
    display: inline-block;
    float:none;
}

.RadTabStrip .rtsBreak
{
    height: 0;
    width: 0;
    font-size: 0;
    line-height: 0;
    display: block;
    clear: left;
    margin-top: -2px;
}

* html .RadTabStrip .rtsCenter .rtsUL { display: inline-block; }
* html .RadTabStrip .rtsCenter .rtsUL { display: inline; }

*+html .RadTabStrip .rtsCenter .rtsUL { display: inline-block; }
*+html .RadTabStrip .rtsCenter .rtsUL { display: inline; }

.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
    {
        width: auto;
    }

    :root .rtsLI
    {
        float:none;
        display: inline-block;
    }
}

.RadTabStripVertical .rtsUL .rtsLI
{
    line-height: 0;
    font-size: 0;
}

.RadTabStripVertical .rtsUL li.rtsSeparator
{
    display: none;
}



.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') rightright 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;
}

[Hung]

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?

[Kamen Bundev]

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.

[Hung]

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

[Hung]

Hi Team

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

[Kamen Bundev]

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.

[Hung]

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

Thank anyway