I have Sage set up and I like the full width homepage. I added another base because home will be quite a bit different. It will have a header with three widgets areas explaining the product followed by portfolio thumbnails and a slider and ending in a footer with several dynamic sidebars.
How can I load three widgets on home without losing the full width display? When I allow sidebar on home in config.php:
[
'is_404',
//'is_front_page',
['is_page_template', 'template-custom.php']
]
);
and use sidebar.php to load the initial sidebar
<?php
if ( !is_page('home') ) :
dynamic_sidebar('sidebar-primary');
endif;
if ( is_page('home') ) :
dynamic_sidebar('sidebar-home-top-left');
endif;
?>
The main content still adjusts itself to the standard sidebar. So the main content does not cover the whole width:
Should I create a new sidebar function? How? Or is there another way to fix my new base-front-page.php.
Here adjusted part of it so far:
<div class="wrap container" role="document">
<div class="content row">
<main class="main" role="main">
<?php include Wrapper\template_path(); ?>
</main><!-- /.main -->
</div><!-- /.content -->
<div class="content row">
<?php if (Config\display_sidebar()) : ?>
<aside class="sidebar" role="complementary">
<?php include Wrapper\sidebar_path(); ?>
</aside><!-- /.sidebar -->
<?php endif; ?>
</div><!-- /.content -->
</div><!-- /.wrap -->
Foxaii
June 21, 2015, 8:43pm
2
If you look here you’ll see we add a body class when the sidebar is being displayed.
That class adjusts the width of the page here by referencing the variables here .
So you can either adjust the function in extras to something like the following:
if (Config\display_sidebar() && is_page('home')) {
$classes[] = 'sidebar-home-top-left';
} elseif (Config\display_sidebar()) {
$classes[] = 'sidebar-primary';
}
Or just override the scss:
.main {
@include make-sm-column($main-sm-columns);
.sidebar-primary & {
@include make-sm-column($main-sm-columns - $sidebar-sm-columns);
}
.home & {
@include make-sm-column(12);
}
}
3 Likes
Great. Thanks! I added another scss assets/styles/layouts/pages/_home.scss
+ @import "layouts/pages/_home";
in main.scss to load it and added the scss as suggested after I read how things were loaded. That does work. Learned something. Thanks. I have three widgets loaded now from three different sidebars. But as they are all in one
loaded by display_sidebar()
Is there a Roots Sage way of loading one sidebar of choosing per aside/html block? So an option to load multiple sidebars on one page? Where is the recommended place to add classes like col-xs-6 col-md-3
to an aside? In sidebar.php?
Foxaii
June 22, 2015, 10:57am
4
There’s nothing in-built that will help you do this. You’ll have to edit or duplicate the display_sidebar
function.
We did discuss rewriting the function as a more extendible class but haven’t gotten round to it yet. A PR doing that would be very much welcomed.
I would always set the column classes in scss or less rather than in PHP. That way you can change the widths depending on what page is being loaded.
1 Like