Replace footer widget on some pages in Altitude Pro

[rocketeer]

The footer widget in Altitude Pro is added to the front page as well as all other pages I create in WordPress. How do I replace this footer widget with an identical layout one on some of my pages? These new pages that I create are not widgetized as I understand it.

I guess I can prevent the footer from displaying on selected pages using a short code, but how?
And then paste in some code for the new footer? How would this code look like?

Basically I'd just want to copy the footer and replace it with an identical one layout wise but change some text and social profiles.

Thanks

[William]

You got the concept right 🙂

You need to register widget areas!

http://my.studiopress.com/tutorials/register-widget-area/
https://www.nutsandboltsmedia.com/how-to-add-a-widget-area-to-a-page-using-genesis/

Add Widget Area In Genesis

Once you have registered your widgets, you can load them conditionally on the pages you want.

The above articles are great!

---

Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !

[rocketeer]

Thanks for the reply.

I managed to register the new widget and display it with a conditional hook
similar to below:

//* Add the page widget in the content - HTML5
add_action( 'genesis_entry_footer', 'nabm_add_page_content' );
function nabm_add_page_content() {
if ( is_page('ID') )
genesis_widget_area ('pagewidget', array(
'before' => '<div class="pagewidget"><div class="wrap">',
'after' => '</div></div>',
) );
}

1. How do I remove the Footer 1 widget? I can't see it anywhere in functions.php or in style.css.

I tried to copy all of the CSS for the Footer Widgets and adding my custom footer.
But the text in the footer is black. Adding color: #fff; doesn't seem to help.

2. How can I change the text in the custom-footer to display with white color as in Footer 1 widget?

Thanks 🙂

/*
Footer Widgets
---------------------------------------------------------------------------------------------------- */

.custom-footer,
.footer-widgets {
background-color: #22a1c4;
clear: both;
text-align: center;
position: relative;
z-index: 9;
}

.custom-footer,
.footer-widgets .wrap {
padding-bottom: 100px;
padding-top: 100px;
}

.custom-footer,
.custom-footer .wrap a,
.custom-footer .wrap a.button {
color: #fff;
}

.footer-widgets,
.footer-widgets .wrap a,
.footer-widgets .wrap a.button {
color: #fff;
}

.custom-footer,
.footer-widgets .wrap a.button2 {
color: #fff;
}

.custom-footer,
.footer-widgets a:hover {
color: #000;
}

.custom-footer,
.footer-widgets li {
margin-bottom: 10px;
padding-bottom: 10px;
}

.custom-footer,
.footer-widgets .widget {
margin-bottom: 40px;
}

.custom-footer,
.footer-widgets p:last-child {
margin-bottom: 0;
}

[William]

Hi There,

#1 With regards to the footer widget, look for:

add_theme_support( 'genesis-footer-widgets', 1 );

and comment it out, like this :

// add_theme_support( 'genesis-footer-widgets', 1 );

#2 With regards to the css, I would need a link to you live website 🙂

---

Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !

[rocketeer]

So I managed to conditionally remove the Footer 1 widget on some pages that I choose 🙂

Please take a look here:

Tri-State SEO

The blue footer is the new footer I've added. But it has black text. Also the bottom padding is much smaller than Footer 1 widget.

What I'm after is to have the new footer (the blue one) have the same CSS properties (visualisation) as the Footer 1 widget.

What CSS have I missed to change?

Thanks 🙂

[William]

Just glanced at your website 🙂 I think you can fix your CSS issue in a jiffy !

.tri-state-footer, .footer-widgets a:hover {
    color: #000;
}

That's why your text is back!

.tri-state-footer, .footer-widgets p:last-child {
    margin-bottom: 0;
}

That's why there you don't have bottom margin in your blue footer!

---

Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !

[rocketeer]

Thanks,

Now the text is white. But the bottom margin was only allowed to increase by some pixels. And I can't change the background color in that area. If you take a look you see that it's whiteish background and the hight is only 50 or so pixels.

Do you have any suggestions 🙂

[rocketeer]

OK! So I found out it was one of the other CSS properties I needed to change:

.tri-state-footer .widget {
margin-bottom: 130px;
}

.footer-widgets .widget {
margin-bottom: 40px;

Now it looks really good.

This was a bit too advanced for me. But with Genesis you have to be a bit more advanced 🙂

Thanks for your help!

[Author]

Posts