RadButton and Overriding Default styles

6 posts, 0 answers
  1. Alexander
    Alexander avatar
    1 posts
    Member since:
    Jul 2013

    Posted 30 Jul 2013 Link to this post

    I am new to Telerik and am struggling with grasping how the styling works with regard to my project.  

    I have a project using master pages, themes and skins for the various controls (including RadButton).  I tried the example on 'Creating a Custom Skin for RadButton' and still found that not all my changes had overridden the Default styles - as I checked it with Firfox's  Firebug tool and kept seeing WebResource.axd at the top.  How does the WebResource.axd file manage to override some of the styles if I am already got my own custom skin file?  Any help would be appreciated.  

    Thanks

    Alexander
  2. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 01 Aug 2013 Link to this post

    Hi,

    RadButton uses two stylesheets - the first one is the base stylesheet which is common for all skin is the Base stylesheet which defines the styles which are common for all skins such as padding, margin, gloats, display states etc. In common case, the skin CSS file should only contain styles defining text, border, background colors and sprite images. Of course, there are Skins which design is different than the common - Metro, MetroTouch, Silk, Glow - in that case we need to override some styles coming from the Base CSS inside the Skin file.

    As the Base styles are loaded after the Skin files, they will override the Skin CSS if there are same styles applied to the same element.

    In order to make something from the Skin file not to be overridden by the Base styles you need to make the Skin CSS selectors with higher specificity.

    I don't know what are the issues with your custom skin, so in order to provide further help we will need your custom styles and description of the issues you are experiencing.

    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. Dustin
    Dustin avatar
    2 posts
    Member since:
    Nov 2014

    Posted 21 Nov 2014 in reply to Bozhidar Link to this post


    As the Base styles are loaded after the Skin files, they will override the Skin CSS if there are same styles applied to the same element.

    In order to make something from the Skin file not to be overridden by the Base styles you need to make the Skin CSS selectors with higher specificity.
     


    This seems like really terrible design. Why would you not load the default styles first, and then the custom theme files after so that the latter would override the defaults??? That's the whole point of the cascade.

    Or even better, just include all styles in the skin so you don't need to load everything twice.

    Confused.....
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 26 Nov 2014 Link to this post

    Hi Dustin,

    Please find my comments regarding the order of the Telerik UI control's CSS files loading below:

       A) For Embedded skins:
                1) The base style sheet loads initially from the webresource in the head tag.
                2) The skin specific style sheet loads after that from the webresource in the head tag.

       B) For Custom skins:
               B1) If you place the custom skin specific style sheet in the head tag:
                         1) The custom skin specific style sheet loads initially from the head tag.
                         2) The base style sheet loads after that from the webresource in the head tag.
               B2) If you place the custom skin specific style sheet in the end of the form tag:
                         1) The base style sheet loads initially from the webresource in the head tag.
                         2) The custom skin specific style sheet loads after that from the form tag.                

    Therefore in order to load the skin specific file after the base style sheet you can place it in the form or manually load it in the head after the webresource, for example in the Sys.Application.add_load() event.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Dustin
    Dustin avatar
    2 posts
    Member since:
    Nov 2014

    Posted 02 Dec 2014 in reply to Danail Vasilev Link to this post

    Thank you for the response. I sent this to my developer, hopefully it makes sense to him...

    To me it raises more questions than it answers.

    1. What is the difference between an "Embedded Skin" and a "Custom Skin," and why this distinction?
    2. Still doesn't make sense why for Custom skins the base stylesheet loads after the custom one in the head tag, thus overriding the custom styles
    3. Does not make sense why the order is reversed for "Embedded" vs "Custom" -- this adds needless complexity and confusion
    4. When you say "place [the custom skin stylesheet] in the form" do you mean an actual html form tag? (I'm not familiar with this practice so just wanted to verify...)

    "... or load it in the head after the webresource, for example in the Sys.Application.add_load() event" -- this means nothing to me as I am just trying to create static mockups but hopefully the developers will be able to make use of this, thank you.

    In any case it seems like what should be an extremely simple process of creating a custom theme/skin is made way more difficult than it needs to be...

    There should just be a way to download a .zip with an html document (showing all the controls), all required stylesheets (linked in the correct order), and all required scripts to make the controls function in the browser. Simple.

    We have wasted a lot of hours because of all this confusion.

    Thank you for listening and sorry for complaining but I am frustrated.

    dustin
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 05 Dec 2014 Link to this post

    Hi Dustin,

    Straight to your questions:
        1. What is the difference between an "Embedded Skin" and a "Custom Skin," and why this distinction:

    - "Embedded Skins" are the built-in skins provided by Telerik. Since Q3 2011 they are embedded in the Telerik.Web.UI.Skins.dll assembly as web resources (they were previously in the Telerik.Web.UI.dll assembly). To use a built-in skin the developer only needs to set the Skin property of the control.
    - "Custom Skins" are created by the developer. They are not embedded in the Telerik.Web.UI assembly, so the control cannot register them automatically. If you use a custom skin you need to set the EnableEmbeddedSkins property of the control to false, as well as set the Skin property to the name of the custom skin and register the corresponding custom skin styles.

    More information on the matter is available in the
    How Skins Work help article.

        2. Why for Custom skins the base stylesheet loads after the custom one in the head tag, thus overriding the custom styles
    .  If you disable only the skin specific styles, and place the custom one in the head tag, then the web resource will register the base style sheets after the custom one that is already declared. Actually you can disable both - the skin specific and the base styles through the EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" properties and load them manually in the desired ordered. More information is available in the following articles:

        3. Does not make sense why the order is reversed for "Embedded" vs "Custom" -- this adds needless complexity and confusion.
    Please refer to the above answer for details.
       
       4. When you say "place [the custom skin stylesheet] in the form" do you mean an actual html form tag?

    This is what I have mentioned initially, however, although placing link tags inside the form element  takes effect it is not a valid HTML, so you can omit this answer.

    I have also created a VS example that shows how to use a custom skin for the RadButton and load manually its base and skin specific styles in the head tag. This sample skin is created out of an existing one with the free Visual Style Builder tool. I can also suggest that you examine the following resource on creating custom skins:
        - Controlling Visual Appearance
        - Visual Style Builder Documentation
        - Visual Style Builder Tool
        - Creating a Custom Skin for RadButton

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

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