Change To Css For On Hover - Question | JoomShaper

Change To Css For On Hover

LG

Lorna Guttormson

Helix Framework 11 months ago

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.

0
5 Answers
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 11 months ago #175173

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

1
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 11 months ago #174960

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

1
LG
Lorna Guttormson
Accepted Answer
11 months ago #175064

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.

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 11 months ago #175655

Did you check?

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 11 months ago #175841

Thanks for accepting the answer:)

Have a nice day!

0