Orchard.Layouts and Bootstrap container Classes

Topics: Writing themes
Oct 31, 2015 at 10:40 PM
Edited Oct 31, 2015 at 10:44 PM
I want a html/css structure (based on Bootstrap and Orchard.Layouts) where the page consists of a number of bands. Each band has a different background color or image. It is one page and I would like to use a single Layout to accomplish this.

Example: http://hiphouse.objectmedia.com.au/

The problem is that to construct a band I need to wrap each Grid in a div to apply the background styling, so the background is 'wall-to-wall' but the Layout Grid won't allow me to do that. The Grid (as far as I can tell) must be at the highest level. I cannot wrap the grid in a div (using Layouts).

Does anyone have any insight to this? How it might be accomplished?

By the way, the example was constructed from widgets which is both ugly and an abuse of widgets. This is NOT a viable solution.
Nov 2, 2015 at 8:31 PM
I have found a very simple solution for this that involves a change to one of the Orchard.Layout templates.

Change Elements.Grid.cshtml to this:
@using Orchard.DisplayManagement.Shapes
@using Orchard.Layouts.Helpers
    var tagBuilder = TagBuilderExtensions.AddCommonElementAttributes(new OrchardTagBuilder("div"), Model);
    var isEmpty = tagBuilder.Attributes.Count == 0;

<div class="container">
I have lodged this as an issue (Wrap Orchard.Layouts Grid in extra div #5999).