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

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

JFAN5 — Mon, 18 Sep 2023 09:34:25 GMT

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!

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

GRajput — Mon, 18 Sep 2023 11:34:19 GMT

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!

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

JFAN5 — Mon, 18 Sep 2023 12:14:53 GMT

Hi Gaurav,

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

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

JFAN5 — Wed, 20 Sep 2023 15:38:52 GMT

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,

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

GRajput — Thu, 21 Sep 2023 08:16:42 GMT

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!

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

JFAN5 — Thu, 21 Sep 2023 10:05:07 GMT

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,

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

GRajput — Thu, 21 Sep 2023 10:24:42 GMT

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!

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

JFAN5 — Thu, 21 Sep 2023 15:47:30 GMT

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,

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

GRajput — Fri, 22 Sep 2023 10:40:53 GMT

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!

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

JFAN5 — Mon, 25 Sep 2023 09:06:12 GMT

Hi @GRajput ,

Thank you so much! It works finally!

Best,