Orchard.Resources module override "bootstrap.css"

[pda-code]

I have developed a theme in which in Layout.cshtml i include my customized bootstrap.css with

Style.Include(themeRoot + "Scripts/bootstrap/css/bootstrap.css");

but when i run the page and view page source this is what happened <link href="/MyProject/Modules/Orchard.Resources/Styles/bootstrap.css" rel="stylesheet" type="text/css" />

Orchard picks Orchard.Resources bootstrap.css instead of my custom bootstrap.css in my custom folder.

I use orchard 1.10. Is this possible?

P.S. Orchard.Resources module is enabled from a dependency (cannot uninstall) and i gave it priority:5 because i had issues with datetime pickers in admin !!!!

[CSurieux]

Strange, I also use my own bootstrap in dedicated theme but I use less sources modified (from bootswatch + adaptations) it is included in a lib.css so I never load bootstrap.css. Could be a solution. Have you ckecked that some module cshtml may be requiring bootstrap.css ?

[pda-code]

if i rename bootstrap.css ->bootstrap1.css then all working fine. Orchard includes my custom bootstrap1.css.

If i leave the default name bootstrap.css then it picks Orchard.Resources bootstrap.css.

Is orchard performs some weird code for merging duplicate files (css or js) of external assets ?

[sebastienros]

Try to make your theme to depend on Orchard.Resources.

[armanforghani]

As @sebastienros mentioned above you need to make your theme to depend on Orchard.Resources. Also thanks to Orchard, you can override predefined resources such as Bootstrap (by specifying an upper version number). The later method should be done carefully.

[pda-code]

The problem still remain!!! This is my theme.txt

Name: MyTheme Author: pda Website: Description: MyTheme Bootstrap theme based on PJS.bootstrap Version: 2.3.2.1 Tags: Zones: Header, Navigation, Featured, BeforeMain, AsideFirst, Messages, BeforeContent, Content, AfterContent, AsideSecond, AfterMain, TripelFirst, TripelSecond, TripelThird, FooterQuadFirst, FooterQuadSecond, FooterQuadThird, FooterQuadFourth, Footer Dependencies: Orchard.Resources

This is my Layout.cshtml

Replaced Bootstrap.css and font-awsome

Now it is switched from orchard.resources --->orchard.dashboards

[urbanit]

@pda-code Check the PJS.bootstrap theme, I assume this is where the selection is made.... Why do you need PJS.bootstrap theme? Another hint is to turn off shape designer in order to find out exactly where the issues happens.

[pda-code]

@urbanit Its not a matter of using an already created theme (the name PJS.bootstrap left as legacy, my theme is created from scratch) nor a shape issue.

With Orchard 1.10, Orchard.Resources caused me problems with Datetime pickers in admin (javascript jquery failures - already reported as an issue by some other user https://github.com/OrchardCMS/Orchard/issues/6674) and now with "magically" replace my version of bootstrap.css with the one that lives in Orchard.Resources module

[sebastienros]

Please try to create a new theme, create a bootstrap.css, and reference it. If we can make this work, then there is an issue with PJS Bootstrap, nothing we can do, otherwise we'll be able to understand where the issue lies.

[pda-code]

Sorry for the inconvenience but i think it is a difficult bug and i try to investigate.

First of all, do not get confused with PJS Bootstrap theme. I made my custom theme from scratch and only copy views from PJS Bootstrap like layout.cshtml, pager.cshtml e.t.c because they already use bootstrap html markup.

No hidden css includes, no hidden cs code. In my theme there is no cs code excepts cshtml views!!!! Orchard.DashBoards, Orchard.Resources is enabled.

I think there is a bug in Orchard.UI.Resources.ResourceManager that perform some linq to find resources.

I tried to debug step by step my code and the below pictures speaks for themselves.

For the same function call WriteResource, look the difference between the 2 parameters ResourceDefinition resource and Url

The resource.url is the correct The urlis wrong and i do not know how this is came from

[sebastienros]

Looks like a feature to me ;) Just that you don't know this feature. Not saying there is no bug but FYI a css is seen as a shape in Orchard, so that a theme can overwrite the css from another module, even if the module references explicitly a local css. If this is the case then you need to add Orchard.Resources or any module that the css is actually coming from to your dependencies to make it obvious to Orchard that you are rewriting the css. But even though you say you are not using PJS module, you actually are, all the resource manager instructions from your template might be the issue.

