Need 3 elements to achieve full width of the site container (not browser window)

[Angelique]

I'm using the Modern Studio Pro theme.

Currently my .navigation-container, .welcome-message .widget-area and .footer-widgets are set to 100% of .site-inner.

I would like these three elements to span the entire width of the .site-container, while the content remains within .site-inner.

I see a lot of tutorials about making these elements fill the entire browser window, but that is not my goal. I would just like them to fill the site container.

A complication is that the .welcome-message .widget-area and the .footer-widgets lie within .site-inner. (The .navigation-container is above this area.)

The .navigation-container and the .footer-widgets will be appearing on every page of the site. Most of the site will have the content to the left and the primary sidebar to the right. On the front page, the content fills 100% of .site-inner, and is organized into columns using the Genesis Columns Advanced plugin.

http://itsolutionsbycmit.com

[Victor Font]

I'm working on a site now with Modern Studio Pro and also needed to move areas outside of site-inner. The complication with Modern Studio Pro is that it doesn't have its own front-page.php. It is a minimalist theme that depends on the framework for its home page look and feel. You'll have to create your own front-page.php so you can adjust the home page to your liking. You can move other widget areas outside of site-inner and into the site-container using the built in Genesis Hooks. http://my.studiopress.com/docs/hook-reference/. You can do this in functions.php. Or, lastly, you can create new widget areas and place them where you want them.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Angelique]

Victor --

Can you give me an example of the php code you used to move areas outside of .site-inner? Or did you create new widgets?

[Victor Font]

I created new widget areas. In my case, I needed to create a slider area outside of site-inner. I created 3 new widget areas:

/* slider widget area */
genesis_register_sidebar( array(
	'id'          => 'home-slider',
	'name'        => __( 'Home Slider', 'modern-studio' ),
	'description' => __( 'Slider in this section will display above posts at the home page content.', 'modern-studio' ),
) );
/* home page content area */
genesis_register_sidebar( array(
	'id'          => 'home-middle',
	'name'        => __( 'Home - Middle', 'magazine' ),
	'description' => __( 'This is the middle section of the homepage.', 'modern-studio' ),
) );
genesis_register_sidebar( array(
	'id'          => 'home-bottom',
	'name'        => __( 'Home - Bottom', 'magazine' ),
	'description' => __( 'This is the bottom section of the homepage.', 'modern-studio' ),
) );

Then I created a front-page.php:

<?php
/**
 * This file adds the Home Page to the Modern Studio Pro Child Theme.
 *
 * @author StudioPress
 * @package Modern Studio Pro
 * @subpackage Customizations
 */

add_action( 'genesis_meta', 'modern_studio_home_genesis_meta' );
/**
 * Add widget support for homepage. If no widgets active, display the default loop.
 *
 */
function modern_studio_home_genesis_meta() {

	if ( is_active_sidebar( 'home-slider' ) || is_active_sidebar( 'home-middle' ) || is_active_sidebar( 'home-bottom' ) ) {

		// Force content-sidebar layout setting
		add_filter( 'genesis_site_layout', '__genesis_return_content_sidebar' );

		// Add modern_studio-home body class
		add_filter( 'body_class', 'modern_studio_body_class' );

		// Remove the default Genesis loop
		remove_action( 'genesis_loop', 'genesis_do_loop' );

		add_action('genesis_after_header', 'modern_studio_slider_widget');

		// Add homepage widgets
		add_action( 'genesis_loop', 'modern_studio_homepage_widgets' );

	}
}

function modern_studio_body_class( $classes ) {

	$classes[] = 'modern-studio-home';
	return $classes;

}

function modern_studio_slider_widget () {
    genesis_widget_area( 'home-slider', array(
		'before' => '<div class="home-slider widget-area">',
		'after'  => '</div>',
	) );
}

function modern_studio_homepage_widgets() {

	genesis_widget_area( 'home-middle', array(
		'before' => '<div class="home-middle widget-area">',
		'after'  => '</div>',
	) );

	genesis_widget_area( 'home-bottom', array(
		'before' => '<div class="home-bottom widget-area">',
		'after'  => '</div>',
	) );

}

genesis();

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts