Hi all,
I'm developing a system at present, and one of the requirements is that the site can be resized using a selector. I can see that there have been discussions about this in the past and that telerik recommend that 3 different custom skins be developed and have a switching mechanism to achieve this. My graphic designer isn't very happy about having to make 3 skins, so I'm trying this approach with jquery:
When I do this, the buttons (and tabs) look slightly wrong as demonstrated in the attachments (using the demo site)
I can adjust the padding to the background position of the button and apply a different css class to the body for each zoom level, but this just seems messy.
Is there a fix for this issue, or would you recommend that I force my designer to make 3 skins?
Thanks for your time.
I'm developing a system at present, and one of the requirements is that the site can be resized using a selector. I can see that there have been discussions about this in the past and that telerik recommend that 3 different custom skins be developed and have a switching mechanism to achieve this. My graphic designer isn't very happy about having to make 3 skins, so I'm trying this approach with jquery:
<script type="text/javascript"> $(document).ready(function () { $("#textZoom1").click(function () { $("body").css("zoom", "1"); $.cookie("HRI-ZoomLevel", "1"); }); $("#textZoom2").click(function () { $("body").css("zoom", "1.1"); $.cookie("HRI-ZoomLevel", "1.1"); }); $("#textZoom3").click(function () { $("body").css("zoom", "1.2"); $.cookie("HRI-ZoomLevel", "1.2"); }); var zoomLevel = $.cookie("HRI-ZoomLevel"); if (zoomLevel != null) { $("body").css("zoom", zoomLevel); } }); </script>When I do this, the buttons (and tabs) look slightly wrong as demonstrated in the attachments (using the demo site)
I can adjust the padding to the background position of the button and apply a different css class to the body for each zoom level, but this just seems messy.
Is there a fix for this issue, or would you recommend that I force my designer to make 3 skins?
Thanks for your time.
1 Answer, 1 is accepted
0
Hello,
As discussed earlier, when a sprite image is used it can not be zoomed - the result is the one showed in your attachments.
I would recommend not to force your designer to make more custom skins, but to use CSS3 and button type link button - this way you`ll skip the sprite images and will have more detailed control over all and the zoom will work fine:
Greetings,
Bozhidar
the Telerik team
As discussed earlier, when a sprite image is used it can not be zoomed - the result is the one showed in your attachments.
I would recommend not to force your designer to make more custom skins, but to use CSS3 and button type link button - this way you`ll skip the sprite images and will have more detailed control over all and the zoom will work fine:
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> a.rbLinkButton.RadButton { border-radius: 6px; color: #fff; /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: -moz-linear-gradient(top, #c7c7c7 0%, #6f6f6f 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #c7c7c7 0%,#6f6f6f 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #c7c7c7 0%,#6f6f6f 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #c7c7c7 0%,#6f6f6f 100%); /* IE10+ */ background: linear-gradient(top, #c7c7c7 0%,#6f6f6f 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7c7c7', endColorstr='#6f6f6f',GradientType=0 ); /* IE6-8 */ } a.rbLinkButton.RadButton:hover { color: #000; /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: -moz-linear-gradient(top, #ffe68b 0%, #fff3c9 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #ffe68b 0%,#fff3c9 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffe68b 0%,#fff3c9 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffe68b 0%,#fff3c9 100%); /* IE10+ */ background: linear-gradient(top, #ffe68b 0%,#fff3c9 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe68b', endColorstr='#fff3c9',GradientType=0 ); /* IE6-8 */ } a.rbLinkButton.RadButton:active { color: #000; /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: -moz-linear-gradient(top, #f8d04c 0%, #feed76 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #f8d04c 0%,#feed76 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f8d04c 0%,#feed76 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f8d04c 0%,#feed76 100%); /* IE10+ */ background: linear-gradient(top, #f8d04c 0%,#feed76 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8d04c', endColorstr='#feed76',GradientType=0 ); /* IE6-8 */ } </style></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <telerik:RadButton ID="rb1" runat="server" ButtonType="LinkButton" Text="Link Button" Height="35" Skin="Default"> </telerik:RadButton> </form></body></html>Greetings,
Bozhidar
the Telerik team
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 their blog feed now.