As a further testament to the power of the Roots theme, while the base.php
file dictates fundamental layout for the entire site, we have the freedom to set up a custom base template to customize the fundamental layout structure when and where needed. We'll do that for our home page as shown in the following steps:
base.php
file.base-page-home.php
. Because our page uses the page-home.php
template file, Roots will check for a base template file by this name, and if it is found, Roots uses this file as the template for our home page.For more information on this base-template-choosing function, see the Roots documentation at http://roots.io/an-introduction-to-the-roots-theme-wrapper/.
base-page-home.php
file in your editor.div
tag of the wrap
class and remove the container
class from it so that it now reads as follows:<div class="wrap" role="document">
container
class where we need it, specifically for our columns below the carousel. The same goes for the row
and column
classes. So, we'll remove those from this template as well.div
tag of the content
class; remove the row
class so that this line now reads simply as follows:<div class="content">
php
tag from div class
as main
as we don't need the Bootstrap column
class provided by roots_main_class
. This line should now simply read as follows:<div class="main" role="main">
You should see the carousel expand to full width.
That's the magic!
Recall that we have provided the container
, row
, and column
classes we need for the columns in what we've pasted into the WYSIWYG editor. Thus, these are constrained as they should be.
We are almost ready to bring in our custom styles. First, before finishing with our markup, let's clean things up and make them easier to maintain.