Tell us what you are trying to do? I'm just trying to add a simple hover effect to the search and reset button in Toolset blocks. I'm using Astra theme. I can't seem to find or add the right selector to for the proper CSS styling. Could use an example?
Is there any documentation that you are following? Nothing of help
Is there a similar example that we can see? Some old forum questions but nothing I found related to the Toolset blocks.
What is the link to your site? hidden link
Hello and thank you for contacting Toolset support.
Unfortunately, the submit button block and the reset button block do not offer any setting regarding the hover effect. You will need to add it using CSS code. For that reason, you can add an ID or class in the block's advanced settings section, and then you can target that ID or class in your custom CSS code. Check this screenshot hidden link
I hope this helps. Let me know if you have any questions.
Yes, I've tried entering the class in the advanced block section for the Custom Search Submit. My class = submit-button
I added the following CSS to the Page View Custom CSS with no luck?
.submit-button{
transition-duration: 0.4s;
}
.submit-button: hover {
background-color: #4CAF50; /* Green */
}
Can I log into your website and check this closely? Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **
Please share a URL where we can see this on the front-end.
This reply may be a repeat.... not sure the first one went through as it did not show up in my open ticket.
Have you had an opportunity yet to look at my website and figure out a solution?
My apologies for the late reply, but I was not available for the last few days, and most of the team was also on vacation.
The custom style did not work because you did not add the "submit-button" class to the submit button block. I just added it, check this screenshot hidden link
I think that you want to change the color of the button, not the div that is wrapping it, right? If that's the case, I have already updated the custom CSS code to do it, but adding the "input" selector in, because the class will be added to the wrapping div instead of the input/button:
.submit-button input:hover {
background-color: #4CAF50; /* Green */
}
I hope this helps. Let me know if you have any questions.
Yes, that did it! I did add the class to the submit button but failed to add the "input" selector to the custom CSS. You got it exactly right. Thanks for your help. I will close the ticket.
My issue is resolved now. Thank you!
