CSS overriding

[Shabbir]

We are trying to override the redscheular CSS througn this line of code.
<link id="stylesheetpath" href="css/RadScheduler.css" runat="server" type="text/css" rel="stylesheet"/>
and we successed but when first partial post back occurs through update panel of asp.net AJAX due to some bug CSS resets and after 2nd partial post all things running fine.

We are waiting for your immediate response.

[Peter]

Hello Shabbir,

Please, turn off the automatic loading of RadScheduler's base stylesheet with"

EnableEmbeddedBaseStylesheet="false"

Regards,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Rob Teegarden]

I know this is an older post.  But I am having issues with overriding CSS.

I am using the template "Office2007" if I set EnableEmbeddedBaseStylesheet to false, then it is only a partial view, just changes a few things based on the Office2007 styles.   So what I want to do is change the font size on the .rsApt

If I choose Office2007 and include the style in the page (like below) as an include it is getting overridden by .RadScheduler which os the embedded fonts. 

I guess the real question is - How do I override a selective few styles when using a embeded skin?  Can I do it without taking the entire skin directory and modifying there?

I Include this:

.rsApt {     font-size:9px;     line-height:11px; }

Overridden by this:

.RadScheduler .rsApt {     font-size:11px;     line-height:14px; }

Overridden by this:

[Peter]

Hi Rob,

You need to increase the specificity of your css selector. For example, try the following:

.rsContent .rsWrap .rsApt
       {
           font-size:9px;
       }

Best wishes,
Peter
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Rob Teegarden]

That did the trick.  How do I know what the specificity of my css selector needs to be?  I am using Firebug to troubleshoot, but it doesn't seem to give the entire path.

Thanks

[T. Tsonev]

Hi Rob,

The specificity needs to be higher than the selector that is currently active. Once you identify it you can use this handy cheat-sheet to tweak the specificity of your selectors:

http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg

Sincerely yours,
Tsvetomir Tsonev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Rob Teegarden]

Hello,

i understand how it works, I usually use this as the guide: http://htmldog.com/guides/cssadvanced/specificity/

I admit, your example is pretty nice too.  I guess what I was wondering is how to identify it, like the case below.  I knew that .rsApt had to be modified, but how do I figure out the other two need to be added too?

.rsContent .rsWrap .rsApt

[Peter]

Hi Rob,

In general, you locate the element which you need to target - in this case the div with class rsApt. Then you find the element which wraps your target element and get its css class. Then you find the next wrapper and get its css class and so on till you hit your needed specificity. In this case the div with rsContent wraps that with rsWrap which wraps that with rsApt.



Regards,
Peter
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.