@roni-fialkow Hi, Roni. Thanks for introducing yourself.
You might be interested in a problem I just encountered with a repeater – the opacity setting won’t work.
Here’s the situation: I’ve got a section with a 100% black background, a stretched image that fills the entire section and is set to ‘reveal’. The image has an opacity setting of 60%, so it’s dimmed by the black background.
I’ve put laid out multiple containers down the section, using white text and white SVG elements. I’ve set the containers to a black background with 60% opacity so that the text stands out, but the image is still visible beneath the container.
I tried to do the same thing using a repeater. Each item contained a white text element and a white SVG graphic element. I set the repeater background to black at 60% opacity.
The repeater looked fine in the editor and it looked fine in preview, but when I published, the background color was gone. It was as though the opacity was set to 0.
I fussed with it a bit, in case it was a one-time glitch – changing and resetting the opacity – but no luck.
I finally put the repeater in a container and set the container background appropriately. That workaround is fine, but I thought you might want to be aware of the glitch. Was that a one-time thing or can it be replicated? I needed to move on, and I had a workaround, so I didn’t spend a lot of time trying make it work.
1 Like
Hey @jim75924 thanks for reporting this issue. We passed your feedback back to the team.
It seems that the correct value for opacity setting is rendered in the published site but not in the Editor or in the Previewed site for repeaters. In the Editor and in Preview it looks a bit darker in a Repeater (compared to opacity in a regular container).
A possible workaround you can try is to just use the values in the repeater that you want for the published site. For comparison, you can use a regular container to test which values you should use since containers look correct.
I hope this helps.
@carmelsc Thanks for passing this along. However, the problem I’m seeing is exactly the opposite of what you report. For me, the opacity looks fine in the Editor and in Preview, but it is completely missing in the Published version. The published version is completely clear, as though opacity was zero.
As a workaround, I’m putting the Repeater into a Container and setting the opacity in the Container instead, which works fine.
I’ve created an example to show what’s happening for me. At the top, you see how the repeater opacity appears in the Editor (it looks the same in Preview). At the bottom, you see that the color completely disappears when the site is published. Hmmm. I see that the outline disappeared, too.
I am having the same issue with repeaters. Opacity is set to 0 and works accordingly on preview mode but on the live site, it shows the color.
EditorX Preview
Live Site
When I look into developer tools, I see the color is coming from this class
._3Fes4 {
--container-corvid-background-color: rgba(var(--bg,var(--color_11)),var(--alpha- bg,1));
}
But as shown below, the repeater background opacity is set to 0. However, the color box next to it does not change its opacity like it does for other elements, so I think this is a bug?
Hi,
I meet the same problem with the opacity of repeater !? Is this problem still not solved ?
In my Editor looks good : (opacity at 0%)
In the published site, not !? : (a white background appear)
Is there any solutions for that ?
Thanks a lot
Seb
hi, Seb
don’t you mind to share the site link with us, we will be glad to assist you, but we may need to see the live site.
@andrewt
Hi, Thanks for reply.
Of course : https://clararoten.editorx.io/cencreation
I find a solution with puting my repeater into a box/container. Repeater opacity set to 0% and container opacity set to 0%. And the published site is OK.
But the repeater (in pink color for my example) which is NOT into a box/container, even with an opacity set to 0%, looks not weel on the published site. A white background appear !?
Thanks again,
Regards
Seb
Hi I know this was a long time ago, but I’ve seemed to have accidentally stumbled upon a similar problem, perhaps the problem, and can reproduce it. I don’t have a full solution or idea of why its happening on the dev end, but I at least know how to avoid it and have a workaround solution. I’m not looking for this to be resolved myself since I’m okay continuing, so I didn’t make a new thread. I figure if anyone else is googling like I was and couldn’t find anything, they’d at least have a solution they can work with if the devs can’t fix the issue.
For me it happened with boxes and not repeaters. If this topic’s been brought up here already in a newer thread I apologize, but this is where Google brought me. I can’t simulate this issue with repeaters and it seems some of the trouble options like the repeater’s entire background aren’t available anymore so it may have been “fixed” for them specifically. Not sure if other elements will do this.
I had my boxes bgs set with gradients initially, and then decided I wanted a solid colour instead. After that, the live site kept forcing the box’s bg opacities to 100% no matter what I set it to, even if it shows correctly in the preview. After messing around, I realized it was actually forcing the strip I’m using’s gradient onto the boxes and wouldn’t take it off (the colours I’m using are similar and the gradient is slight so I didn’t notice at first). If I put the box outside the strip, it stays. If I change opacity on the gradient and swap back, it stays. If I put the box into something else and change it’s opacity, it stays. The only thing that will get rid of it is moving it to another section completely and then moving it back. The issue can be simulated once again after that if a gradient is applied to it while it’s inside the strip. Its possible the repeaters were the same or similar. I tried deleting my cache as well and got the same result. If I set it back to a gradient and use the two same colours with lower opacity it works and looks like a solid color, but not if I use a solid colour with lower opacity. A new box that’s never been touched by a gradient works just fine inside the strip.
So the strip is the issue. Not sure if other things with gradients will affect element bg transparencies too.
