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 Customer Support]

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 Customer Support]

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 Customer Support]

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 Customer Support]

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 Customer Support]

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

[Author]

Posts