CSS overriding

8 posts, 0 answers
  1. Shabbir
    Shabbir avatar
    19 posts
    Member since:
    Dec 2008

    Posted 13 Nov 2009 Link to this post

    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.
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 16 Nov 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rob Teegarden
    Rob Teegarden avatar
    25 posts
    Member since:
    Feb 2008

    Posted 21 Feb 2010 Link to this post

    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?

  5. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 23 Feb 2010 Link to this post

    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.
  6. Rob Teegarden
    Rob Teegarden avatar
    25 posts
    Member since:
    Feb 2008

    Posted 24 Feb 2010 Link to this post

    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
  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 25 Feb 2010 Link to this post

    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.
  8. Rob Teegarden
    Rob Teegarden avatar
    25 posts
    Member since:
    Feb 2008

    Posted 25 Feb 2010 Link to this post

    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
  9. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 02 Mar 2010 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017