custom CSS after telerik CSS in HEAD section

10 posts, 1 answers
  1. Danny
    Danny avatar
    29 posts
    Member since:
    Feb 2012

    Posted 05 Mar 2012 Link to this post

    Hi,

    Is it possible to determine where the CSS is placed in the HEAD section? Now, all telerik CSS webresources are always placed after my custom css files. I would like to switch this, so that my css files are places after the telerik webresources.

    Thanks in advance.
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 08 Mar 2012 Link to this post

    Hi Danny,

    Can you please clarify why you need the Telerik styles to be placed  after your custom css styles? Meanwhile I would suggest that you use our RadStylesheetManager in the following way:
    <telerik:RadStyleSheetManager runat="server" ID="styleSheetManager1">
                <StyleSheets>
                    <telerik:StyleSheetReference Path="Menu.Green.css" />
                </StyleSheets>
            </telerik:RadStyleSheetManager>

    Regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Danny
    Danny avatar
    29 posts
    Member since:
    Feb 2012

    Posted 08 Mar 2012 Link to this post

    Hi Kate,

    The problem is that lots of our own css styles are overrule by the Telerik components. It woulf make it easier for me if my own stylessheets would be included after the telerik stylesheet.

    How could the RadStyleSheetManager help in this?

    Thanks
    Danny
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 13 Mar 2012 Link to this post

    Hi Danny,

    As far as I understand you are trying to overwrite the styles that are applied to the different Telerik controls. If this is the case I would suggest another approach -  you could get the correct css class selector that is applied to the particular control (for instance you can refer to this help article where you can find a list of these classes for the RadMenu control) and by increasing its specificity apply the desired styles instead of the current ones. Let me know if this is your case or if I am missing something.

    Kind regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Danny
    Danny avatar
    29 posts
    Member since:
    Feb 2012

    Posted 13 Mar 2012 Link to this post

    Hi Kate,

    You're correct about the fact that I want to overrule the Telerik's styles. The solution you provide is the way I'm currently taking care of it, but it would be much easier to overrule if my own CSS is loaded after Telerik's. In that case, my css would always overrule Telerik's.

    Danny
  7. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 15 Mar 2012 Link to this post

    Hi Danny,

    For this purpose you can use the page life cycle and load the your stylesheet on the OnPreRenderComplete stage. For instance using the code below you can get the desired effect:

    protected override void OnPreRenderComplete(EventArgs e)
        {
            Literal link = new Literal();
            link.Text = "<link href=\"StyleSheet.css\" rel=\"stylesheet\" type=\"text/css\" />";
            base.Page.Header.Controls.Add(link);
     
            base.OnPreRenderComplete(e);
        }

    Greetings,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Danny
    Danny avatar
    29 posts
    Member since:
    Feb 2012

    Posted 16 Mar 2012 Link to this post

    Hi Kate,

    Thanks for the information. It almost worked. When I call base.OnPreRenderComplete(e); before base.Page.Header.Controls.Add(link); it's working like I want to.

    Thanks!
  9. Alexanders
    Alexanders avatar
    5 posts
    Member since:
    Dec 2012

    Posted 22 Feb 2013 Link to this post

    How can I call this event if I have MasterPage adn UserControls?
  10. Kit Cat
    Kit Cat  avatar
    8 posts
    Member since:
    Oct 2010

    Posted 07 May 2013 Link to this post

    Hi Alexanders,

    To get the desired effect you need to load the styles just before the page is ready to render the output (as in the OnPreRenderComplete stage of the page life cycle). However, in your case you will need to take into account where you place the user control and where you need to apply the styles - to the master page, to the content page or to the user control. Therefore I believe that the following post explaining what is the flow when a master page and user control is included in such scenario would be very useful for your case - FAQ: Sequence that events are raised for Pages, UserControls, MasterPages and HttpModules

  11. Henrik
    Henrik avatar
    23 posts
    Member since:
    Feb 2012

    Posted 30 Sep 2015 Link to this post

    I know this is an old post, but just for info I did this using jQuery
    I simply pyt this line in the RadCodeBlock of the master page;

    $telerik.$('head').append('<link rel="stylesheet" type="text/css" href="/CSS/Override.css">');

    Couldn't find a way to insert stylesheets last from the master codebehind..
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017