I would like to change the on-hover of btns for our site -
Joomla5, SP page Builder 5.4.2 template PiTech. I see no place in the template options to change this so I'm looking for a css custom change. When I look through the scss, I see for buttons such gobal css variables as $link_hover_color. Is it possible to change the 'global CSS Variable $link_hover_color or is there a better way to do this? The current color does not go with our color scheme at all!
I realize this $link_hover_color may take effect on other elements than just btns but that may be for the good for us as the current color is not suitable anywhere.
Solved
Helix Framework
change to css for on hover
Accepted answer
Marked as the solution
Rashida Rahman Staff
Hello,
Sorry to hear that.
I have just checked your custom CSS field and there are many wrong selectors I can see. No indication for class or ID. That leads to halt the custom codes that added later. So I have added the related code snippet at the top and the code starts working fine now.
https://share.cleanshot.com/mYBJlxs8
Please check and let me know.
Best Regards
4 more replies
Rashida Rahman Staff
Hi there!
Thanks for your interest.
You can try to put this sample code snippet in your custom CSS:
.sppb-btn-custom:hover {
background-color: green !important;
color: #fff !important;
}You can use your desired color in the above code.
Here is all about custom code placement in Helix Ultimate: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta
Best Regards
Lorna Guttormson Asked this
Thank you for Rashida
However, it doesn't seem to work. I have included your code - with the 'green' and with 'purple' for the text color but there is no change. (I expected an extreme, pronounced color change - not what I want but what I couldn't miss seeing). I did this in the template options custom css code block. They still come out blue on hover. I have looked into the items when in 'inspect', I can see the definition of the item .sppb-btn-custom but it is difficult to catch the hover. I tried then to remove the 'hover' to see if the non-hover display would show these wild colors - no change there either. It seems that the custom overrides are not working at all.
Rashida Rahman Staff
Did you check?
Rashida Rahman Staff
Thanks for accepting the answer:)
Have a nice day!
Log in to reply.