App_Themes stylesheets

Will · August 18th, 2010, 04:09 PM

I am working on a website and making use of the App_Themes folder to apply styles the website.

I had intended to have a separate stylesheet for ie because it doesn't support some of the newer CSS3 techniques that are available.

Normally I would apply this with a conditional comment and it would be fine however as I am using the themes folder the link to the stylesheet is generated automatically and it appears to happen right before the closing </head> tag. The trouble is my ie stylesheet (ie.css) is getting placed before my other stylesheet (screen.css) in the markup which means the ie styles are being overwritten and not applied.

Is there a way to control the order in which the stylesheets are rendered in the markup?

I suspect that they are placed in alphabetical order so I am hoping for a way that doesn't involve re-naming the stylesheets if possible.

Cheers

Imar · August 19th, 2010, 01:45 AM

Hi there,

Yes, AFAIK, it's in alphabetical order. You could indeed rename them (and let the names start with a number for example).
Alternatively, you could manaully include that CSS file in a master page, or use a CSS include to load it from another CSS file.

Cheers,

Imar

Will · August 19th, 2010, 02:33 PM

I figured out my problem and your solution works. I looked at the source code and noticed that I had a link to the same stylesheet twice.. Turns out that in the web.config I had set both the Theme and styleSheetTheme of the <pages /> tag which meant that it was applying the same styles twice.

This meant my previous attempts at adding a conditional comment to the masterpage were failing because the Theme attribute sets the style late in the page life cycle. To fix this I am just using the styleSheetTheme attribute which allows for overriding of it's because it occurs relatively early in the page life cycle which is perfect for what I need.

Thanks for the help.

Imar · August 20th, 2010, 02:07 AM

Yes, that's how they are designed. The styleSheetTheme is meant to supply defaults, while theme is designed to change the design of (mostly existing) sites after everything else, to enforce a global look and feel.

I think your solution makes perfect sense.

Cheers,

Imar