This project is read-only.

Unthemed module ignores CSS

Topics: Customizing Orchard, Writing modules
Aug 7, 2013 at 11:32 AM
I’ve created a module which has a controller and View, something like Hello World example here
Here is the HomeController:
    public ActionResult Index()
        return View(_shapeFactory.MyShape(
            Foo: 42,
            Bar: "baz"
And this is my Index.cshtml inside Views\Home

<!DOCTYPE html>
<html xmlns="">
<head> <link rel="stylesheet" media="screen" type="text/css" href="mystyle.css" /> </head> <body>
<h1>Index from shape</h1>
<div>@Model.Foo is the answer.</div>

I implemented it following the example from this article:

The problem is that it doesn’t include the mystyle.css file. I’ve got this file in Styles folder and there is Web.config file as well.

It looks like the shape works because the @Model.Foo is populated with data (value 42 as per controller).

I’ve spend a day trying to figure out why it doesn’t work but didn’t manage to came to any result. It looks like when the module is unthemed the CSS is ignored.
Any thoughts or ideas will help. Thanks
Aug 7, 2013 at 9:57 PM
But of course: it looks for mystyle.css under the same path as the current page. Better qualify the path to the file.
Aug 8, 2013 at 12:17 PM
Thanks, this make sense.

Actually it was like that:

which still doesn't work.

I can change the path but would like to use Orchard Style helper.
Aug 8, 2013 at 7:44 PM
Aug 9, 2013 at 9:21 AM
Thanks for your help, Bertrand.

I've got this working using MVC helper:

<link href="@Url.Content("~/Modules/MyModuleName/Styles/mystyle.css")" rel="stylesheet" />

but if I use Orchard Style.Include:




It doesn't work.

I've got my issue sorted out but keen to understand why Style.Include doesn't work.
Aug 9, 2013 at 4:47 PM
How does it not work?
Aug 12, 2013 at 9:27 AM
When I use this:




The rendered page doesn't have reference to the style included. Basically the head is empty.

I've created a sample module which replicates my issue here:
Aug 12, 2013 at 9:20 PM
What gets rendered on the page? Can you do a view source in the browser and find out?
Aug 13, 2013 at 11:29 AM
This is what gets rendered:

<!DOCTYPE html>
<html xmlns="">
<head> <title></title> </head> <body>
<h1>Index from shape</h1>
<div>42 is the answer.</div>
Aug 17, 2013 at 7:58 AM
You missed that part of the post: "The only gotcha is that you need to use “Layout” in order to declare zones, and that two of those zones, Head and Tail, are mandatory for the top and bottom scripts and stylesheets to be injected properly."
Aug 18, 2013 at 5:27 PM
When you opt-out from using theming, you need to render head/foot scripts and stylesheets yourself by putting these in appropriate places:
  • @Display.HeadScripts()
  • @Display.FootScripts()
  • @Display.StyleSheetLinks()
Aug 19, 2013 at 9:54 AM
Thanks, that makes sense.