This is a migrated thread and some comments may be shown as answers.

custom CSS after telerik CSS in HEAD section

9 Answers 216 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Danny
Top achievements
Rank 1
Danny asked on 05 Mar 2012, 04:38 PM
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.

9 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 08 Mar 2012, 12:46 PM
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.
0
Danny
Top achievements
Rank 1
answered on 08 Mar 2012, 12:53 PM
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
0
Kate
Telerik team
answered on 13 Mar 2012, 01:03 PM
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.
0
Danny
Top achievements
Rank 1
answered on 13 Mar 2012, 01:40 PM
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
0
Accepted
Kate
Telerik team
answered on 15 Mar 2012, 03:55 PM
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.
0
Danny
Top achievements
Rank 1
answered on 16 Mar 2012, 01:42 PM
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!
0
Alexanders
Top achievements
Rank 1
answered on 22 Feb 2013, 03:16 PM
How can I call this event if I have MasterPage adn UserControls?
0
Kit Cat
Top achievements
Rank 1
answered on 07 May 2013, 01:20 PM
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

0
Henrik
Top achievements
Rank 2
answered on 30 Sep 2015, 10:44 AM
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..
Tags
General Discussions
Asked by
Danny
Top achievements
Rank 1
Answers by
Kate
Telerik team
Danny
Top achievements
Rank 1
Alexanders
Top achievements
Rank 1
Kit Cat
Top achievements
Rank 1
Henrik
Top achievements
Rank 2
Share this question
or