Add second row of home bottom widgets to Outreach Pro

[Herman]

so I added this code to functions.php but it's not showing up on my site

genesis_register_sidebar( array(
	'id'          = 'home-bottom2',
	'name'        =  __( 'Home - Bottom2', 'outreach' ),
	'description' =  __( 'This section will appear under the Home Bottom widget.', 'outreach' ),
) );

Please advise
Thanks

http://www.aclcnational.org/dev

[Christoph]

Hi Herman,

you have to output the widget area in front-page.php.

You should be able to just add it to the existing function outreach_home_bottom_widgets() {
(follow the example of home-bottom)

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Herman]

Thanks Chris..
When I added this code to front-page.php I got this error message..what am I missing?

function outreach_home_bottom_widgets() {
	
	genesis_widget_area( 'home-bottom', array(
		'before' => '<div class="home-bottom widget-area"><div class="wrap">',
		'after'  => '</div></div>',
	) );

}

[Christoph]

Hi Herman,

I don't think your whole post came through. I don't see an error message

Make sure to use the unique ID home-bottom2. You can't use the same ID twice.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Herman]

Here's the entire code of the front page...see bottom of page where I added home-bottom2
After refreshing my page my first row of widgets disappeared...but now I DO see the widget I added to home-bottom2
Where did I go wrong?

<?php
/**
 * This file adds the Home Page to the Outreach Pro Theme.
 *
 * @author StudioPress
 * @package Outreach Pro
 * @subpackage Customizations
 */
 
add_action( 'genesis_meta', 'outreach_home_genesis_meta' );
/**
 * Add widget support for homepage. If no widgets active, display the default loop.
 *
 */
function outreach_home_genesis_meta() {
 
    if ( is_active_sidebar( 'home-top' ) || is_active_sidebar( 'home-bottom' ) ) {
 
        //* Force full-width-content layout setting
        add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
         
        //* Add outreach-pro-home body class
        add_filter( 'body_class', 'outreach_body_class' );
         
        //* Remove breadcrumbs
        remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
 
        //* Remove the default Genesis loop
        remove_action( 'genesis_loop', 'genesis_do_loop' );
         
        //* Add home top widgets
        add_action( 'genesis_loop', 'outreach_home_top_widgets' );
 
        //* Add home bottom widgets
        add_action( 'genesis_before_footer', 'outreach_home_bottom_widgets', 1 );
 
    }
 
}
 
function outreach_body_class( $classes ) {
 
    $classes[] = 'outreach-pro-home';
    return $classes;
     
}
 
function outreach_home_top_widgets() {
 
    genesis_widget_area( 'home-top', array(
        'before' => '<div class="home-top widget-area">',
        'after'  => '</div>',
    ) );
     
}
 
function outreach_home_bottom_widgets() {
     
    genesis_widget_area( 'home-bottom2', array(
        'before' => '<div class="home-bottom widget-area"><div class="wrap">',
        'after'  => '</div></div>',
    ) );
 
}

genesis();

[Christoph]

You replaced the exiting code with the new code, instead of adding the new code to the old.

Try this

function outreach_home_bottom_widgets() {

genesis_widget_area( 'home-bottom', array(
'before' => '<div class="home-bottom widget-area"><div class="wrap">',
'after' => '</div></div>',
) );

genesis_widget_area( 'home-bottom2', array(
'before' => '<div class="home-bottom2 widget-area"><div class="wrap">',
'after' => '</div></div>',
) );

}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Herman]

Thanks..the images now appear but they are stacked vertically on the home page.
How do I display them horizontally like the first row?

[Christoph]

.home-bottom2 is not defined in the style sheet.
You can probably just add .home-bottom2 to the css selectors for .home-button
e.g.
.home-bottom,
.home-bottom2 {
}

(if there are more classes you have to include all the classes
.home-bottom .some-class .additional-class .one-more-class,
.home-bottom2 .some-class .additional-class .one-more-class { })

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Herman]

I added .home-bottom2 but it made no diff.
Please clarify what additional class i need to add.

.home-bottom,
.home-bottom2 {
	background-color: #fff;
	padding-top: 60px;
}
.home-bottom .widget {
	float: left;
	margin-left: 2.564102564102564%;
	width: 23.076923076923077%;
}

