Full width horizontal bars

  1. 2 years ago

    Hi,

    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.

    I already tried several things, adding multiple zones:

    <div class="main-zone">
      <div class="wrapper clearfix">
          {{zone('main')|raw}}
      </div>  
    </div>
    <div class="main-zone" style="background:#cc0000">
      <div class="wrapper clearfix">
          {{zone('main2')|raw}}
      </div>  
    </div>

    That doesn't work
    and I tried:

    <div class="main-zone">
      <div class="wrapper clearfix">
          {{zone('main')|raw}}
      </div>  
    </div>
    <div class="main-zone" style="background:#cc0000">
      <div class="wrapper clearfix">
          {{zone('main', 'bar1')|raw}}
      </div>  
    </div>

    Probably I can have only 1 zone.

    I understand I can build the banners in my template outside the zone. But then I can't drag & drop new stuff in it and benefit from the editor.

    Can I specify anything "in" the zone? Like sections in the zone?

    Thanks for the swift reply Richard!

    I can see the point in your argument. So that leaves me with the option to set the background of specific placeholders, for example via an ID.

    I'm now testing with something like this:

    I set the wrapper to use the full screen width

    .wrapper {
        width: 100%;
        ....
    }

    I set the color to a specific bar of content (which is a 2 column layout)

    <style>
      #page-zones__main-widgets__responsivecolumns2{
        background:red;
      }
    </style>

    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.

    <style>
    .responsivecolumns, 
    .logo, .content,
    .extendednavigation
    {
       padding: 0 10% !important;
    }
    
    #page-zones__main-widgets__responsivecolumns2,
    #page-zones__main-widgets__responsivecolumns4,
    #page-zones__main-widgets__responsivecolumns10,
    #page-zones__main-widgets__responsivecolumns7,
    #page-zones__main-widgets__responsivecolumns,
    #page-zones__main-widgets__content2,
    #page-zones__main-widgets__content5,
    #page-zones__main-widgets__embed
    {
        background:#eee;
      }
  2. richardhealy

    18 May 2015 Administrator

    Unfortunately there is no way currently to add more than 1 zone.

    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.

  3. Thanks for the swift reply Richard!

    I can see the point in your argument. So that leaves me with the option to set the background of specific placeholders, for example via an ID.

    I'm now testing with something like this:

    I set the wrapper to use the full screen width

    .wrapper {
        width: 100%;
        ....
    }

    I set the color to a specific bar of content (which is a 2 column layout)

    <style>
      #page-zones__main-widgets__responsivecolumns2{
        background:red;
      }
    </style>

    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.

    <style>
    .responsivecolumns, 
    .logo, .content,
    .extendednavigation
    {
       padding: 0 10% !important;
    }
    
    #page-zones__main-widgets__responsivecolumns2,
    #page-zones__main-widgets__responsivecolumns4,
    #page-zones__main-widgets__responsivecolumns10,
    #page-zones__main-widgets__responsivecolumns7,
    #page-zones__main-widgets__responsivecolumns,
    #page-zones__main-widgets__content2,
    #page-zones__main-widgets__content5,
    #page-zones__main-widgets__embed
    {
        background:#eee;
      }
  4. richardhealy

    19 May 2015 Administrator

    To get some clarification, it would be great to see an example that you could publish. Makes it easier to test so we can help you get the example you want.

    Firstly, be careful using IDs. As the you add / delete / move widgets, the IDs change. It's always best to use classes.

    Get your current code online and we'll have a look.

  5. Dave

    19 May 2015 Administrator

    @ajvdhek Hi there,

    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.

    I hope this helps!

  6. dominic-hickey

    19 May 2015 Administrator

    @ajvdhek Hi,

    Can I ask if you are developing this template for an end-user (who will be manually editing the template) - or is it a custom, stand-alone template / website?

    Cheers,
    Dominic

or Sign Up to reply!