2. How to change the location of the play icon on the landing page
I am trying to change the color of my Submit button and play icon from the greenish/blue and white set up to a hot pink/white. The html color code I need to change them to is: #FE04FE
1. The button should be #FE04FE and hover with an opacity of the same color as it is now, just not in my desired color #FE04FE. The video play icon should be #FE04FE with the background still white as it is now.
2. I also need to change the position of the video play icon to be centered alongside the Main Header copy at the top of the page.
Normally, I would be able to easily change button colors with a one-click edit or reposition an icon with drag and drop but I can not figure this out. .
Also, if this requires CSS knowledge, I'm pretty much **bleep**. I use a drag and drop theme with Visual Builder in Wordpress and don't have any css knowledge. Like zero-as in it would be easier to teach a cat to meow in morris code than it would be for me to learn CSS.
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!
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.
How do I change the color of a submit button and icon?
SOLVE
Hi Lisa,
Not a problem! Upon taking a second look, it turns out the hover color for the submit button was actually set to blue on another line of the stylesheet (line 1281) so that should be all set now.
The submit button changed to a small grey one because it lost its custom styling. The custom CSS class "form-default" had been removed from the Form Module in the Azoom Template. Since that class is where the custom styling is tied to, when it was removed from the "CSS class" field of the Form Module the styling had nowhere to go. I replaced it, and now that should be all set as well!
If you have any further questions on this, please don't hesitate to reach out.
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!
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.
How do I change the color of a submit button and icon?
SOLVE
Hi Lisa,
Not a problem! Upon taking a second look, it turns out the hover color for the submit button was actually set to blue on another line of the stylesheet (line 1281) so that should be all set now.
The submit button changed to a small grey one because it lost its custom styling. The custom CSS class "form-default" had been removed from the Form Module in the Azoom Template. Since that class is where the custom styling is tied to, when it was removed from the "CSS class" field of the Form Module the styling had nowhere to go. I replaced it, and now that should be all set as well!
If you have any further questions on this, please don't hesitate to reach out.
How do I change the color of a submit button and icon?
SOLVE
Hi Rachel,
Thanks so much for your detailed explanation! I really appreciate it. Your suggestion worked perfectly except that I am still not able to change the hover color of the submit button (line 114). I tried playing with all of the hex codes for that button and none will update it the color I've chosen: #C90EDC
