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

Develop, Build & Integrate CMS Development
1

Hi,

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

Screenshot 2023-09-18 at 11.28.01.png
Screenshot 2023-09-18 at 11.28.01.png2900×1584 319 KB

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?

Screenshot 2023-09-18 at 11.29.02.jpg
Screenshot 2023-09-18 at 11.29.02.jpg2646×1510 472 KB

Screenshot 2023-09-18 at 11.30.45.png
Screenshot 2023-09-18 at 11.30.45.png1834×1000 119 KB

Thanks a lot!

2

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!

3

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,

4

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!

5

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: Design Manager | HubSpot

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,

6

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!

7

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=VnbTMC53C9cRVFmB6K3P8QwSW3S_dYx3C64ZRW3_-hzf695KxvW15gBJz8TVvnRW6dBdyN5yXvvmW4YfLRZ4VRf3CVWSPDl5DbSvFVXkGWy1XPZ8hW526gtm2xTGZrW654m4q6YLHnb366H2&v=3&utm_source=hs_email&utm_medium=email&utm_content=76444066&_hsenc=p2ANqtz-8gV2LZHmz0mpIcnNG6DNiioH4hsjpBJd8sdv9Bvr-ocW9AEwbRUSpp3qeAcKj71rqwBN7STAt8UxdYsQXzbl39NjNzuA&_hsmi=76444066

Thanks,

8

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!

9

Hi Gaurav,

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

10

Hi @GRajput ,

Thank you so much! It works finally!

Best,