Full width horizontal bars

I'm trying to get "full with horizontal banners" in my template (based on Hatch). Similar to what is described: https://css-tricks.com/full-browser-width-bars/ . I want bars with different background color or image in which I can drop content from the editor.

If I set the color of .main-zone the full width background changes. If I set it on the wrapper, the background sticks to the css rules; either 90% or 960px.

This sets the background of the 2 columns to red. Now the remaining problem is how to get the content in the middle on large screens (so margins/padding). If I set margin, the red isn't full width any more.

After some serious tweaking I managed to get it working for my page:

I removed the 5% left and right margin from the wrapper

.wrapper {
width: 100%;
margin: 0;

And I added it to the containers that hold widgets, content, the menu or the logo. Then I set a gray background to specific bars on the page.

The reason for this is a semantics issue. With V6 (our previous editor), we had more than one place to drag widgets into. This means a user could drop any widget anywhere.

This became a real issue for templates swapping as it was hard to know exactly what was in the zone which becomes exponentially more complicated when different templates have different zones.

This is why we stuck to a 1 zone policy.

If you're build a template for your own use, then you don't have to use zones at all! But if your building a template that will be used in your template picker then we'd have to give user the ability to change these colours via the UI. That would be a feature we would have to build.

If we get enough traction in the BaseKit Developer Community, we would build a Widget Development Kit! Until then, there will be no way to build widgets that could be used in the zone.

This sets the background of the 2 columns to red. Now the remaining problem is how to get the content in the middle on large screens (so margins/padding). If I set margin, the red isn't full width any more.

After some serious tweaking I managed to get it working for my page:

I removed the 5% left and right margin from the wrapper

.wrapper {
width: 100%;
margin: 0;

And I added it to the containers that hold widgets, content, the menu or the logo. Then I set a gray background to specific bars on the page.

If you scroll down on the CSS Tricks article there is an example called "Using negative margin" which will suit the BaseKit Editor better. Because there currently isn't a way to drag and drop custom code, or a way to create additional zone areas, the best way is to keep a snippet of HTML code for use with the content widget.

Using the example shown you can add this to your template styles. Then whenever you want to use this design you can add a content widget, switch to the code view in the text editor, and paste the HTML into the content widget. If you're familiar with HTML & CSS you could even just add the class to the element you to be "full width". Plus you could add an inline background colour style of your choice.

It isn't the most user friendly technique, but you'd probably have to do exactly the same thing in most other CMSs.