How to create different background styling on different pages

Hi, Just so you know, I did a search and couldn’t find anything on this.

My home page background is #000. I duplicated the home page and I want the duplicated page background to be #fff.

  1. So I duplicated my page and then changed the background color from #000 to #fff but it changed both pages. Now this makes sense but I want my duplicated page to have a different background color from my home page. I tried “Overlays” and changed the color to #fff and set to 100% but it changed both the homepage and the duplicate.

So how do I create a different color for a duplicated page?

I think what might be happening is your “home page background” is a Section referencing the same Class. Classes maintain the same styling across all your pages (which is very useful!). Here’s where you will find the Class assignments on the right:

In this example, all Sections that I set to the Banner class will have the same background color, no matter what. I advise you add a Tag to distinguish your pages.

As you can see “Banner + Page 1” does not equal “Banner”, so now when you make color adjustments to the background it won’t affect your other pages! Do this as many times as you want across all your pages.

Best,
Christopher

Thanks Christoper,

OK, I think I did it. I created another Class and added it to the existing one.

See. #3. It has two Selectors like you said. So if I had the page "Background_Light open what would happen if I were to select the Section “background_dark” and delete it leaving the Class “background_light”?

Would the page “Background_Dark” still have it’s own class “background_dark” or would that be deleted?

There is no reason to delete the parent class in this case, however your naming structure may get confusing.

Making the main class “Background” and the new class for your separate page “Light” would allow all your “Background” classes to remain dark, while only your “Background + Light” class would make it light.

Hopefully that makes sense…

Ok, but could I delete the parent class named “background_dark” from the light page with no effect to the other page with the dark background?

so,

Dark Page - Has 1 class/selector named “background_dark”
Light Page - Has 1 class/selector named “background_light”

I just don’t understand the reasoning for having the parent class (Background_Dark and Background_Light) in the page named background light. If there is a god reason to keep both there I’d like to know. Thanks

Hi @lm1280 it would be helpful if you shared a read only link with us. Thanks! :wink:

Share a read-only link | Webflow University

Hi @lm1280, given your example:

Dark Page - Has 1 class/selector named “background_dark”
Light Page - Has 1 class/selector named “background_light”

These are two separate classes, and will not affect each other. I recommend to create a styling called “Background” which has styling common to both pages. Then on each page, add a sub class, one for each page called “dark” and “light”

On the Dark background page, add the “background” class then add the “dark” subsclass and style that with dark background. On the Light page, assign the background class and a sub class of “light”.

As @VladimirVitaliyevich mentioned, by sharing the read-only link, it will help to see exactly how the styling is setup: Share a read-only link | Webflow University

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.