Community Forums › Forums › Archived Forums › General Discussion › New widget areas on Executive Pro's homepage
Tagged: executive pro, New Widget Areas
- This topic has 2 replies, 2 voices, and was last updated 9 years, 10 months ago by [email protected].
-
AuthorPosts
-
May 6, 2014 at 6:00 am #103822[email protected]Member
Hi all - I'm using Executive Pro and have added two new widget areas - left and right - to the top of the homepage. Site is at http://pcc.hillsidewebsolutions.com/ . This is working except that when you resize the browser window, the new widget areas remain on the same line. I'd like them to break/separate so that they display below each other (sort of like how the info block and the Email News letter block display on the Balance theme).
I've only added new widget areas a few times and am still trying to learn -- thanks for any help! 🙂This is the code I used to add the new widget areas:
Functions.php
genesis_register_sidebar( array( 'id' => 'home-left', 'name' => __( 'Home left', 'executive' ), 'description' => __( 'This is the home left section.', 'executive' ) ) ); genesis_register_sidebar( array( 'id' => 'home-right', 'name' => __( 'Home right', 'executive' ), 'description' => __( 'This is the home right section.', 'executive' ) ) );
front-page.php (the 'home-left' and 'home-right' is the new coding....)
function executive_home_genesis_meta() { if ( is_active_sidebar( 'home-slider' ) || is_active_sidebar( 'home-left' ) || is_active_sidebar( 'home-right' ) || is_active_sidebar( 'home-top' ) || is_active_sidebar( 'home-cta' ) || is_active_sidebar( 'home-middle' ) ) {
Also on front-page.php - the 'home-left' and 'home-right' is the new coding....
function executive_home_sections() { genesis_widget_area( 'home-slider', array( 'before' => '<div class="home-slider widget-area">', 'after' => '</div>', ) ); genesis_widget_area( 'home-left', array( 'before' => '<div class="home-left widget-area">', 'after' => '</div>', ) ); genesis_widget_area( 'home-right', array( 'before' => '<div class="home-right widget-area">', 'after' => '</div>', ) ); genesis_widget_area( 'home-top', array( 'before' => '<div class="home-top widget-area">', 'after' => '</div>', ) );
And finally....style.css
http://pcc.hillsidewebsolutions.com/.home-left { float: left; width: 65%; margin-top: 13px; margin-top: 1.3rem; } .home-right { float: right; width: 35%; margin-top: 13px; margin-top: 1.3rem; padding: 0px 5px 5px 5px; padding: 0rem .5rem .5rem .5rem; }
May 6, 2014 at 6:52 am #103824JeremyMemberYou just need to add the following code toward the bottom of style.css telling the browser how to treat your newly added sections when reduced below 767px...
.home-left,
.home-right {
width: 100%;
}Try adding it into this section...
@media only screen and (max-width: 767px) {.site-container {
max-width: 600px;
}.home-left,
.home-right {
width: 100%;
}}
If you want to say thanks Follow me on Twitter | My Website
May 6, 2014 at 10:41 am #103852[email protected]MemberThat worked like a charm - thanks so much!
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.