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
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
9 Answers, 1 is accepted
0
Schlurk
Top achievements
Rank 2
answered on 22 Jan 2010, 05:55 PM
You should be able to try the Skin Converter to see if you can get this skin in the new format :)
0
Hung
Top achievements
Rank 1
answered on 22 Jan 2010, 06:28 PM
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 !!!
Thanks.
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; |
} |
0
Schlurk
Top achievements
Rank 2
answered on 22 Jan 2010, 06:33 PM
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; |
} |
0
Hung
Top achievements
Rank 1
answered on 22 Jan 2010, 06:43 PM
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?
0
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.
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.
0
Hung
Top achievements
Rank 1
answered on 25 Jan 2010, 01:27 PM
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
0
Hung
Top achievements
Rank 1
answered on 27 Jan 2010, 04:13 PM
Hi Team
Can you help me to solve this problem? I'm still waiting for your answer.
Can you help me to solve this problem? I'm still waiting for your answer.
0
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.
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.
0
Hung
Top achievements
Rank 1
answered on 29 Jan 2010, 06:28 PM
Thank you for your support. But I think that it does not look like the old.
Thank anyway
Thank anyway