Background color in Footer

[PhilippRose]

Hello,

thank you for a great tool. I really like to work with Lay Theme and it's really well documented.

I'm working on a project website. Each Page has it's own background color. The background-color is not shown in the footer. I want the footer to adopt the background-color of the page it's attached to. Is this possible?

www.fellheldinnen.de

Because i didn't manage to work with background images, i used background colors. If there is a way to embed a different background image to each page (no »row image background«) it would be great! :) In this case the background images of the single pages should be displayed in the footer, too.

Thanks for help and keep up the great work!
Philipp

[Baptiste]

Hello @PhilippRose,

Because you don't have a lot of pages, did you try to target those ones with their id and then put your footer color on it?

Like :

.id-53 #footer {background-color: #3f44ba;}
.id-72 #footer {background-color: #1b8869;}
.id-76 #footer {background-color: #cb4898;}

[PhilippRose]

Hey,

Thank you! It works.
Is the developer tool in the browser the only way to find the specific id of an page or is there another way?

Best!
Philipp

[Baptiste]

Hey @PhilippRose, perfect.

The developer tool is the best way in my opinion, but you can find your Post/Page/project id in the url when you edit-it I think.

Like : "post.php?post=21&action=edit"

Best.

[Richard]

Dear @PhilippRose

Although getting to know the developer tools will really help you in the long run, for this you dont necessarily need them.

The (slug) Class & ID of a specifc page will usually reflect the permalink of your Page or Project.

Read the permalink that is above your Gridder in a page or project ( my one being called "carousel-left-setup" )

The Permalink is used for the page Slug and also the data-slug in the websites HTML..

You can see here some HTML of the page:

So we could either target the Class:

.slug-carousel-left-setup

Or the 'data-slug'

[data-slug="carousel-left-setup"]

To get the Page or Projects 'data-id' easily @Baptiste is correct that you can find it in the Browser URL address bar when editing:

So from this i can assume a class:

.id-297

& a 'data-id:

[data-id="297"]

Hope this helps Philipp and best of luck with your project :)

Richard

[PhilippRose]

Wonderful! Thanks a lot!
Best… Philipp

[wscheible]

Would it be possible to automate with JavaScript that the background colour of the last grid line is copied to the footer too? I use overlays for projects and some pages.

[arminunruh]

do u have a link please

[wscheible]

thank you, I found another way. I use a row inside the page to simulate a footer. That's a little bit of work, but it's okay for me.