Using the StyleSheetManager with overridden css files for a built-in skin

13 posts, 0 answers
  1. DonKitchen
    DonKitchen avatar
    92 posts
    Member since:
    Jul 2007

    Posted 26 Jan 2009 Link to this post

    I am wondering what I need to do to have my 4 overridden CSS files for the built in Web20 skin be picked up by the RadStyleSheetManager control. 

    For example, I have put 4 CSS files in my site's skin folder (Combobox.Web20.css, Grid.Web20.css, Menu.Web20.css and TabStrip.Web20.css).  For each of those controls I have set the EnableEmbeddedSkins="false" property so that the site by default uses my modified versions rather than the built-in ones.  (by the way, in case it matters, I am defining my skin in the web.config file via the <add key="Telerik.Skin" value="Web20" /> key in my AppSettings)

    I've read the information in Including custom StyleSheets as WebResources to RadStyleSheetManager and from what I can tell that seems to apply more if you're using a complete custom skin vs. overridding a few of the controls like I am.  Can you tell me if I should follow the instructions in the above link to get these 4 files included in my other single request or if there is some other way to handle this?

    Thanks in advance!
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 26 Jan 2009 Link to this post

    Hello DonKitchen,

    RadStyleSheetManager does not combine static (external) resources. It can combine only embedded ones.

    Best wishes,
    Albert
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. DonKitchen
    DonKitchen avatar
    92 posts
    Member since:
    Jul 2007

    Posted 26 Jan 2009 Link to this post

    I gathered that based on the online support example.  My question is more along the lines of can those static "override" style sheets get put into an external resource like the online help example and still operate properly with the built-in Web20 skin?
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 26 Jan 2009 Link to this post

    Hello DonKitchen,

    To override a skin CSS rule you should make sure that:
    1. Your CSS file is rendered in the page and the path is correct
    2. The CSS rules in your file are more specific than the one used by the built-in skin. You can use the !important modifier to force your CSS setting to override the built-in one. You can check this help article for additional information.

    Regards,
    Albert
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. DonKitchen
    DonKitchen avatar
    92 posts
    Member since:
    Jul 2007

    Posted 26 Jan 2009 Link to this post

    Thanks but I don't think that you addressed my question still.

    Can I take my 4 override css files:

    • Combobox.Web20.css
    • Grid.Web20.css
    • Menu.Web20.css
    • TabStrip.Web20.css

    and put them into my own custom assembly (as described here http://www.telerik.com/help/aspnet-ajax/radstylesheetmanager.html under

    Including custom StyleSheets as WebResources to RadStyleSheetManager


    and have them still work fine with the built-in skin that I'm using now?

    I would be moving them OUT of the App_Themes folder and into the custom assembly.  Is that going to work since they're Web20 skin style sheets?
  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 27 Jan 2009 Link to this post

    Hi Don,

    Yes, your customized Web20 skins will work if you register them with RadStyleSheetManager.

    However, in order to prevent RadControls from registering automatically their native embedded Web20 skin, you should set EnableEmbeddedSkins="false".

    On a side note, using custom skins with the same name as native embedded skins is not very recommended, as it might lead to CSS collisions and unexpected visual appearance (for example if you use a customized and a native Web20 skin on the same page). This might happen in specific scenarios only, but you should keep in ti mind in case something "strange" happens.

    Best wishes,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. DonKitchen
    DonKitchen avatar
    92 posts
    Member since:
    Jul 2007

    Posted 27 Jan 2009 Link to this post

    Is it possible for me to put the contents of these 4 files that I've created to override the built-in Web20 functionality (with EnableEmbeddedSkins="false") into my site's main CSS file (Default.css) and have it all still work?

    • Combobox.Web20.css
    • Grid.Web20.css
    • Menu.Web20.css
    • TabStrip.Web20.css

    My ultimate goal is to have as few HTTP requests as possible.  And since I'm already serving up my Default.css file, which can't be included in the StyleSheetManager's request I could possibly accomplish the same end result if those 4 files' contents get consolidated into my other style sheet.
  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 27 Jan 2009 Link to this post

    Hello Don,

    Yes, this is possible. However, since embedded skins are registered after non-embedded skins, you will have to make sure that your custom CSS selectors have higher specificity than the embedded CSS rules' selectors. Here is why:

    http://blogs.telerik.com/dimodimov/posts/08-06-17/How_To_Override_Styles_in_a_RadControl_for_ASP_NET_AJAX_Embedded_Skin.aspx


    Greetings,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  10. DonKitchen
    DonKitchen avatar
    92 posts
    Member since:
    Jul 2007

    Posted 27 Jan 2009 Link to this post

    If that's the case what's the point of the EnableEmbeddedSkins="false" property?
  11. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 28 Jan 2009 Link to this post

    Hi Don,

    EnableEmbeddedSkins="false" allows you to use a fully custom skin for a RadControl and register it in a preferred fashion. This makes things a lot easier and convenient for advanced CSS developers. Otherwise you have to override an embedded skin, which is not very ellegant if you do it a lot.

    Sincerely yours,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  12. Chris
    Chris avatar
    4 posts
    Member since:
    May 2008

    Posted 16 Mar 2009 Link to this post

    Question, in order to have a fully customized skin, do I need to add all the skin files to an assembly and changes the names?  I'm not sure if there is a "macro" or other automated method of creating a "skin assembly" or do you have to all all the assembly attributes for all 60+ files by hand?
  13. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 17 Mar 2009 Link to this post

    Hello Chris,

    No, it is not required to have all the custom skin's CSS and images embedded in an assembly, although there certainly are advantages if you do it that way.

    The most common scenario when using custom skins is to place the CSS files and images in a folder of your preference and register the CSS files manually with <link> tags. A lot of people also place the custom skins in ASP.NET themes:

    http://www.telerik.com/help/aspnet-ajax/themeshowto.html

    I am afraid there is no automated method of adding embedded file references to a C# / VB file.

    Let us know if you need more information.

    Best wishes,
    Dimo
    the Telerik team


    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  14. Chris
    Chris avatar
    4 posts
    Member since:
    May 2008

    Posted 17 Mar 2009 Link to this post

    I wanted my custom skin to be able to take advantage of the RadStyleSheetManager script combining feature.  I understand it has to all be in an assembly for that to work..

    BTW, I wrote a VS macro to add all the css the image files as embedded resources and add the WebResources attributes as well.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017