[kirk74Participant]

Hi you legends, can you pls help me! For cornerstone cards, I need to use an image on the front – I would like to still use the icon option but have it on the back instead .. I know this will require which I am fine with just not sure exactly what / where to ad the code.. thanks! 🙂

[RupokMember]

Hi there,

Thanks for writing in! Do you want to use the image as background image for the card front? Do you have any example or mockup? If you jut want to set as background image then you will find lots of threads for this if you search on our forum like this – https://community.theme.co/forums/topic/how-to-create-an-image-background-on-a-flip-card/#post-314930

Cheers!

[kirk74Participant]

No sorry I don’t think you get what I mean .. I am using the CARDS is to show company profiles for partner companies that work with my client .. so on the front I am using IMAGE option instead of ICON (which is the company’s logo) .. (which is easy and can be done in Cornerstone) .. but I love the icons too.. and I wanted a way of seeing the icon at the top when the card is flipped on rollover.

I thought it woudl work by adding this code into the card content section in Cornerstone:

<div class="x-face-graphic"><i class="x-icon-lightbulb-o" style="margin:0;font-size:50px;color:hsl(0,0%,100%); data-x-icon="">::before</i></div>

But unfortunately that didn’t work.

This is the page: http://cp55.ezyreg.com/~spsp1976/company/strategic-alliance-partners

I just want to have the logo on the front header for each (which I can do) – then when each are rolled over, icon appears in the header where the image was on the previous side.

Thanks! 🙂

[RadModerator]

Hi there,

Adding the icon code should work, but it should be like this

<div class="x-face-graphic"><i class="x-icon-lightbulb-o" style="margin:0;font-size:50px;color:hsl(0,0%,100%);" data-x-icon=""></i></div>

You just missed a quote from style=””

Thanks!

[kirk74Participant]

thanks you for your response But unfortunately still didn’t work .. this is what I have:

<div class="x-face-graphic"><i class="x-icon-lightbulb-o" style="margin:0;font-size:50px;color:hsl(0,0%,100%);" data-x-icon=""></i></div>

I have tried it with and without

::before

in between the <i> tags .. neither works

there is just a space where the icon should be .. sorry to be a pain!

What I would really like to do if we can get this to work, is to actually have the icon above the heading, the way it is on the front side ..

thx!

[RadModerator]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Maybe it’s doable through jQUery. Thanks!

[LelyModerator]

Hi There,

Please add this instead on Appearance > Customize > Custom > Edit Global javasript:

(function($){
   $( '<div class="x-face-graphic"><i class="x-icon-lightbulb-o" style="margin:0;font-size:50px;color:hsl(0,0%,100%);" data-x-icon=""></i></div>').insertBefore( ".custom-card .back .x-face-text .x-face-title" );
})(jQuery);

Then add custom-card on the class field of the card element.

Hope this helps.

[kirk74Participant]

aww thanks .. but I’m sorry still not workng . I will send my login now .. thanks so much 🙂

[kirk74Participant]

This reply has been marked as private.

[Nabeel AModerator]

Hi again,

Thank you for providing the credentials. Please replace the previous code with the following code:

jQuery(document).ready(function($){
	$( ".custom-card .back .x-face-content .x-face-title" ).prepend('<div class="x-face-graphic"><i class="x-icon-lightbulb-o" style="margin:0;font-size:50px;color:hsl(0,0%,100%);" data-x-icon=""></i></div>');
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[kirk74Participant]

OMG PERFECTLY.. and BOOM THAT is why you are all LEGENDS! thank you sooo much xxx

[Nabeel AModerator]

Glad we could help 🙂

Cheers!

[Author]

Posts