RadCalendar Q3 2008 Skins Available for Download

[Telerik Admin]

Hello,

Please find attached all RadCalendar skins, which were embedded in the Q3 2008 RadControls version. They have been adapted to be fully compatible with the Q1 2009 release. In order to use them as non embedded skins, you should do the following:

1. copy the corresponding CSS file and images to your website, the exact location depends on your preference;
2. register the CSS file manually with a <link> tag or via an ASP.NET theme;
3. set EnableEmbeddedSkins="false" to the control, which will use the non-embedded skin;

If you are using date/time pickers, you also need the skins for RadInput:

RadInput Q3 2008 Skins

For more information about RadControls' skinning mechanism and using non-embedded skins, please refer to:

How skins work

Skin registration

Using skins in ASP.NET themes

Disabling embedded resources

An online demo, which shows how to use various RadControls with non-embedded skins is available at:

Custom skins demo

Let us know if you have any questions.


Regards,
the Telerik team

[KlaatuMcGoo]

These 4 links in your post are broken, guys:
How skins work
Skin registration
Using skins in ASP.NET themes
Disabling embedded resources
Please fix them.

[Sebastian]

Hi KlaatuMcGoo,

Thank you for the note - the links has already been fixed.

Best regards,
Sebastian
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Will]

There is a bug in the way that the current controls are rendered.  The attributes and styles specified at design time are rendered on the wrong controls.  They are being rendered on controls that are higher up in the hierarchy, and allows the embedded skin stylesheets to always override your inline settings.

For example, if I set the ForeColor of the OutOfRangeDayStyle  to #ff0000 (red) in a calendar or date picker control, it will never render as red as the style attribute is being rendered on the table cell, which contains a span tag that contains the day number.  On selectable dates the span tag contains an a tag that contains the day number.  The skins specify the entire heirarchy (i.e. ".RadCalendar_<Skin> .rcMain .rcOutOfRange span") and will always override the color setting.  This holds true for almost all of the settings.

Simply setting EnableEmbeddedSkins="False" does not help either as the attributes are still rendered in the wrong place.  The only current work around is to create custom skins, which is getting way out of hand when you have multiple ways that you need to have items rendered.

[Dimo]

Hello Bill,

The observed limitation indeed exists. It is done on purpose and is mentioned in our documentation:

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

You can use the following CSS rule as a workaround in your case:

table.RadCalendar_<Skin>  .rcMain  .rcOutOfRange  span
{
      color: inherit;
}


Greetings,
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.

[Will]

Hi Dimo,

I did read that page, but it doesn't offer any options on how to work around the issue.  I thought about doing something like you describe, but it won't work if you are using styleSheetThemes as the Rad style sheet link is rendered after the links for the stylesheets of the theme.  The described method will only work when using basic themes, which is not an option.  Therefore, the only viable option is to create custom skins until the issue is corrected.

Take it easy,
Bill

[Dimo]

Hello Bill,

You don't have to create a whole custom skin.

I recommend you to make yourself familiar with the concept of CSS specificity. This will help you provide CSS rules, which will successfully overridde the embedded RadCalendar styles:

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

(note the 3 links at the bottom of the article)

The CSS rule in my previous post is what you need - the CSS specificity is higher than the one in the skin and the custom CSS rule will take precedence over the CSS rule in the skin.

<%@ Page Language="C#" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls for ASP.NET AJAX</title>
<style type="text/css">

table.RadCalendar_Default  .rcMain  .rcOutOfRange  span
{
      color: inherit;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadCalendar ID="c1" runat="server" RangeMinDate="2009/08/10" RangeMaxDate="2009/08/20">
    <OutOfRangeDayStyle ForeColor="Red" />
</telerik:RadCalendar>

</form>
</body>
</html>

All the best,
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.

[Will]

Hey Dimo,

Thanks for info.  I wasn't aware of the "specificity" rules as they appear to have been left out of all the documents that I have ever read on CSS.  I never fully read the W3C spec as it's way to large.  While I wasn't able to use the example above, using the CssClass option with hard coded values instead of inherit, works.  Using inherit forces us to make changes in 2 different places, and I believe that it violates the rules for ASP.NET control design.  If I remember correctly, settings in the ASP.NET control tags are required to override all other settings, no matter what.  This is a basis for ASP.NET Skins to work.  Anywho, we can use the stylesheet only work around.

Thanks,
Bill

[Dimo]

Hello Bill,

You are right that generally, when one sets some property, it is expected to work. However, due to the specifics of our controls' HTML output and styling, the level of abstraction of a control's element (e.g. RadCalendar day) can not always be replicated in its rendering.

In this particular case, a RadCalendar day renders as two nested HTML elements. Some of the styles, which you might want to set declaratively (ForeColor, BackColor, Borders, etc), should be applied to the outer element in order to work, and some to the inner element, and some can be applied to any of them. Implementing such a declarative styling logic is not feasible (especially when the HTML rendering evolves and changes in time). This is the reason why the observed discrepancy exists.

As for CSS specificity, this is the most important concept of the CSS language in general, eventhough it may not be described with this term everywhere.

Kind regards,
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.