Community Forums › Forums › Archived Forums › Design Tips and Tricks › The Three Widget Problem
- This topic has 6 replies, 3 voices, and was last updated 7 years, 8 months ago by Genesis Developer.
-
AuthorPosts
-
August 8, 2016 at 8:31 am #190913nomisMember
Hi there,
I’ve just learnt how to creating widget areas in Genesis. At the moment I’m just experimenting using text widgets to created a three column area. I’ve done and the floating and padding etc, and it’s looking pretty cool. but I have one problem… Obviously it’s possible to set the background colour of each widget in the CSS, but if one column contains less text than the others, it will be shorter, and the background colour of that column won’t reach the bottom.The doesn’t seem any way to edit the HTML directly, but is there a way I can wrap all three widgets (columns) in a single div and give it a background colour.
Thanks in advance for your help.
August 8, 2016 at 8:42 am #190914Genesis DeveloperMemberTry Flexbox - http://www.w3schools.com/css/css3_flexbox.asp
Otherwise you can use genesis predefined columns CSS like
<div class="one-third first">CONTENT</div> <div class="one-third">CONTENT</div> <div class="one-third">CONTENT</div>
August 8, 2016 at 8:49 am #190915Victor FontModeratorHow are you creating the widget area? You most certainly can add additional divs or classes to any widget area you create.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?August 8, 2016 at 9:04 am #190920nomisMemberThe problem is Victor not that I want to add a div to a widget area, but I want to enclose three widgets in one div.
Here's the code I'm using:functions.php
genesis_register_sidebar( array( 'id' => 'my-widget-one', 'name' => __( 'My Widget One', 'sample' ), 'description' => __( 'This is a widget area number one', 'sample' ), )); genesis_register_sidebar( array( 'id' => 'my-widget-two', 'name' => __( 'My Widget Two', 'sample' ), 'description' => __( 'This is a widget area number two', 'sample' ), )); genesis_register_sidebar( array( 'id' => 'my-widget-three', 'name' => __( 'My Widget Three', 'sample' ), 'description' => __( 'This is a widget area number three', 'sample' ), )); add_action ('genesis_before_content', 'widgets1'); add_action ('genesis_before_content', 'widgets2'); add_action ('genesis_before_content', 'widgets3'); function widgets1() { if ( is_page( 2 )) { genesis_widget_area( 'my-widget-one', array( 'before' => '<div class="widgety widget1 widget-area">', 'after' => '</div>', )); } } function widgets2() { if ( is_page( 2 )) { genesis_widget_area( 'my-widget-two', array( 'before' => '<div class="widgety widget2 widget-area">', 'after' => '</div>', )); } } function widgets3() { if ( is_page( 2 )) { genesis_widget_area( 'my-widget-three', array( 'before' => '<div class="widgety widget3 widget-area">', 'after' => '</div>', )); } }
style.css
.widgety { background: #53416D; color: #DCDCDC; float: left; width: 33.33333%; padding: 30px 25px 55px 25px; text-align: center; } .widget1 { padding-left: 50px; } .widget2 { background: #4B3A63; } .widget3 { padding-right: 50px; }
August 8, 2016 at 9:14 am #190921Victor FontModeratorI would do this completely differently.
add_action ('genesis_before_content', 'my_widgets'); function my_widgets() { if ( is_page( 2 )) { echo '<div class="my-widget-container">'; if ( is_active_sidebar( 'my-widget-one' ) ){ genesis_widget_area( 'my-widget-one', array( 'before' => '<div class="widgety widget1 widget-area">', 'after' => '</div>', )); } if ( is_active_sidebar( 'my-widget-two' ) ) { genesis_widget_area( 'my-widget-two', array( 'before' => '<div class="widgety widget2 widget-area">', 'after' => '</div>', )); } if ( is_active_sidebar( 'my-widget-three' ) ) { genesis_widget_area( 'my-widget-three', array( 'before' => '<div class="widgety widget3 widget-area">', 'after' => '</div>', )); } echo '</div>'; } }
In the css, add a min-height and background color to the my-widget-container class and you'll have what you want.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?August 8, 2016 at 9:30 am #190923nomisMemberSo this is the compete code I've got at the moment Victor, but it's giving me"
Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'widgets1' not found or invalid function name in /Users/simondegay/Sites/sample/wp-includes/plugin.php on line 525
Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'widgets2' not found or invalid function name in /Users/simondegay/Sites/sample/wp-includes/plugin.php on line 525
Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'widgets3' not found or invalid function name in /Users/simondegay/Sites/sample/wp-includes/plugin.php on line 525
genesis_register_sidebar( array( 'id' => 'my-widget-one', 'name' => __( 'My Widget One', 'sample' ), 'description' => __( 'This is a widget area number one', 'sample' ), )); genesis_register_sidebar( array( 'id' => 'my-widget-two', 'name' => __( 'My Widget Two', 'sample' ), 'description' => __( 'This is a widget area number two', 'sample' ), )); genesis_register_sidebar( array( 'id' => 'my-widget-three', 'name' => __( 'My Widget Three', 'sample' ), 'description' => __( 'This is a widget area number three', 'sample' ), )); add_action ('genesis_before_content', 'widgets1'); add_action ('genesis_before_content', 'widgets2'); add_action ('genesis_before_content', 'widgets3'); add_action ('genesis_before_content', 'my_widgets'); function my_widgets() { if ( is_page( 2 )) { echo '<div class="my-widget-container">'; if ( is_active_sidebar( 'my-widget-one' ) ){ genesis_widget_area( 'my-widget-one', array( 'before' => '<div class="widgety widget1 widget-area">', 'after' => '</div>', )); } if ( is_active_sidebar( 'my-widget-two' ) ) { genesis_widget_area( 'my-widget-two', array( 'before' => '<div class="widgety widget2 widget-area">', 'after' => '</div>', )); } if ( is_active_sidebar( 'my-widget-three' ) ) { genesis_widget_area( 'my-widget-three', array( 'before' => '<div class="widgety widget3 widget-area">', 'after' => '</div>', )); } echo '</div>'; } }
August 8, 2016 at 9:59 am #190925Genesis DeveloperMemberYou do not need this three lines
add_action ('genesis_before_content', 'widgets1'); add_action ('genesis_before_content', 'widgets2'); add_action ('genesis_before_content', 'widgets3');
Three widget areas are taking care by one function 'my_widgets'
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.