How to include a css stylesheet in Orchard module?

Question

I am working on a module for Orchard, and I just want to know how to include a css file.

I have done the following with no result:

Added a folder "Styles" to the root of my module and included a stylesheet and a Web.config file like in this question.

And I have seen this but that's not what I am looking for.

EDIT:

Ok, solution:

When I started working on Orchard I created a new module by just creating a new project in Orchard.Web/Modules folder, but as I read here, my Views/Web.config file has to include some orchard base things what mine didn't because I did not create the module using codegen. I fixed it now by replacing my Web.config file for a Web.config file from another Orchard module, now it works.

Next time I will use codegen to create a new module.

Thanks to endorphin for helping me!

Witherspoon

Answer 1

If you want to include your stylesheet in a view, you need to specify this at the top of your view. Where the name of your stylesheet is the filename of the .css file in the Styles folder.

So in your .cshtml file for your view..

@{
  Style.Include("your-stylesheet.css").AtHead();
}

I have used AtHead() in the past, but there are other methods to include your stylesheet in different locations (such as AtFoot())

If your stylesheet depends on other stylesheets you can do something a little more interesting by creating a Resource Manifest which is detailed here https://mcmap.net/q/1609448/-how-to-locate-resources-in-orchard

Kowalewski

Ok thanks, so I have seen that when I was searching for this, but I don't know what reference or something to add in order to use Style.Include()? – Witherspoon

Style.Include() is within Orchard.UI.Resources.ResourceRegister. You should not need to include any references to use this, I never do. – Kowalewski

Weird, because when I just use Style.Include() I get "Compiler Error Message: CS0103: The name 'Style' does not exist in the current context" – Witherspoon

Hmm. It looks like some kind of a Web.config problem, found someone with the same problem here. Gonna look at that now and see if that works. – Witherspoon

Ok, works now, check the question for what I did. Thank you, endorphin! – Witherspoon

AtHead and AtFoot are for scripts, and are meaningless for stylesheets. – Rehabilitation

@BertrandLeRoy Is there a clean way to override this behaviour? I would like to require stylesheets AtFoot. – Fiona

But stylesheets go into the head, not the body. – Rehabilitation

@BertrandLeRoy My bad, I misunderstood a recommendation to defer loading of blocking stylesheets. Though it's technically possible to put them in the body, I realise now that the correct approach is to append them to the head using javascript. – Fiona