Hi,
I'm a total noob so I guess I'm making a silly fundamental error in the way I'm trying to apply a custom skin. I used the Visual Style Builder to create a skin (based on Metro) for a Grid and a few other controls but when I applied it, every control was rendered transparent and without any borders. Some control elements (e.g. the button by the calendar control) were completely invisible although still functioning.
After this, I scaled back my attempt to just trying to skin a button. Again, I used the Visual Style Builder to create a skin (based on Metro), the only alteration I made was to show an image on hover. I saved the css file and associated folders to my App_Themes folder and created a page that look like this:
When I ran the page, I got exactly the same problem as before i.e. the button text was just there on its own. There was no border around the button and the hover image didn't show.
I looked in the folders where the css file is and all seems in order. The image I wanted is there as are the various gifs and sprites.
Any help would be much appreciated and apologies if I've missed the obvious.
I'm a total noob so I guess I'm making a silly fundamental error in the way I'm trying to apply a custom skin. I used the Visual Style Builder to create a skin (based on Metro) for a Grid and a few other controls but when I applied it, every control was rendered transparent and without any borders. Some control elements (e.g. the button by the calendar control) were completely invisible although still functioning.
After this, I scaled back my attempt to just trying to skin a button. Again, I used the Visual Style Builder to create a skin (based on Metro), the only alteration I made was to show an image on hover. I saved the css file and associated folders to my App_Themes folder and created a page that look like this:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MainMenu.aspx.vb" Inherits="user_MainMenu" %><%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton" EnableEmbeddedSkins="false" Skin="RAMTrackHoverBtn"> </telerik:RadButton> </form></body></html>I looked in the folders where the css file is and all seems in order. The image I wanted is there as are the various gifs and sprites.
Any help would be much appreciated and apologies if I've missed the obvious.
6 Answers, 1 is accepted
0
Accepted
Hi,
Looking at your code I do not see the CSS declaration that links to the custom CSS files and resources (sprites, background images etc.). Usually they are placed in you project in a directory called Skins, and Inside that directory you could have different custom Skin: Skins>CustomSkin1...Inside the CustomSkin1 directory are placed the CSS files and the folders for the specific controls files. Attached is skins.gif showing an example of the file structure. So, when you have all the necessary CSS files and resources, you could drag and drop the CSS files to the head section of your document in order the custom skin to be loaded:
The code above is a simple example showing the proper configuration to run a custom skin. Note that the custom skin CSS file could be placed in a different file structure, and that's why I suggest to use drag and drop to avoid some broken url paths.
Regards,
Bozhidar
Telerik
Looking at your code I do not see the CSS declaration that links to the custom CSS files and resources (sprites, background images etc.). Usually they are placed in you project in a directory called Skins, and Inside that directory you could have different custom Skin: Skins>CustomSkin1...Inside the CustomSkin1 directory are placed the CSS files and the folders for the specific controls files. Attached is skins.gif showing an example of the file structure. So, when you have all the necessary CSS files and resources, you could drag and drop the CSS files to the head section of your document in order the custom skin to be loaded:
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <link rel="stylesheet" type="text/css" href="Skins/CustomSkin/CustomSkin.css" /></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="sm1" runat="server" /> <telerik:RadButton runat="server" Text="Button" EnableEmbeddedSkins="false" Skin="CustomSkin" /> </form></body></html>The code above is a simple example showing the proper configuration to run a custom skin. Note that the custom skin CSS file could be placed in a different file structure, and that's why I suggest to use drag and drop to avoid some broken url paths.
Regards,
Bozhidar
Telerik
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 the blog feed now.
0
Geoff
Top achievements
Rank 1
Rank 1
answered on 21 Nov 2013, 02:41 PM
Bozhidar,
I was just coming back to the forum to say that I had discovered my own problem but you beat me to it. Thank you for your prompt response, I now have it working fine. I knew I'd done something daft. Thanks for the other tips too.
Regards
Geoff
I was just coming back to the forum to say that I had discovered my own problem but you beat me to it. Thank you for your prompt response, I now have it working fine. I knew I'd done something daft. Thanks for the other tips too.
Regards
Geoff
0
Geoff
Top achievements
Rank 1
Rank 1
answered on 21 Nov 2013, 03:03 PM
Actually that wasn't the only problem. The css file downloaded from the Visual Style Builder has about a zillion property settings on the first line. This seems to cause problems with applying the styles. After I did a search and replace to break everything up onto separate lines, it all worked fine. What's going on there then?
0
Hello,
Well, I am not sure what happened with your custom skin and CSS file, but if you could send me a piece of code, probably I will be able to find out what it is. Note that it does not matter if the CSS is placed inot single or multiline. The most important is the rules to be properly closed.
Regards,
Bozhidar
Telerik
Well, I am not sure what happened with your custom skin and CSS file, but if you could send me a piece of code, probably I will be able to find out what it is. Note that it does not matter if the CSS is placed inot single or multiline. The most important is the rules to be properly closed.
Regards,
Bozhidar
Telerik
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 the blog feed now.
0
Geoff
Top achievements
Rank 1
Rank 1
answered on 25 Nov 2013, 11:50 AM
Bozhidar,
Thanks for your reply. I have just tried reinstating the original css file and it appears to be working fine, so clearly I had some other problem that was coincidently cleared when I changed the css file. Sorry to waste your time.
Regards
Geoff
Thanks for your reply. I have just tried reinstating the original css file and it appears to be working fine, so clearly I had some other problem that was coincidently cleared when I changed the css file. Sorry to waste your time.
Regards
Geoff
0
Taiseer
Top achievements
Rank 1
Rank 1
answered on 14 Apr 2014, 08:58 PM
Hi Bozhidar,
Our company is doing a lot of testing on Telerik now to get
the POC.
All the functionalities are great. However I have a problem in the customized
skin.
What if we would like to apply the customized skin across
the board (all of the controls), do I have to link the style sheets for each
and every control in the pages that are using the controls?
I read on your website that I have to add the following lines
in the config file in order for the skin to take effect across all of the
controls, but unfortunately it didn’t work. I was referring to this page.
http://www.telerikwatch.com/2009/05/telerik-visual-style-builder-for-aspnet.html
<add key="Telerik.Skin" value="skin03" />
<add key="Telerik.EnableEmbeddedSkins" value="false" />
Thanks
Taiseer