Community Forums › Forums › Archived Forums › Design Tips and Tricks › Splitting Parallax Pro Home Section Widget Area
Tagged: parallax-pro, split widget area
- This topic has 5 replies, 2 voices, and was last updated 9 years, 6 months ago by linlan.
-
AuthorPosts
-
October 13, 2014 at 12:52 pm #127682linlanParticipant
I am trying to split the home-section-3 widget area into a left side @ 40% width and the right side @ 60% width. I've got it split but cannot seem to get the two new areas to line up side by side instead one on top of the other. Anyone here have any experience with something similar?
http://ginaspriggs.guru/October 13, 2014 at 1:22 pm #127693linlanParticipantI think something with the wrap div is interferring. I've split widget areas with other Genesis themes before and I don't believe I've run across the div class=wrap before.
genesis_widget_area( 'home-section-3-left', array( 'before' => '<div class="home-odd home-section-3-left widget-area"><div class="wrap">', 'after' => '</div></div>', ) ); genesis_widget_area( 'home-section-3-right', array( 'before' => '<div class="home-odd home-section-3-right widget-area"><div class="wrap">', 'after' => '</div></div>', ) );
October 13, 2014 at 1:30 pm #127694SavvyJackieMemberHi,
Try using playing with float: left; and float:right; also the clear:both may also be an issue.
Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie
Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂
October 14, 2014 at 11:28 am #127788linlanParticipantThanks - tried that and it doesn't seem to be working. Here's what I have so far:
In style.css
.home-section-3-left, .home-section-3-right { clear: both; padding: 0px; background-color: #772275; } .home-section-3-left .widget { float: left; width: 40%; } .home-section-3-right .widget { float: right; width: 60%; }
In front-page.php
function parallax_home_genesis_meta() { if ( is_active_sidebar( 'home-section-1' ) || is_active_sidebar( 'home-section-2' ) || is_active_sidebar( 'home-section-3-left' ) || is_active_sidebar( 'home-section-3-right' ) || is_active_sidebar( 'home-section-4' ) || is_active_sidebar( 'home-section-5' ) ) {
genesis_widget_area( 'home-section-3-left', array( 'before' => '<div class="home-odd home-section-3-left widget-area"><div class="wrap">', 'after' => '</div></div>', ) ); genesis_widget_area( 'home-section-3-right', array( 'before' => '<div class="home-odd home-section-3-right widget-area"><div class="wrap">', 'after' => '</div></div>', ) );
In functions.php
genesis_register_sidebar( array( 'id' => 'home-section-3-left', 'name' => __( 'Home Section 3 Left', 'parallax' ), 'description' => __( 'This is the home section 3 left section.', 'parallax' ), ) ); genesis_register_sidebar( array( 'id' => 'home-section-3-right', 'name' => __( 'Home Section 3 Right', 'parallax' ), 'description' => __( 'This is the home section 3 right section.', 'parallax' ), ) );
Argh.... this is so frustrating. I'm sure it's something simple and easy if I just knew what it was!
October 14, 2014 at 11:54 am #127795SavvyJackieMemberWhat are the css settings for home-odd?
Web Designer and Developer at Savvy Jackie Designs | Lucky with plants | @SavvyJackie
Got your question answered here? Please pay it forward by helping someone else. I’m sure there is at least one question you can answer. 🙂
October 14, 2014 at 12:01 pm #127797linlanParticipant.home-odd { clear: both; font-size: 28px; overflow: hidden; padding: 150px 0 150px; text-align: center; } .home-even .widget, .home-odd .widget { margin-bottom: 40px; } .home-even p:last-child, .home-even .widget:last-child, .home-odd p:last-child, .home-odd .widget:last-child { margin-bottom: 0; } .home-odd, .home-odd a:hover, .home-odd h1, .home-odd h2, .home-odd h3, .home-odd h4, .home-odd h5, .home-odd h6, .home-odd .featured-content .entry-title a, .home-odd .widget-title { color: #fff; } .home-odd .featured-content .entry-title a:hover { color: #f04848; } .home-even p:last-child, .home-odd p:last-child { margin-bottom: 0; }
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.