Orchardcore: Bootswatch integration

Created on 30 Oct 2017 · 6Comments · Source: OrchardCMS/OrchardCore

What about using Bootswatch css themes?

A simple way to do this would be to create a module that contains a ResourceManifest and add the cdn url of each Bootswatch theme.

Thanks to this, it would be easy to reference the module, enable it and use the style taghelper to add the <link> to the css.

You can use it in the layout.cshtml view or, if you have a section (zone) placed at the end of your <head>, you can add a widget that could have a BodyPart or a TexField and then use the Liquid syntax to add it.

Source

agriffard

❤1

All 6 comments

Then, you could use a CustomSetting part to create a ThemeOption thanks to which you can specify the name of the Bootswatch Theme you want to use.

agriffard on 30 Oct 2017

https://github.com/thomaspark/bootswatch repo is also currently migrating to Bootstrap beta 2.

So, when it is done, we could use the Bootswatch theme in admin to customize the navbar and the buttons.

I had this idea when I saw @Skrypt 's PR #1148

agriffard on 30 Oct 2017

👍1

I'm not sure if Bootswatch is enough for having a great looking admin theme. If I remember when we used the Amaretti theme on 01 it was removing total compatability with Bootswatch. The decision depends on what we want to achieve as an end goal. We could easily set a short term goal for having Bootswatch compatibility but I'd say that looking at something like : http://coreui.io/index.html right now could be also good. I just found that admin theme by looking quick. I'd say, if we take lessons from the previous implementation(s) we should try to find an open source theme that we can either fork or contribute on. That way, we could separate logic from theming concerns and having a separate repository for that seems like the way to go now. We also want to leave the choice of which JS framework people will want to integrate with. That CoreUI theme seems like proposing integrations for most of the popular ones.

Skrypt on 1 Nov 2017

👍1

I'd rather provide a way to be able to edit or provide a custom css. We could even create the file locally (what ImageSharp.Web is doing) and serve it. This way you are not limited to BS, and you can do simple or complex changes. We could also support custom formats (sass, less ?) At first it could be a custom stie setting, at least to support a css file, but this could be improved to support any type of file in the Assets feature, like JS, or multiple css. We'd just need a way to add more resources in the layout (widgets?)

sebastienros on 2 Nov 2017

👍1

@sebastienros discussed with @Skrypt in gitter and suggested also this solution :
_the simplest solution right now (first step probably) is to add a setting where you can add a custom css and a custom js file, and the theme registers them.
the next step is to make something independent from any theme, and provide the same feature by registering these files using the resource manager (easy)
then finally, be able to create as many static resources as needed (css, js, meta tags, links) also using the resource manager
we would just require the themes to use the resource manager, which is already the case for all of them_

agriffard on 10 Nov 2017

I agree with the solution.

agriffard on 26 May 2018

Was this page helpful?

0 / 5 - 0 ratings