Main content full-width

sage
1

base.php has a fixed width bootstrap container, that wrap the main content of every page:

<div class="wrap container" role="document">
  <div class="content row">
    <main class="main" role="main">
      ...
    </main><!-- /.main -->
    <aside class="sidebar" role="complementary">
      ...
    </aside><!-- /.sidebar -->
   </div><!-- /.content -->
</div><!-- /.wrap -->

In my website, I need to create different sections inside < main > tag, some of which will be fixed width (.container), while others are full-width (.container-fluid).

How do I edit the file base.php?

1 Like
2

I’ve had this situation before with Bootstrap/Wordpress, I’ve never really found a great solution.

Technically it’s the .container class that limits the width to Bootstrap’s max-width, if you remove that you’ll be able to control width on an as-needed basis.

1 Like
3

I currently have resolved by removing the container class (from wrap) and the row class (from content). I moved them within the content (obviously not in the file base.php), in this way:

<div class="wrap" role="document">
  <div class="content">
    <main class="main" role="main">
      ...
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            My fixed width content
          </div>
        </div>
      </div>

      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
            My full-width content
          </div>
        </div>
      </div>
      ...
    </main><!-- /.main -->
    <aside class="sidebar" role="complementary">
      ...
    </aside><!-- /.sidebar -->
   </div><!-- /.content -->
</div><!-- /.wrap -->

P.S.: I never need to use the sidebar

But this change has forced me to add these changes css:

.main {
  float: none;
  padding-left: 0;
  padding-right: 0;
}

I don’t know if this is the “right” way. :frowning:

4

Sage uses a config file to determine whether the sidebar should appear or not. It’s best to use this config file, rather than altering CSS (although if you never use the sidebar, it doesn’t really matter).

In the file sage/lib/config.php on line 33, you can see the funtion display_sidebar(), and on line 55 begins an array of pages which don’t show the sidebar. You can follow the instructions above in the files comments to add whichever pages you’d like. If you do this, I don’t believe you’ll need to modify the CSS for .main.

5

I know the configuration of the sidebar, and in fact I have not removed the code of the sidebar form base.php. Changing the CSS .main class does not concern the sidebar, but it solves a problem with the float.

Although I think there is a better way…

6

I might be misunderstanding either Sage’s config or the question you’re asking, but I believe .main is only floating because it is expecting the sidebar to appear.

7

@tobyl is right, the .main element has styles applied from _grid.scss. this line is adding float, padding and width to .main via make-sm-column(); mixin.

8

@slobich @tobyl, you are right. But with my base.php mod (see my second post), .wrap and .content height is equal to 0, because of the float of .main.
I solved by removing the float from .main (considering I don’t need the sidebar), but I am aware that it is not the right solution.

Can you help me to solve my problem from base.php, in order to avoid changing the css rule of .main?

9

You just need to clear the float, you can use overflow: auto; on .content:

Also, not to be the big bad mod, but common CSS issues aren’t really Sage or Roots projects specific.

1 Like
10

Thanks @kalenjohnson, this is definitely a better solution, but i need to remove side margins from .main, to avoid duplicate side margins with the new container-fluid/.container i put into .main.

I did the following, what do you say?

.wrap {
  overflow-x: hidden;

  .content {
    overflow: auto;
    margin-left: floor(-($grid-gutter-width / 2));
    margin-right: floor(-($grid-gutter-width / 2));
  }
}

Going back to my main need, I understand that the sidebar is a primary part of Roots/Sage. But I don’t generally need it, because it is typically used in blogs, and I usually develop other types of websites.
I realize that, as it is structured base.php file, it’s almost impossible to use .container-fluid inside .content element without a deep change of the template, and perhaps definitively removing the sidebar.
Have you ever had my needs? How have you solved?

Thanks for any advice.

11

I’m a little confused. You can remove the sidebar from the theme, I’ve done it on quite a few projects.

I think you probably need to study a bit more how Bootstrap actually works, since the .container-fluid class can go basically anywhere.

Again though, this doesn’t seem like anything Sage specific, other than you’re using Bootstrap with Sage. This seems more like a straight Bootstrap question now.

2 Likes
12

I’m a little confused too.
I know very well Bootstrap. I just tried to preserve as much as possible the structure of the base.php file. But rightly you confirm me that I can, indeed must, change it on my needs. Probably this is my mistake.

But I do not understand why you continue to talk about Bootstrap specific topic. Bootstrap sidebar example is here (from official Bootstrap website):
http://getbootstrap.com/examples/blog/
…and this does not seem to me to be the same code of base.php :frowning:

Bye and thanks for your help.

Sergio

13

Sage is a starter theme, you should modify the files as you need to build your theme. That includes base.php. The initial layout is there as a sensible default, but you should really edit it as you need.

1 Like
14

Hi @kalenjohnson, I finally found the right solution, which keeps the sidebar in base.php file.

In base.php file I removed .container and .row class respectively from .wrap and .content elements.

<div class="wrap" role="document">
  <div class="content">
    <main class="main" role="main">

And I reinserted them just in case there is the sidebar, changing Sage’s _grid.scss file in this way:

// Grid system
.sidebar-primary {
  .wrap {
    @include container-fixed();
    @media (min-width: $screen-sm-min) {
      width: $container-sm;
    }
    @media (min-width: $screen-md-min) {
      width: $container-md;
    }
    @media (min-width: $screen-lg-min) {
      width: $container-lg;
    }

    .content {
      @include make-row();

      .main {
        @include make-sm-column($main-sm-columns - $sidebar-sm-columns);
      }
    }
  }
}

.sidebar {
  @include make-sm-column($sidebar-sm-columns);
}

I hope this can help someone else with my same needs.
Thanks again.

4 Likes
15

.container-fluid make it full width.
For example, using it only in the front page:

<?php if ( is_front_page() ) { ?> 
< div class="wrap container-fluid" role="document">
<?php } else {?>
< div class="wrap container" role="document">
<?php } ?>
1 Like
16

This base.php setup seems work for me pretty well. No need to modify css files

<div class="wrap" role="document">
  <div class="content">
    <main role="main">
      <?php include Wrapper\template_path(); ?>
    </main><!-- /.main -->
    <?php if (Setup\display_sidebar()) : ?>
      <aside class="sidebar">
        <?php include Wrapper\sidebar_path(); ?>
      </aside><!-- /.sidebar -->
    <?php endif; ?>
  </div><!-- /.content -->
</div><!-- /.wrap -->