How do I change the color of a submit button and icon?

Hi @newrockstars,

To change the color of the submit and play buttons on this page, you’ll first want to open up the CSS stylesheet called “azoom.css” in your Design Tools. You can follow the steps in this article to find the stylesheet from the page. Or, you can navigate to Design Tools and search for “azoom.css”.

The submit button’s color is set on line 1272 using the HubL token:

{{ buttonPrimaryBg }}

This value is set on line 112 of the same stylesheet to the hex color #1abc9c, which is turquoise. Change the value on line 112 to your hex color #FE04FE. (This will also change the button color on all other templates and pages using this stylesheet from turquoise to pink.)

To change the button hover color, change the value on line 114 of the same stylesheet for the HubL token:

{{ buttonPrimaryHoverBg }}

which is currently set to a darker turquoise, #34495e. I would recommend finding a darker shade of your color #FE04FE to use here, such as #bc01bc.

Similarly for the video play button, the value is set using a HubL token called:

{{ accentColor1 }}

which is determined on line 88 of the same “azoom.css” stylesheet. Change the color on line 88 to #FE04FE. (Again, this will change the accent color on all templates and pages using this stylesheet from turquoise to pink.)

Once you’ve published your changes by hitting “Publish changes” in the upper right, it will automtically update the colors on your page!

I’d also recommend checking out this blog post: https://blog.hubspot.com/customers/add-your-branding-to-marketplace-templates

Moving the location of the play button is more complicated since it involves custom coding to restructure the default layout of the template, which would be best implemented by a developer.

Hope this helps!

Best,

Rachel