I could see a way to fix it, by putting your css file in a different directory such that the full filename doesn't match the ones from the other modules. I will try to do a simple repro locally to identify how to fix it in the Resources module directly, to prevent any obvious conflict.

[pda-code]

Thank you...no need to write code.I will put it in a diferrent folder. I am sure it will work fine.

I was trying to prove that maybe this is was a bug. If this is the logic of the code, no problem with that

[sebastienros]

It might still be a bug, why I said I would investigate.

[gph-dev]

I'm in the same situation with Orchard v.1.10.2.0.

In my custom theme I've defined links to bootstrap.css and font-awesome.css with paths to the corresponding files in the styles folder of the theme.

But Orchard still uses the files from Orchard.Resources:

How can I force Orchard to use the files of my theme instead of its own files?

[ViRuSTriNiTy]

I've seen this behaviour since Orchard 1.8, i'm also cursios about what is causing this.

[sebastienros]

Can you try add a dependency on Orchard.Resources from your Theme manifest? Maybe it will then use the style shape from it.

[Lawyerson]

I keep bumping into this issue as well, ever since Orchard 1.10. I reference custom Bootstrap and FontAwesome in my custom theme. Both my custom module and custom theme have a dependency on Orchard.Resources and the folder structure is different but it keeps using the Orchard.Resources versions simply because the filenames are "bootstrap.css" and "font-awesome.css".

[gph-dev]

Now I finally had time to deal with the issue(s), but it took some time ...

A) Styles... I was able to solve the issue by locating bootstrap and font-awesome with exactly the same naming and at the same location within my theme (myTheme\Styles<files>), as they are located in Orchard.Resources (Orchard.Resources\Styles<files>). In case they are located at another location (i.e. myTheme\Styles\bootstrap<files>), the path to Orchard.Resources\Styles... is taken. Strangely this also happens in case I tried to set the style-path by manifest.DefineStyle("Bootstrap").SetUrl("bootstrap/bootstrap.min.css", "bootstrap/bootstrap.css").SetVersion("3.3.5"); In case they are not located at the same location, Orchard takes the files from Orchard.Resources.

B) Scripts... In addition, I found out that a bit more strange it does work with the script-files: I had to change the naming from manifest.DefineScript("jQuery")... to i.e. manifest.DefineScript("jQuery_2.1.4").SetUrl("jquery.min.js", "jquery.js") and then set the dependencies to exactly this name: .SetDependencies("jQuery_2.1.4", ...). By this Orchard takes the files from the theme. As long as I used for manifest.DefineScript & .SetDependencies the original naming from Orchard.Resources (i.e. "jQuery"), the path to Orchard.Resources/Scripts/... was used.

So for now, at my project it works and I hope you are able to reproduce the behavior also at your side.

[ziic]

You can override a resource using the trick: set version more than already registered. For example SetVersion("1000.1000.1000")

If check the source code of ResourceManager, there is a statement "OrderBy version descending".

private ResourceDefinition FindResource(RequireSettings settings, bool resolveInlineDefinitions) {
            // find the resource with the given type and name
            // that has at least the given version number. If multiple,
            // return the resource with the greatest version number.
            // If not found and an inlineDefinition is given, define the resource on the fly
            // using the action.
            var name = settings.Name ?? "";
            var type = settings.Type;
            var resource = (from p in ResourceProviders
                            from r in p.GetResources(type)
                            where name.Equals(r.Key, StringComparison.OrdinalIgnoreCase)
                            orderby r.Value.Version descending
                            select r.Value).FirstOrDefault();
...

[donaldboulton]

Try this it works. <script type="text/javascript"> if (typeof jQuery == 'undefined') {document.write('<script type="text/javascript" src="@Href("https://d3n8k0cqgcsxxu.cloudfront.net/js/jquery.min.js")"><' + '/script>');} </script> and call the script like this

Use with your own CDN links, not theme folder. Ajax cdn for jquery is nice mine scripts and css are gzipped on AWS Cloud Front and you would need the proper headers and cross site auth to use my jquery

[Ifetayo]

after trying the suggested solutions with no luck, my work around this was to remove the reference to the bootstrap file from YourTheme\Views\Document.cshtml then either replace the bootstrap file you want to be reference there, or you reference it from your razor view Style.Require("BootstrapVersionYouWant")