Full Width Home Image & Full Width Sections/

I am using the roots theme, I am new to bootstrap and this forum.

so far my header and nav are full width, with a stripe of colour across the page.

on the home page only, i want an image that spans the page, and then maybe different sections of colour.

I created a custom home page template, but when I put any content into it, it is constrained to the width of the page content.

my question is, is this being caused by the base.php, and if so, what can i do about it? if not how do i create full width sections?

Thanks in anticipation.

** in fact looking at the base php file, i see the whole site is wrapped in this

<div class="wrap container" role="document">
  <div class="content row">
    <div class="main <?php echo roots_main_class(); ?>" role="main">

then the content,

the custom page has only this code in it (so far)

<div class="purple">
  <img class="img-responsive" src="<?php echo get_theme_root_uri(); ?>/choir/assets/img/headimage.jpg"/>

and yet when I inspect the source, its inside another div with class of col-sm-12 (can’t show an image) where is this code coming from?

EDIT

ok, I have partially answered my own question.
I see that the <?php echo roots_main_class(); ?> is bringing in the class of col-sm-12.

so if all page templates take their info from base.php , how do I get around this and make sections full width?

sorry if I am not explaining myself very well.

3 Likes

I fixed the code in your post so that it now displays properly; click the edit button if you want to see how to get it right next time.

Have you read through the introduction to the Roots theme wrapper? It should explain the how, why and where that code is coming from.

If you want your container to be full width you just need to set the max-width to 100% to override the values given in the media queries in app.less.

Thank you for fixing that,

in regard to your answer, that makes all of the page content full width too - for example on the roots site, there is a blue sector and a green sector that span the full page. but the content is still fixed to that width, even though the colour goes to the edges

it’s the first time I have used this theme, so Im hitting a few snags.

I thoughyt I figured it. it was the ‘wrap’ class I had to make 100% not the container.

but nope that didn’t work either

Here is a very simple way

lines 16 and 17 of original base.php

  <div class="wrap <?php if ( ! is_front_page() ): ?>container<?php endif; ?>" role="document">
    <div class="content <?php if ( ! is_front_page() ): ?>row<?php endif; ?>">

In app.less

.home .main {
   padding: 0;
}

Then add your sections like so:

<section class="semantic-section-class">
   <div class="container">
      <!-- your content -->
   </div>
</section>

I opted for a more complex way. Each page has a custom field checkbox allowing the user to set the page as ‘full width’, then I get this value in base.php and store it in a variable $full_width

$full_width = get_field( 'page_full_width', get_queried_object_id() ); // ACF function
//note that get_the_ID() can only be used within The Loop so get_queried_object_id() is the next best thing

//.. later
 <div class="wrap <?php if ( $full_width): ?>full-width<?php else: ?>container<?php endif; ?>" role="document">
    <div class="content <?php if ( ! $full_width ) ): ?>row<?php endif; ?>">

and in app.less

.full-width .main {
   padding: 0;
}

