Custom Skin Not Working

7 posts, 1 answers
  1. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 21 Nov 2013 Link to this post

    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:
    <%@ 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">
     
    <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>
    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.
  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 21 Nov 2013 Link to this post

    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:

    <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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 21 Nov 2013 Link to this post

    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
  5. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 21 Nov 2013 Link to this post

    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?
  6. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 21 Nov 2013 Link to this post

    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
    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.
  7. Geoff
    Geoff avatar
    53 posts
    Member since:
    Aug 2012

    Posted 25 Nov 2013 Link to this post

    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
  8. Taiseer
    Taiseer avatar
    1 posts
    Member since:
    Mar 2014

    Posted 14 Apr 2014 Link to this post



    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

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