How to Include a CSS Stylesheet in Orchard Module

How to include a css stylesheet in Orchard module?

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://stackoverflow.com/a/6500121/580101

How to add JS and CSS to all content parts in an Orchard module

Handler should do the trick, I wrote this from the top of my head so not sure if it really works.

First create ResourceManifest.cs and define your stylesheets and scripts

public class ResourceManifest : IResourceManifestProvider
{
    public void BuildManifests(ResourceManifestBuilder builder)
    {
        var manifest = builder.Add();
        manifest.DefineStyle("MyStylesheet").SetUrl("mystylesheet.min.css", "mystylesheet.css").SetVersion("1.0.0");
        manifest.DefineScript("MyScript").SetUrl("myscript.min.js", "myscript.js").SetVersion("1.0.0");
    }
}

Then it should be enough to create content handler and override the BuildDisplayShape

public class MyResourceHandler : ContentHandler
{
    private readonly Work<IResourceManager> _resourceManager;

    public MyResourceHandler(Work<IResourceManager> resourceManager)
    {
        _resourceManager = resourceManager;
    }

    protected override void BuildDisplayShape(BuildDisplayContext context)
    {
        if (context.DisplayType == "Detail" && context.ContentItem.Has(typeof(MyPart)))
        {
            this._resourceManager.Value.Require("stylesheet", "MyStylesheet");
            this._resourceManager.Value.Require("script", "MyScript");
        }

        base.BuildDisplayShape(context);
    }
}

Adjust the IF as necessary. And let me know if it works ;)

Beauty of using ResourceManifest with versioning is that anyone can replace your stylesheets/javascript with their own just by defining style in their own ResourceManifest (module/theme) with same name and higher version number and don't have to touch any original files.

Include css file in Orchard

As far as I understand you have the following setup:

• global.css in your theme
• register.css in your module

Now you want register.css after global.css since the former depends on the latter.

You can hack this together but the real issue is with your dependency chain. Themes have the highest priority regarding styling, so stylesheets and scripts will be included from them last (if no explicit dependency is defined in a resource manifest for them) and their shape overrides will take precedence over overrides in modules. The idea behind this is, that you should be able to override anything from a theme.

That said your register.css shouldn't depend on global.css. A module is a stand-alone sub-application that should take care of containing or requiring anything it needs. If you don't want to include such styling in your modules then just include register.css in your theme (like global.css).

Adding different CSS files to different pages in Orchard CMS?

You should use URL Alternates feature for that. It's described here, in the section "URL and Widget Alternates".

After enabling the feature, copy the Layout.cshtml you found in your theme and rename it to Layout-url-homepage.cshtml. This one will only be used for rendering the homepage, so just add your Style.Include calls there and you're set.

How to include custom CSS or Javascript on a Content Item in Orchard

Ok, I found a module (Vandelay.Classy) that does exactly this.

http://orchardproject.net/gallery/List/Modules/Orchard.Module.Vandelay.Classy

Orchard - Stylesheet not found with Style.Require in Orchard 1.8

Resource bundles in themes don't make a whole lot of sense, unless I'm missing something: resource bundles are for resources that are likely to be re-used across modules, and as such should be defined by modules, not themes.

If you Include using the plain file name of a style sheet under the Styles folder of your theme, it will be found, both locally and deployed.

Style.Include("menus.css")

will work provided the file menus.css is under /Themes/YourTheme/Styles.

As a side note, AtHead is redundant for style sheets as those are never included to the bottom of the page, only in the head. You can remove it.

How can I include a script defined in Theme to a view from Modules in Orchard

Ok, what worked for me is:

In a view in the module use

Style.Require("SomeStyleTobeDefinedInTheme");

In the ResourceManifest in the theme add

var manifest = builder.Add();
manifest.DefineStyle("SomeStyleTobeDefinedInTheme").SetUrl("themed-module.css");

Important! Do not define the style in the ResourceManifest in the module!

How to style the 'blog' in orchard CMS

The best place to start will be in Orchard Docs

1. You will need to add your styles, script and other content as Orchard Resources, by implementing IResourceManifestProvider and adding your styles. Then in, your blog views you can use Style.Require('YourStyle').
   Here's how in this page of Orchard Docs
2. Use Shape Tracing to identify files which you may wish to override
3. Read about Alternates

To quickly just add a style try this answer

---

Related Topics