This would be enough but then you would have to remember to wrap your section content in a `.container’ which doesn’t work so well with clients so I used custom fields for this too. This is entirely optional so I won’t flood the thread with my solution unless you are interested in seeing it.

Cheers

PS By ‘ACF’ I mean http://www.advancedcustomfields.com

Enollo explained it pretty well, but yeah, basically anything you want outside of the container will need to be outside the .container div. So you will need to edit the base .php file for the page you are working on.

I normally do another get_template_part() to the section I want right above the .container div, or else outside the wrap altogether, depending on what makes sense.

wow, thanks for taking the time to explain that to me guys, I appreciate it. - enollo, I am interested, but still quite novice in my understanding.

i did fix the issue, - I took the class of container out of base.php - as it seemed the only thing I knew how to do, but this then means I have to wrap each section in “container” - I will try and process this explanation!

thank you again.

The first part of @enollo’s post is similar to how we structured the Roots site. You could also use the sidebar class instead of ACF to dictate full width or not.

My first post is only useful if you wanted the content to be full width, not just its parent.

thanks @Foxaii - I wanted it to look like the roots website, as in full width colour bands but content to a narrower width. I’m going to try and implement what @enollo has said just now.

Yes what I normally do for something like the Roots header is set another .wrap, and add the background color or image to that, then add a .container to invisibly contain everything. And if you use the same structure as the main area, both sides should line up nicely.

@marmaladepanda

I forgot to mention that you should add a conditional check to roots_display_sidebar() in lib/config.php if you are going the custom field way.

array(
      'is_404',
      'is_front_page',
      'namespace_is_full_width'
    )

Then in lib/custom.php define the function

function namespace_is_full_width() {
   return get_field( 'page_full_width', get_queried_object_id() );
}

I actually use this function in my template file as well. I was just trying to simplify the example.


Let’s say you want to duplicate the Roots home page layout on your front page. The simplest way of going about this is to enter in the required HTML in the Text tab of the edit screen of the home page.

I added two such sections to a gist to give you an idea of how to do it, but the Bootstrap Docs are your friend here


My more involved solution includes the use of a premium add-on for Advanced Custom Fields, the Repeater Field. It allows my clients to add infinite sections to a page without having to worry about the HTML. They just enter their content using the WYSIWYG editor. I am experimenting with columns here as well, but that is a completely separate topic.

I then use a custom template tag that displays each section using the ACF API, and conditionally wraps the content of the section in a .container if the page is set as full width. This is something new I have only released to a couple of clients so I am not sure how well it will work, but life is all about experimenting :slight_smile:

2 Likes

@enollo, thanks for being so concise its a great help. i’m really liking bootstrap, having built basic custom themes from scratch and getting frustrated at my lack of ability to do certain things, a framework with fluid grid appeals to me so much, Im primarily a graphic designer so the logic of a grid system is a joy to me but I’m building from the ground up with it, is the first time, eventually it will become clear, - I am sure I will have plenty to ask about columns down the line, the last site i made (without bootstrap) trying to get posts to appear in columns was the bane of my existence.

I also have a situation where on pages that I don’t have a sidebar, I need to have full width abilities. It’s a little late in the night right now, and possibly I’m not thinking clearly, but here is what I just did, hopefully it isn’t seen as butchering the theme wrapper concept.

In base.php, after the get_header action, I have the following:

    <?php if (roots_display_sidebar()) {
    get_template_part('templates/side-bar');
    } else {
      get_template_part('templates/full-width');
    }
  ?> 
    </div><!-- /.content -->
  </div><!-- /.wrap -->

  <?php get_template_part('templates/footer'); ?>

</body>
</html>

templates/side-bar contains:

<div class="wrap container" role="document">
    <div class="content row">
      <div class="main <?php echo roots_main_class(); ?>" role="main">
        <?php include roots_template_path(); ?>
      </div><!-- /.main -->
        <aside class="sidebar <?php echo roots_sidebar_class(); ?>" role="complementary">
          <?php include roots_sidebar_path(); ?>
        </aside><!-- /.sidebar -->

And templates/full-width contains the divs without the container class etc…

<div class="wrap" role="document">
    <div class="content">
      <div class="main" role="main">
        <?php include roots_template_path(); ?>
      </div><!-- /.main -->

Does anyone have any thoughts here? Is this blasphemous or is there an easier/better way?

1 Like

There are many ways to approach a problem and this is one way that does not require ACF. In fact, I think this is similar to what @Foxaii was referring to above.

I quite like this method so i think I might use it for websites I manage. I was using ACF to provide a way for my clients to do this without having to look at code. Although I am fully aware they most likely won’t use this field, a lot of clients like a particular page and want to duplicate it, then they get shocked that they can’t do it on their own without hiring me again or learning PHP because of the hardcoded logic in the theme.

my solution was just to take the container class out of the base.php and insert it into the page templates where i place any content. all a big learning curve that I am sure I will develop with each new site.

One simple way you can use to achieve full width sections on non-sidebar pages is to remove the “.container” and “.wrap” classes from the “.wrap” div and its child. Then do something like this immediately after:

<?php if(roots_display_sidebar()) : ?>
    <div class="container">
        <div class="row">
<?php endif; ?>

Then you need to close those divs immediately after the sidebar, inside the sidebar conditional.

So the final product would be like this:

<div class="wrap" role="document">
		<div class="content">
			<?php if(roots_display_sidebar()) : ?>
			<div class="container">
				<div class="row">
			<?php endif; ?>
					<main class="main <?php echo roots_main_class(); ?>" role="main">
						<?php include roots_template_path(); ?>
					</main><!-- /.main -->
					<?php if (roots_display_sidebar()) : ?>
					<aside class="sidebar <?php echo roots_sidebar_class(); ?>" role="complementary">
						<?php include roots_sidebar_path(); ?>
					</aside><!-- /.sidebar -->
				</div><!-- /.row -->
			</div><!-- /.container -->
					<?php endif; ?>
		</div><!-- /.content -->
	</div><!-- /.wrap -->

Hope that helps someone, as it took me a while to figure out how to do this without repeating myself.

5 Likes

@nboliver thats my solution - I just take them out of the base and insert them where & when I need to

Hello people !
I love roots. Still learning but its a good start.

I have one problem that i been searching the whole net but cant find anything.
When i do some of the methods they work but my footer bvackground image or color will spread over my whole page… so footer will go from bottom to the top.
Anyone know a way to fix this ?

Im sorry had to bump it.

You may need to add a div.clearfix before your <footer> element.