Parallox Pro Row – Turn into side-by-side Widgets

[martag]

I was wondering if it is possible to change one of the home-sections on the Parallax Pro theme from 1 wide widget area to 3 side-by-side widgets. I know I can add multiple but it stacks them one on top of the other but would rather have them side-by-side.

The Home Section 2 I would like the 3 widgets be next to each other and not stacked.

Thanks! I'm including my test site in the link.

http://coosbaywebsites.com

[bandj]

You actually have 4 in there including the "Your Website Needs To Be...". And they all have a class of .home-section-2 .widget. Can you post your front-page.php.

[martag]

Correct on the 4 for right now, that will probably need to change and that is okay. The default .home-section-2 .widget is 1 wide section and I would rather not use column classes if I can avoid it so the client can update without needing to worry about messing up the code. I'm using the default front-page.php file.

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

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

	if ( is_active_sidebar( 'home-section-1' ) || is_active_sidebar( 'home-section-2' ) || is_active_sidebar( 'home-section-3' ) || is_active_sidebar( 'home-section-4' ) || is_active_sidebar( 'home-section-5' ) ) {

		//* Enqueue parallax script
		add_action( 'wp_enqueue_scripts', 'parallax_enqueue_parallax_script' );
		function parallax_enqueue_parallax_script() {

			if ( ! wp_is_mobile() ) {

				wp_enqueue_script( 'parallax-script', get_bloginfo( 'stylesheet_directory' ) . '/js/parallax.js', array( 'jquery' ), '1.0.0' );

			}

		
		}

		//* Add parallax-home body class
		add_filter( 'body_class', 'parallax_body_class' );
		function parallax_body_class( $classes ) {
		
   			$classes[] = 'parallax-home';
  			return $classes;
  			
		}

		//* Force full width content layout
		add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

		//* Remove primary navigation
		remove_action( 'genesis_before_content_sidebar_wrap', 'genesis_do_nav' );

		//* Remove breadcrumbs
		remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs');

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

		//* Add homepage widgets
		add_action( 'genesis_loop', 'parallax_homepage_widgets' );

	}
}

//* Add markup for homepage widgets
function parallax_homepage_widgets() {

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

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

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

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

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

}

genesis();

[Tom]

I'm wondering why you're debating front-page.php. If you've determined the initial content desired, just format it for presentation and refine:

.home-section-2 #text-10,
.home-section-2 #text-11,
.home-section-2 #text-12 {
	width: 30%;
	float: left;
	margin-right: 50px;
}

.home-section-2 #text-12 {
	margin-right: 0px;
}

.home-section-2 h1 {
	min-height: 100px;
}

There's more that can be done, but you'd have to finalize your content.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[martag]

Aaaaahhhhh, thanks Tom, I'm seeing it now. You taught me something new today. I can run with that now. Very cool thanks!

~Marta

[Author]

Posts