custom CSS after telerik CSS in HEAD section

[Danny]

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.

[Kate]

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

[Danny]

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

[Kate]

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

[Danny]

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

[Kate]

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

[Danny]

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!

[Alexanders]

How can I call this event if I have MasterPage adn UserControls?

[Kit Cat]

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

[Henrik]

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