.home-bottom .widget:nth-child(4n+1) {
	clear: both;
	margin-left: 0;
}

.home-bottom .featured-content img {
	-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow:    1px 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow:         1px 1px 4px rgba(0, 0, 0, 0.4);
}

.home-bottom .widget-title {
	color: #333;
	font-weight: 700;
}

[Christoph]

You'd need to add it to all of those and the media queries.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Herman]

is this the correct css?

.home-bottom,
.home-bottom2 {
background-color: #fff;
padding-top: 60px;
}
.home-bottom .widget,
.home-bottom2 {
float: left;
margin-left: 2.564102564102564%;
width: 23.076923076923077%;
}
.home-bottom .widget:nth-child(4n+1)
.home-bottom2{
clear: both;
margin-left: 0;
}

.home-bottom .featured-content img
.home-bottom2{
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}

.home-bottom .widget-title
.home-bottom2{
color: #333;
font-weight: 700;
}

[Christoph]

Not quite. 🙂

Try this:

.home-bottom,
.home-bottom2 {
background-color: #fff;
padding-top: 60px;
}
.home-bottom .widget,
.home-bottom2 .widget {
float: left;
margin-left: 2.564102564102564%;
width: 23.076923076923077%;
}
.home-bottom .widget:nth-child(4n+1),
.home-bottom2 .widget:nth-child(4n+1) {
clear: both;
margin-left: 0;
}

.home-bottom .featured-content img,
.home-bottom2 .featured-content img {
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}

.home-bottom .widget-title,
.home-bottom2 .widget-title {
color: #333;
font-weight: 700;
}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Herman]

Thank you very much..that worked
Is this correct for media queries...

@media only screen and (max-width: 480px) {

.content {
padding: 30px;
}

.content #genesis-responsive-slider .flex-control-nav {
display: none;
}

.home-bottom .widget:nth-of-type(2n),
.home-bottom2 .widget:nth-of-type(2n),
.home-bottom .widget {
margin: 0;
width: 100%;
}

.header-image .site-title a {
background-size: contain !important;
}

}

[Christoph]

Glad that worked 🙂

Change this line

.home-bottom .widget:nth-of-type(2n),
.home-bottom2 .widget:nth-of-type(2n),
.home-bottom .widget {
margin: 0;
width: 100%;
}

to

.home-bottom .widget:nth-of-type(2n),
.home-bottom2 .widget:nth-of-type(2n),
.home-bottom .widget,
.home-bottom2 .widget {
margin: 0;
width: 100%;
}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Herman]

Thanks..do I need to edit the other media queries?

[Herman]

Ok I think I got it..one more thing..
What CSS do I need to add to move the second row of widgets closer to the first row?

[Christoph]

Hmm...

there is this in the 1023px media query.
`.home-bottom .widget {
text-align: center;
width: 48%;
}

.home-bottom .widget:nth-of-type(2n) {
clear: none;
margin-left: 2.564102564102564%;
}`

Just to be sure, change it too

`.home-bottom .widget,
.home-bottom2 .widget {
text-align: center;
width: 48%;
}

.home-bottom .widget:nth-of-type(2n),
.home-bottom2 .widget:nth-of-type(2n) {
clear: none;
margin-left: 2.564102564102564%;
}`

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Herman]

Didn't see it in 1023 but did in 860 so changed it there.
I think I figured corrected the space between rows.

Do you think my header image displays correctly..I spent ages yesterday trying to get it right after trolling the forums?

Just want to say a BIG thank you for your kindness and patience.

[Christoph]

You are welcome.

Is it this website http://www.aclcnational.org/dev/ ?
Needs some work in the media queries.
in the 1023px media query change .wrap to
.wrap {
max-width: 960px;
width: 100%;
padding-left: 0;
padding-right: 0;
}

From about 870px on you should probably serve a smaller image.

Did you try to use Tom's links? Or you could even try Sridhar's new tutorial here: https://sridharkatakam.com/inline-logo-in-genesis/

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Herman]

Yes and thanks for fixing 1023px media query
I don't know about Tom's links however I'll look at Sridhar's new tutorial later.

Thanks again.

[Author]

Posts