SPPB Flipbox Addon: Round Border Vs. Background Color
TheBearded
Hello,
I would like to have Flipboxes on my page which have a) different background colors on front and back b) round borders (border radius).
How can I combine this? When I activate border radius and have a background color set via front / back style, the background is a square and bleeds over the round borders in the corners. If I want nice round borders, I can only remove all background colors on the front/back style settings and can only assign a background color via background options, but then the flip/fade does not work and the test from front side will be visible on the back side as well.
On the screenshot you see the bleed in the corners and the problem with the fade: https://snipboard.io/6hyYZ2.jpg
Please let me know how I can combine round egdes with different color backgrounds on the flipboxes.
Thanks, Ben
Ofi Khan
Accepted AnswerHello TheBearded
Please use this CSS to Template Options -> Custom Code -> Custom CSS
.flip-box {
border-radius: 20px !important;
}Best regards
TheBearded
Accepted AnswerHi,
I have to come back to this question. The proposed solution generally works, but when moving the mouse in or out of the flipbox, you still can see the squared / boxed background for a split-second.
It just flashes and disappears, but the square box background in can be clearly seen during the transition from front to back of the lipbox (and vice versa).
Is there any chance that this can be changed / switched off as well, so the corners all rounded AND transparent at all times?
Thanks!