Skinning user controls via radskinmanager

3 posts, 0 answers
  1. parag
    parag avatar
    5 posts
    Member since:
    Jul 2011

    Posted 03 Sep 2011 Link to this post

    I am creating 2 web server controls for our project using telerik asp.net ajax controls. Controls are derived from ISkinnableControl interface. 

    I have created skin by  modifying exisiting skin file css classes to build our skin. I want to use custom prefixes for css (i,e myCalendar).  Reason is that  same telerik control is used in both user controls.If I use telerik style class prefixes there could be clash in style.

    .myCalendar_<skinname> .rcTitlebar table
    {
        
    table-layout: auto;
        
    width: 100%;
        
    border-collapse: separate;
        
    border: 0;
        
    border-style: none;
    }




    //code to set css to control (inside userconctrol.cs)

     
    protected override void CreateChildControls()
            {  
           
    base.CreateChildControls(); 
            _calendar =
    new RadCalendar();
            _calendar.EnableEmbeddedSkins =
    false;
    _calendar.EnableEmbeddedBaseStylesheet =
    false;
            _calendar.CssClass =
    "myCalendar myCalendar_" + Skin;
            _calendar.Skin = Skin;
    ...
    }





    On Aspx page I have RadSkinManager to apply skin to control instances. 
    To Apply skin, Currently I have 2 options. I have to do it for each control instance.
    1. Set it in markup at design time
    2. Set it via page_preinit event.


    How can I achieve following
    Use custom preffixes in css stylesheets. When RadSkinManager skin changes, it should automatically apply it to control instances. I don't want user to register control instances in radSkinmanager targetControls collection / assign skin  it to indivisual control instances.  

    Note: I am storing css files in  library assembly and using stylesheetmanager to load them in application.

    My problem is similar to 
    http://www.telerik.com/community/forums/aspnet-ajax/skin-manager/generic-code-to-apply-skin-to-all-user-controls-on-page.aspx

    Thanks & Regards
    Parag 
  2. Tsvetina
    Admin
    Tsvetina avatar
    1875 posts

    Posted 07 Sep 2011 Link to this post

    Hello Parag,

    It seems that you have opened a forum and support thread on the same issue. I will post the answer from the ticket here as well but if you have any comments on it, please, write them in the support ticket, so that we avoid duplicate posts on that matter.

    What you are trying to achieve with the CSS prefixes would require a lot of customizations (including client scripting) and may not be worth the efforts having in mind that any possible clashes in the CSS could easily be fixed using only CSS (selectors with higher specificity). Furthermore, we could not give you working code and instructions for your specific scenario without having a runnable proejct to work on, as this depends on the site implementation.

    That is why I would suggest that you only change the Skin name and do not change the control name in the CSS selectors. This way you could also easily make the SkinManager work with your custom skin. Instructions on using custom skins with RadSkinManager are provided in this article:
    http://www.telerik.com/help/aspnet-ajax/radskinmanager.html

    Then, if you encounter styles from the base stylesheet overwriting styles from the custom skin, you could simply increase the specificity of the respective selector in the skin file or in an external stylesheet.


    Kind regards,
    Tsvetina
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 07 Sep 2011 Link to this post

    Hi Parag,

    Could you please specify that if you set Skin declaratively to your control and register the css files properly, the desired Skin is applied? Also does your custom Skin assembly follow the requirements listed here?

    Greetings,
    Iana
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

Back to Top