Skinning user controls via radskinmanager

[parag]

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 

[Tsvetina]

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

[Iana Tsolova]

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