Sep 28, 2015 at 5:01 AM
Edited Sep 28, 2015 at 5:03 AM
I am looking to establish some standard workflow for developing Orchard Themes based on Bootstrap and Orchard Layouts. Eventually I'll turn this into a blog post, but I'd really like some discussion about what I'm currently doing. At the moment it's quite
a bit of mucking about and requires some careful thought about where I place things into LESS files. Here is how I currently go about it:
Install Cascade.Bootstrap. I wrote this theme to extend PJS.Bootstrap with two essential things:
- Bootstrap support for Orchard.Layouts
- Makes it easy to add new 'Bootswatches'
If you want to use standard PJS.Bootstrap then you need to modify it to support Bootstrap for Layouts, and you need to modify the settings template editor to show any newly developed swatches.
A Bootswatch is a Bootstrap customization. You'll find a folder of Bootswatches (in Cascade.Bootstrap/Styles/bootswatch-3.3.5) containing pairs of LESS files called xxx-variables.less and xxx-bootswatch.less. There is also an image folder (Cascade.Bootstrap/Content/swatches)
containing a sample image for each swatch. Add a new Bootswatch by cloning an existing one, not forgetting to create a new image as well. It's the image that makes the swatch selectable in the Orchard Admin, so don't forget it. You also need to create a new
You need to pick a starting swatch carefully. It can significantly reduce the amount of work you need to do if you can find an existing swatch that's close to what you want. Then, after you've cloned and renamed it, you'll want to get into the xxx-variables.less
file and muck with things like colors, spacing and fonts. I find that I rarely need to change the xxx-bootswatch.less file.
Now you need to go thru your newly created site-xxx.less and change the import statements so that they refer to your new swatches.
I use site_xxx.less for all custom css. Custom css consists of classes that apply to html that's beyond what orchard and bootstrap provide. So if I create a special template to display a Projection, for example, then classes for that would go here.
Nearly every site I do needs a custom Branding.cshtml template to display the company logo just as I want. To avoid modifying the base template I now need to create an Orchard Theme, based on the Cascade.Bootstrap. As far as I know that's the only way I can
override the standard Branding.cshtml without modifying the Cascade.Bootstrap theme itself. I also use the derived theme to hold any other custom templates specific to this site (eg for a gallery). But I never use this theme for css -- that goes into the Bootswatch
So now when I configure the site I have to set two things:
- In Theme I need to select my custom XXX theme.
- In Theme-Bootstrap I need to select the corresponding XXX Bootswatch
I am fairly happy with the results, but I am sure things could be improved and am looking for ways to do so.
Advantages and Disadvantages
The advantages of my way of working are:
- No modification of the base theme itself, other then extending it with a new swatch.
- Works great with multi tenant sites.
- The LESS compiler produces a single css file.
- Each site has its own theme, so I can override layouts AND css as needed.
- There are quite a few steps involved in creating a new swatch and so it's a bit error-prone, especially when I'm in a hurry.
- It can be hard to know where to place a css override. Do I place it in the swatch or do I put it in the site_xxx.less file?