Community Forums › Forums › Archived Forums › General Discussion › Parallox Pro Row – Turn into side-by-side Widgets
Tagged: css, home-section-2, parallax
- This topic has 4 replies, 3 voices, and was last updated 10 years, 7 months ago by
martag.
-
AuthorPosts
-
July 21, 2014 at 1:03 pm #115233
martag
ParticipantI 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.comJuly 21, 2014 at 3:37 pm #115256bandj
MemberYou 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.
July 21, 2014 at 4:10 pm #115262martag
ParticipantCorrect 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();
July 21, 2014 at 5:15 pm #115269Tom
ParticipantI'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 ]July 21, 2014 at 10:39 pm #115318martag
ParticipantAaaaahhhhh, thanks Tom, I'm seeing it now. You taught me something new today. I can run with that now. Very cool thanks!
~Marta
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.