AS you can see from the attachments there is a dark gradient 9on the fancy box by default and I need the box to be a flat colour. Also when you hover there is another gradient applied to it. I wish to disable the gradients if possible. Thanks!
Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
Hi, I wonder is it possible to disable the gradient both before and after on the fancy box?
My client wants text to appear on hover but the design of the site is all flat colours with no gradients - see
https://oceanhealthcare.ie/about-ocean
the square boxes are all flat colours.
Ive tried :
.nectar-fancy-box .box-bg:before {
background-color: transparent !important;
}
and
.nectar-fancy-box .box-bg:after {
background-color: transparent !important;
}
But it didn't work :(
Hi there,
Thank you for reaching out to us.
Could you share a screenshot of the section you're referring to so we can check this out for you?
We look forward to hearing from you.
Thanks,
AS you can see from the attachments there is a dark gradient 9on the fancy box by default and I need the box to be a flat colour. Also when you hover there is another gradient applied to it. I wish to disable the gradients if possible. Thanks!
Attached files: Screenshot 2024-07-18 at 10.54.49.png
Screenshot 2024-07-18 at 10.54.45.png
Hey Again,
Could you provide the page url where we can view the Fancybox Elements and write up Custom CSS for you ?.
Thanks.
ThemeNectar Support Team
Hi there here is the uRL:
https://oceanhealthcare.ie/guardinhguet/
Hi there
Thanks for writing back.
To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:
From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:
.nectar-fancy-box[data-style=hover_desc] .box-bg:after, .nectar-fancy-box[data-style=hover_desc] .box-bg:before { background: linear-gradient(to bottom, #0f0f0f00, #0f0f0f00 100%); } .nectar-fancy-box[data-style="hover_desc"][data-color="accent-color"] .box-bg:after { background: linear-gradient(to bottom, #597bdf, #597bdf 100%); }Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related. If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.