Cornerstone Cards Element – Set Card to not flip – Themeco Community

Cornerstone Cards Element – Set Card to not flip

innovatethehustle — Tue, 14 Jul 2015 19:21:06 +0000

Hi,

I am hoping to use the Card element but I don’t want to have a back side or for it to flip, just a one-face card. Is this possible?

Thanks.

Reply To: Cornerstone Cards Element – Set Card to not flip

Zeshan — Tue, 14 Jul 2015 19:56:36 +0000

Hi there,

This isn’t possible out of the box. But it can be achieved with custom CSS code. To do so, first add a class of no-flip under Class field of your card element settings (see: http://prntscr.com/7qeolc). Then add following CSS code under Custom > JavaScript in the Customizer:

.x-card-outer.no-flip .x-face-outer.front {
    transform: none !important;
    animation: none !important;
    z-index: 2 !important;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

.x-card-outer.no-flip .x-card-inner {
    transform: none !important;
    animation: none !important;
}

.x-card-outer.no-flip .x-face-outer.back {
    transform: none !important;
    animation: none !important;
    z-index: 1 !important;
}

Hope this helps. 🙂

Thank you.

Reply To: Cornerstone Cards Element – Set Card to not flip

bgodnik — Wed, 21 Oct 2015 21:46:10 +0000

I followed the directions above and double checked that the code I pasted into the global Customizer > Custom > JavaScript is the same as the code above. I added “no-flip” in the Class field to some of the cards at http://omaxgardnerfoundation.com/cornerstone-draft/ but they still flipped on rollover. I also tried using “.no-flip” and “.x-card-outer.no-flip” in the class field but nothing seems to help. Can you please let me know if I’m doing something wrong or if there might be a mistake in the code above?

Thanks,
Bob

Reply To: Cornerstone Cards Element – Set Card to not flip

Nico — Wed, 21 Oct 2015 22:40:55 +0000

Hi There,

Would you mind sharing us your admin credential so we could take a closer look on your setup.

Don’t forget to set it as private reply.

Thanks.

Reply To: Cornerstone Cards Element – Set Card to not flip

bgodnik — Wed, 21 Oct 2015 23:30:36 +0000

This reply has been marked as private.

Reply To: Cornerstone Cards Element – Set Card to not flip

Rue Nel — Thu, 22 Oct 2015 01:00:13 +0000

Hello There,

Sorry for the confusion. We have edited your page in Cornerstone, turned on the advance controls and inserted no-flip class (http://prntscr.com/8twhf5). We also added the following custom css in the settings tab, Settings > Custom CSS

.x-card-outer.no-flip .x-face-outer.front {
    transform: none !important;
    animation: none !important;
    z-index: 2 !important;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

.x-card-outer.no-flip .x-card-inner {
    transform: none !important;
    animation: none !important;
}

.x-card-outer.no-flip .x-face-outer.back {
    transform: none !important;
    animation: none !important;
    z-index: 1 !important;
}

We have remove it from the custom js section in the customizer and added right in Cornerstone. Right now, the card element no longer flip in the page http://omaxgardnerfoundation.com/cornerstone-draft/

If you need anything else we can help you with, please let us know.

Reply To: Cornerstone Cards Element – Set Card to not flip

bgodnik — Thu, 22 Oct 2015 01:09:32 +0000

Thank you very much.

Reply To: Cornerstone Cards Element – Set Card to not flip

John Ezra — Thu, 22 Oct 2015 01:30:16 +0000

You’re most welcome!