[Resolved] Second footer for different site areas

[Mathias]

It’s a minor question, but is there a way to have two or more different footers, which then are related to certain pages or posts? The question is actually about a different designed landing page and mainly about changing the background color.

[David]

Hi there,

if its simple styling changes then we can take advantage of CSS Classes that WordPress adds to each page.

For example this CSS:

.home .footer-widgets {
    background-color: red;
}

Targets just the home page and changes the footer widgets background color.

Whereas your events page has a unique class of: page-id-8494 – so you could target that like so:

.page-id-8494 .footer-widgets {
    background-color: red;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mathias]

Thank you David! I did not know about page-ID in CSS. Great.

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

I have a question related to this.
How about if I want to have an alternate footer for a specific page? what would the code be? the normal footer has three links but I want to create one that only has two links for a specific page.
thanks.

[Leo]

We can just hide that one link on that specific page with some CSS.

Can you link me to the page in question?

Feel free to open a new topic so you can use the private URL field.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

thanks, you can take a look at any page footer. they are all the same. On certain pages I just want to hide the “home” link on the footer
thanks

[Leo]

Can you link me to the page in question?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mathias]

I just want to hide the “home” link on the footer

Since we did it like David suggested, you may easily us the page-ID in CSS, find the ID of that certain item with your browser developer mode and set it to “display: none”.

Would this do the trick?

.page-id-8492 .menu-item-675 {
display: none;
}

(IDs are examples.)

[Michael]

it did not work. I’m assuming the page ID is the page that I want to hide the item on and the menu item is the home page link? That’s what I entered in but it’s not working

[David]

Can you share a link to your site? You can raise a new topic where you can use the Site URL field to share the link privately.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

ok

[Cynthia]

Hi David

Adding different css to different footers is great but is there a way to have 2 different footers with entirely different content?

Or would just disable the primary footer on the page I want different content and create a section that appears like a footer with widgets of content?

[David]

Hi there,

theres a few options – a couple of them are:

1. Use GP Hooks to add your custom content:
https://docs.generatepress.com/article/hooks-element-overview/

2. Use the Content Aware Sidebars plugin to add dynamic widget areas.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts