I need to create a slide gallery with 7 boxes and a hoover effect, but I’ve run into a problem: Wix doesn’t offer enough customisation options in its settings.
For example, the slide gallery has seven boxes equally spaced, and when you hover over each one, a green square with text fills the box. That part is manageable, but I want to add rounded corners to the green square for a more aesthetic look, and there’s no option for that.
I considered using some Velo code, so I activated developer mode and asked ChatGPT for help, but the instructions aren’t clear, and I’m struggling to identify the element ID for each box (I’m a noob at coding). And since I’ve committed with Wix (That’s a paid job), well I’m a bit stuck
On the picture you can see the hover green square that appear when I go over the box with my mouse.
I cannot say how robust this will be.
But if the site is a Premium one. And assuming you mean the Pro Gallery Slider
You can add css code to the Body-End that will override the gallery’s .
In the Site dashboard. Go to the Settings panel.
Then to the Custom Code at the bottom.
Inside it will see a form to add code.
Choose to add your code in the Body-End.
We do it there so we pretty much know that the last css to be cascaded down to will be yours.
You will be presented with a popup form
Fill yours like this
For the code paste this in.
<style>
/* For Hover*/
.pro-gallery.inline-styles .gallery-item-container .gallery-item-wrapper .gallery-item-hover {
border-radius: 20px;
}
div.pro-gallery .gallery-item-container .gallery-item-wrapper .gallery-item.gallery-item-preloaded {
border-radius: 20px;
}
</style>
And give the custom code a name like mine.
Gallery Border Radius
The other settings should be correct. but you can change them for your needs
You do not need to re publish your site. These settings take affect straight away when the site is reloaded in the browser.
–
As I mention, I do not know how robust this will be because Wix could change the class names used at any time, especially ones with numbers in.
Also note this affects any gallery that uses those class names and also styles the expanded image.
–
Really helpful Mark Thanks
1 Like
Sorry Mark, just a quick extra thing: If I want to increase the space between each line ONLY in the green hover (under the red part on the screenshot), I can just follow the same instruction and replace border.radius in the code by line.height? I think I just need to tag/ID the first paragraph (There are 2 boxes of text, first one is description that’s the first paragraph, 4 lines. Second is the Link text at the end, one line under the description)
if you mean line hight between the Title an description
You should be able to used this in the settings.
