The button color on the system page isn't displayed as it was set up

[JFAN5]

Hi,

I changed the color of the button on the subscription preference page. The color pink is right in overall preview. See the screenshot:

However, if I access from here, the color is still default color: red and purple. The color doesn't even change when I apply this page in live mode. Could anyone help on this issue please?

 

Thanks a lot! 

[JFAN5]

Hi @GRajput ,

Thank you so much! It works finally!

Best,

[JFAN5]

Hi Gaurav,

Thanks for your reply. Then what could I do to have the button color in pink please?

[GRajput]

Hi @JFAN5 

I understand your question but their is nothing wrong here. I hope this will help you , this is Because when you preview your template then it shows the initial value  of the CSS property which is set in the theme but when you change the color from content editor then the initial value gets updated on the page level not at theme level. So it doesn't matter which color you choose for you button in content editor, it will not change the initial value in theme.

Hope this will helps you out. Please mark it as Solution Accepted & Upvote to help other Community member.
Thanks!

[JFAN5]

Hi @GRajput ,

Thanks again for your response. In order to make the button colour change, what should I do please? I'm really confused. 

Best,

[GRajput]

Hi @JFAN5 

So to change the button color you can do it from content editor or you can use CSS to do it. If you can share your page link then I can help you with the CSS. 

Thanks!

[JFAN5]

Hi @GRajput ,

I changed the button color in the content editor but it didn't work. 

Preview link: https://app-eu1.hubspot.com/design-previewer/25855288/code/76980587708

Design manager link: https://app-eu1.hubspot.com/design-manager/25855288/code/76980587708?tfid=76289810146

Theme editor link: https://app-eu1.hubspot.com/theme-editor/25855288/edit/FreeFlex%20child?testmode=true

The button color that I'd like to have:

background color: EC9BAE

background hover color: 78C7CB

Thanks,

[GRajput]

Hi @JFAN5 

I don't need the preview, design manager or theme link because to open those links I would need access of your portal. Please provide the page link for that you need to publish the page and in settings you will find that page url. If by any reason you are unable to publish the page then you can Book a meeting and me or my team will help you out.

Thanks!

[JFAN5]

Hi,@GRajput 

I was not clear about that before. Is this one?: https://hs-25855288.s.hubspotemail-eu1.net/hs/manage-preferences/unsubscribe?languagePreference=fr&d...

Thanks,

[GRajput · Accepted solution]

Hi @JFAN5 

Thanks for sharing the page link. So I found the class which has the button background color. Now you can add these line of CSS to give your custom color:-

.button, .button:visited, .btn-primary, .btn-primary:visited, .hs-button, .hs-button:visited {
background-color: #EC9BAE;
}

On Hover:-

.button:hover, .button:focus, .btn-primary:hover, .btn-primary:focus, .hs-button:hover, .hs-button:focus {
background-color: #78C7CB;
}

If it still doesn't work then add !important after the color hex code like this:-  background-color: #EC9BAE !important; .

Hope this will helps you out. Please mark it as Solution Accepted & Upvote to help other Community member.
Thanks!