Include stylesheet based on URL

Topics: Customizing Orchard, Writing themes
Dec 18, 2013 at 10:03 PM
Hello,

I'm a designer jumping back in to working with development in Orchard and have a project where I need to load a different stylesheet depending on which page/section of the site is currently being viewed. The whole site shares the same Layout.cshtml file and one main stylesheet, but if viewing the home page it also needs to load "homepage.css" or if it's the about page is needs to load "about.css".

Is there a way do do this in Orchard via if statements, or would it need to be accomplished using a Layout-url override for each section?

Thank you in advance for any help or direction!
Dec 19, 2013 at 7:02 PM
Edited Dec 19, 2013 at 7:47 PM
I can think of 2 ways to do this off the top of my head:
  1. It seems like the content you're referring to are just pages. You could simply add a CSS include at the top of the content.
<link rel="stylesheet" type="text/css" href="homepage.css" media="screen" />
  1. In Layout.cshtml file, test the URL string before doing an include
if (Request.RawUrl == "/") {
    Style.Include("homepage.css")
}
else if (Request.RawUrl == "/about") {
    Style.Include("about.css")
}
too funny-codeplex is messing up my 1. and 2. step numbers
Dec 19, 2013 at 7:51 PM
Hmm, I had actually tried a slightly different approach to your second example yesterday and it wasn't detecting the URL string/applying the stylesheet. I just gave it another go using the code above with no success unfortunately!

Every section of the site is using the same Layout.cshtml file for a basic layout (header with nav, content, sidebar, footer) and I have a main.css file that I'm including at the start of the Layout.cshtml file which will be applied to every page:
@{
    Style.Include("general.css");
}
Then I tried to add the "page-specific" stylesheet using the same code as above:
@{
    Style.Include("general.css");

    if (Request.RawUrl == "/") {
        Style.Include("homepage.css");
    }
    else if (Request.RawUrl == "/about-us") {
        Style.Include("about.css");
    }
}
This results in the second stylesheet not being loaded regardless of which page I'm on. If I go to "localhost/" I get the general.css but it doesn't also include homepage.css, or if I go to "localhost/about-us" it still only loads general.css and not aboutus.css in addition to it.

I know I could do it creating alternates of the Layout.cshtml file based on URL and just using the include for the second stylesheet, but I'd like to keep it down to just the one Layout file to keep things cleaner if possible.
Dec 19, 2013 at 8:01 PM
Edited Dec 19, 2013 at 8:02 PM
I just tested out the code from the 2nd option and it worked fine on my website.

Have you checked the source to see if the url to the stylesheet is there and where it's actually pointing to? A Style.Include statement will look in the current theme's Styles folder.

I'm running this on localhost as well.
Dec 19, 2013 at 8:11 PM
When I view the page source in Chrome or IE, it isn't adding the stylesheet from the if statement to the code at all. If I use Style.Include outside of the statement it will load the stylesheet in the code and the front end renders correctly. Definitely strange that it isn't doing it!

With running your install on localhost, are you running it at the root or in a directory there? I'm currently running at "localhost/Orchard/" on my system, and also tried adding the Orchard directory to the RawUrl path with no success.

Thank you!
Dec 19, 2013 at 8:16 PM
Edited Dec 19, 2013 at 11:25 PM
I configured mine to run at "/", not the typical "/OrchardLocal" that it uses by default.

Maybe add the code @Request.RawUrl somewhere on your page so you can actually see what that value is capturing. If you're running with "/Orchard", my guess is that your urls would be "/Orchard/" and "/Orchard/about-us".
Dec 19, 2013 at 8:24 PM
Success! I had to add /Orchard/ to the path and it looks like it's all working correctly now. Thank you for your help!
Developer
Dec 25, 2013 at 7:17 PM
That check would fail when you move your code to production where there might not be a subdirectory called "/Orchard".
To avoid that, you could try and do something like this:
@{
    Style.Include("general.css");

    if (Request.RawUrl == Url.Content("~/")) {
        Style.Include("homepage.css");
    }
    else if (Request.RawUrl == Url.Content("~/about-us")) {
        Style.Include("about.css");
    }
}