Flip_box Front Background - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Flip_box Front Background

EG

Ed Grysiewicz

SP Page Builder 3 years ago

How can I change the front-cover of the flipbox (and flipbox pro)... I want to use an image instead of the default...

0
9 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #94575

Nice. Glad to know that. You can now close this post by accepting the answer.

-Regards.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #93867

Hi

Thanks for contacting us. Do you want to change this gray color?

Screenshot 2022-11-17 at 9.13.31 PM.png

-Regards.

0
EG
Ed Grysiewicz
Accepted Answer
3 years ago #93873

Actually if is not to difficult changing flip-side background color to #272727 would be wonderful...

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #94038

Sorry I dont get it. Do you want to change that background color?

0
EG
Ed Grysiewicz
Accepted Answer
3 years ago #94044

My primary need is replacing the front-end look and feel of the flip-box. I would like to use an image... Second, I would like the ability to change the flip-side background color to #272727...

IMHO - I think that both should editable fields in the core add-on...

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #94189

Hi

Use this custom CSS

#sppb-addon-1668026823562 .threeD-flip-back:before, .sppb-addon .sppb-flipbox-back.flip-box:before {
    background-color: #272727!important;
}

Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

0
EG
Ed Grysiewicz
Accepted Answer
3 years ago #94401

Thank you very much for the flipbox background css code... It worked perfectly... Makes a huge look and feel improvement...

Any progress on being able to change the flipbox front-end image?

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #94420

For background image use this custom CSS, put the image url which you want to set.

.sppb-addon .sppb-flipbox-front, #sppb-addon-su1keVXvhn-WWGZeh6e4P .threeD-flip-front{
  background-image: url(cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg)!important;
}
0
EG
Ed Grysiewicz
Accepted Answer
3 years ago #94470

Thank you very much for the flip-box help...

I hope that a future release will incorporate the ability to make changes without needing help... It just seems logical... Ed

0