This weekend, I wrote a set of code that makes all the footer widgets the same size dynamically, which is perfect for CSS styling. For example, if you wanted side borders on the footer widgets, you were either stuck with unequal vertical bars or setting the footer widgets a specific size for design purposes. However, with this code snippet, then you are good to go.
This code makes the footer widgets the same size if the browser is greater than 960px. If less, it drops it to { height: auto } for you to handle using media queries and other responsive code.
Very nice! Can’t tell you how many times I’ve worked/re-worked the copy to get equal heights. 🙂 Thanks for this!
Could something similar be set up for a ‘home-middle’ section? I run into more issues on those sections than in the footer it seems.
Hello Seth,
Yes it can. Just change the selector variable to the home middle class. So if the home middles shared a similar class, it would work! Same code!
Thanks,
Travis
Travis,
Is this a function that can be dropped into an existing Genesis child theme’s functions.php file and it will have an immediate effect?
Hello Adam,
The PHP code would need to be placed into functions.php or some other file or your core functionality plugin. The JS would then need to be placed into the js folder of your Child theme as a js file. If you are using a core functionality plugin, then the setup is a bit different. Let me know if you need any help.
Thanks,
Travis
Hi Travis, thanks for the clarification. My intention would be to put the PHP into my child theme’s functions file now (Agency) and move the js file into the js folder of my child theme as you describe above.
I’ll be trying to use this to change the Home Left, Home Middle, and Home Right widgets so I can add some simple colored borders there for a client site I’m currently working on. The client wants each widget to have one of their three branding colors. ex: Home Left = green border, Home Middle = blue border, Home Right = orange border.
Is my understanding correct that this will allow me to achieve the above?
Looking at the Agency child theme (home.php), the middle widget areas have the classes home-left, home-middle and home-right. If you change it to where each also have home-widgets-area, then your selector would be
#content .home-widgets-area.So your new home.php would be something like this (by the way this could be further reduced by using genesis_widget_area(), but in keeping with the current child theme download…):
[php]
function agency_home_loop_helper() {
if ( is_active_sidebar( ‘home-left’ ) || is_active_sidebar( ‘home-middle’ ) || is_active_sidebar( ‘home-right’ ) ) {
echo ‘<div id="home">’;
echo ‘<div class="home-left home-widgets-area">’;
dynamic_sidebar( ‘home-left’ );
echo ‘</div><!– end .home-left –>’;
echo ‘<div class="home-middle home-widgets-area">’;
dynamic_sidebar( ‘home-middle’ );
echo ‘</div><!– end .home-middle –>’;
echo ‘<div class="home-right home-widgets-area">’;
dynamic_sidebar( ‘home-right’ );
echo ‘</div><!– end .home-right –>’;
echo ‘</div><!– end #home –>’;
}
}
[/php]
So then you would change the JS above to something like this:
[javascript]
var selector = ‘#content .home-widgets-area’; // added on line 14
selectorSizing( browserWidth, selector ); //changed line 20 & 65
[/javascript]
Thanks so much Travis, I REALLY appreciate you taking the time to post this:) Will be trying it out in the next few days!