-
Posts
-
Hello
I just want to say that I have been very happy with the quality and support of the Enfold theme.
I was wondering if you could help me with something.
On my homepage, there is a subscribe button. I designed that button using the Optin Form Plugin. There is a section for Custom CSS. My objective is simple. I just want to add an active hover state to the button. However, I do not think the code below would suffice.
a:hover {
color: #109bc5;
}I don’t see why there would be special considerations, but I’m obviously unfamiliar in this area. Please help me implement an active hover state for the subscribe button.
Additionally, I have also been trying to test the active hover state of the buttons provided by Enfold using custom css, but the codes provided in the other threads do not seem to be working for me either. I have been testing the button out on a testing page to no avail. Please help me with this as well.
Thank you in advance
-Ace
Hi Ace,
If you go to Enfold->Layout Builder, you have the option to active the extra CSS field for all builder elements. You can then add a class to that button, for instance ace-button. You can then use CSS like this in Quick CSS:
.ace-button a:hover { background:red; color:white; }Best regards,
RikardHello, Rikard.
It shows that everything is activated in the Layout Builder.
Also, the code provided did not actually affect anything. Is there another code I can use? I still want to change the hover state of the subscribe button on the aceadventurer.com homepage.
Hi Ace,
Thanks for the feedback, though I can’t see a button on the front page, only on the test page? Also, I can’t see a custom class on the test page, did you try adding one?
Best regards,
RikardHello, Rikard. The button says “Sign Me Up.” It’s in red and it’s on the homepage. I was wondering if you can somehow help me with the hover state on this. This button was created with the Optin Form Plugin, and that form has a custom css section. I want to hover over it and change the color.
I just want to clarify that the “sign me up” button (on the homepage) and the Enfold button (on the testing page) are two different types of button. The “sign me up” button was created using the Optin Form plugin while the button on the testing page is a button provided by Enfold.
I am also not exactly sure what you mean by custom class. Can you clarify what this custom class is that you are talking about? The furthest I’ve gotten is the code below, but that doesn’t help me with the hover state for these types of buttons either.
.avia-button {
background-color:#109bc5!important;
color: #ffffff!important;
}Thank you
Hi acelam714,
Here is the code you can put in Enfold > General Styling > Quick Css to change the optin form button on hover, if it does not work, put into themes/enfold/css/custom.css
#optinforms-form1-button:hover { background-color: aqua !important; }If you need further assistance please let us know.
Best regards,
VictoriaThank you so much, Victoria. That worked wonderfully.
To be honest, I felt like my request was kind of a long shot. The Optin form isn’t even part of Enfold. I am very impressed.
If it’s not too much trouble, could you show me how you figured out the code? It will help me troubleshoot on my own in the future. The two sets of code provided by you and Rikard are quite different. For instance, Rikard’s code had a period in front of everything and the “a” before the word hover. Yours had neither. When do I use the period versus the hashtag? Also, am I to assume that, should I add a second form, it would be #optinforms-form2-button:hover? I managed to figure out the avia button on my own, but this optin form was very tricky.
.ace-button a:hover {
background:red;
color:white;
}#optinforms-form1-button:hover {
background-color: aqua !important;
}Thank you
- You must be logged in to reply to this topic.