Change color of buttons on specific pages

Community resources Getting started
1

I have a standard blue color for overall product CTA.

I would like a header + footer CTA that changes color on different pages.
Page1 = green
Page2 = orange

Not sure if can be done with same symbol?

1 Like
2

You could duplicate the symbol and have one symbol for each color (useful if you need to use the different colors on many pages) - or you can add the symbol to the page and then “unlink instance” of the symbol so you can change the color on one page without affecting all the other instances of the symbol (useful if you need to use the different colors on only one page). To unlink the instance right click on the symbol and select “unlink instance”.

3

Thanks but it’s a Menu so I would have to maintain 4 menus so not really viable solution.

4

Hi. Please include your site’s Read-Only Share Link with your question.
A read-only link allows the community to view your project without making any edits to it and help diagnose your issue or provide feedback.

If your project has custom code or layout issues on the published site, please share that URL/URI as well.

5

You could include some custom CSS on the page to override the Symbol—this would prevent you from needing to create multiple Symbol instances or unlike Symbols.

Without seeing the project specifics I can’t give the exact code you’d need, but it’ll look something like below:

<style>
.YOUR-BUTTON-CLASS {
  background-color: green;
}
</style>

You may need to “force” the color change—if that’s the case, just add !important after the color and before the semicolon:

background-color: green !important;

1 Like
6

Thank you Mike

I’m not sure I’m doing it correctly

Screenshot 2021-05-17 at 15.06.34
Screenshot 2021-05-17 at 15.06.32

https://preview.webflow.com/preview/tjekvik-2-0?utm_medium=preview_link&utm_source=designer&utm_content=tjekvik-2-0&preview=de7edff0b7376faeeef948ce511bce18&pageId=60a227a82c1cc533333168ce&mode=preview

7

Try this.

green.PNG
green.PNG1420Ă—695 124 KB

1 Like
8

If you’re using the custom code section in the Page settings, those changes only appear once the project has been published.

Using @britishchap’s solution (with the CSS in an HTML Embed element) will display the changes live in the Designer :+1:

@Crunchii - One thing I didn’t notice earlier, Webflow converts all class names to lowercase (as well as turning spaces into dashes), so you’ll want to match that casing in your CSS:

<style>
.buttonheader {
  background-color: green !important;
}
</style>
1 Like
9

Appreciate the help but it’s not working anywhere. Tried both HTML Embed + Custom Code. Not sure if the class is correct or something is being overwritten due to Symbol?

Screenshot 2021-05-17 at 22.00.01
Screenshot 2021-05-17 at 22.00.011852Ă—881 202 KB

10

Sorry for the confusion, I added an edit to my reply just before you replied that should fix the issue:

@Crunchii - One thing I didn’t notice earlier, Webflow converts all class names to lowercase (as well as turning spaces into dashes), so you’ll want to match that casing in your CSS:

<style>
.buttonheader {
  background-color: green !important;
}
</style>
1 Like
11

HEUREKA!

It was me being naughty changing it.

Thank you very much for the great help!