[odomainsParticipant]

Is there a way to change either the front of the back of the “card” element so that it is an image?

The reason I’m asking is because I think it would work well for a portfolio piece, if it initially showed a design and then a description with a link when flipped over.

Thanks!

[John EzraMember]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-card-inner {
    background-image: url(//URLtoImageHere);
    background-size: contain;
}

.x-face-outer.front {
    background-color: transparent!important;
    border-color: transparent!important;
}

Note: Replace with your URL and you should be good to go.

Hope this helps – thanks!

[patroblesParticipant]

Hi there,
I was wondering about this as well, but have a follow up question.
In Cornerstone, can I add an ID to an element so that I can later refer to it individually in my CSS?

With the code shown above im changing all my cards to the same image, but I would like a different image on each card.

I tried using the advanced controls to set the ID and then refered to that ID using the custom CSS, however that doesn’t seem to be working. Does it only load ID’s but not assign them to the elements?

**Edit:
I now have succesfully added the ID to the class and, through surfing the cards related questions, have found the classes necesary to do what I was looking for.

However I was wondering if there is documentation on the cards (and other cornerstone) elements? So that finding the necesary class I want to edit in the CSS isn’t so complicated.
Thanks!

[Paul RModerator]

Hi,

Glad you were able to figure it out.

Everything we have in on the knowledge base.

https://community.theme.co//kb/

With regards to finding class, you can use inspect element in chrome, plesae refer to the link below.

https://community.theme.co//kb/element-spacing/

Thanks

[MaParticipant]

Hi there! Thank you this was very useful! I’ve used this topic and another to come up with this code to insert image.

.homecard1 .x-face-outer.front .x-face-inner {
background-color: transparent !important;
background-image: url(‘image url here’);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
}

I still have some questions though if you make so kindly advice:

#1 The only way I can see the whole picture is with “background-size: contain;” but what happens is you can still the right and left sides of the image color. Also when there is less text the image gets smaller. Is it possible with CSS to make an image “fit” into the card? If not, can I know the card image size like 300 by 500 so I can find an image that fits that?

#2 How do I remove the text on the card? When I remove, the follow shows up “This is where the text on the front…”

#3 How do I remove the title?

#4 Is it possible to place the icon on the back of the card and not the front?

Thank you so much!

[MaParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Maasha,

Thanks for writing in!

#1: As the website is responsive, there is no single size that you can use for the image and it will work throughout the devices. The only way here would be to use Cover, Contain or 100% 100% as your background size. By using 100% 100%, it will stretch the image to fill the entire container. Though, it will distort the image proportions.

To use this, change background-size: contain; to background-size: 100% 100%; from your CSS code.

#2: If you wish to disable the description, you can use a class of disable-front-decs to your Card element under Class field of your Card settings (see: http://prntscr.com/7qeolc) and add following code under Custom > CSS in the Customizer:

.disable-front-decs .x-face-outer.front .x-face-text {
   display: none;
}

If you want to disable the inner card title, use class disable-back-decs and add following CSS code instead:

.disable-back-decs .x-face-outer.back .x-face-text {
   display: none;
}

#3: Please review this thread: https://community.theme.co//forums/topic/how-to-use-card-element/#post-331242

#4: Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks!

[MaParticipant]

Hi! Thank you for getting back to me.

#1 It’s too bad about the picture. I understand there is no single size for every device, but what size would you recommend for desktop? Can you please advice on the size of the card because I have no clue how to find it.

#2 Thank you 🙂

#3 Thank you 🙂

#4 Ok thank you anyway 🙂

[ChristopherModerator]

Hi there,

Please try to uses images with dimension of 1400*993 px.

Thanks.

[MaParticipant]

Thanks it works fine now!

http://www.peace6.com/jasminericesoap

thanks!! 🙂

[ChristopherModerator]

You are welcome.

[axelbenParticipant]

Hello there !
You answered for the front side of the card with :

.x-card-inner {
background-image: url(//URLtoImageHere);
background-size: contain;
}

.x-face-outer.front {
background-color: transparent!important;
border-color: transparent!important;
}

It’s perfect, but what about the back side image? Thanks for answer… 🙂

[JadeModerator]

Hi Axel,

Please try this:

.x-card-outer .x-card-inner {
    background-image: url(//URLtoImageHere);
    background-size: contain;
}

.x-face-outer.front,
.x-face-outer.back {
    background-color: transparent!important;
    border-color: transparent!important;
}

Hope this helps.

[NatalieParticipant]

Hi, I am using these features to turn the front side of my card into an image (icons I made) and want the back side to be a description of what each side stands for. The code almost works completely perfectly, except when you flip the card, the icon from the front shows through (mirror-flipped) on the back side of the card, effectively destroying the effect and obscuring text. Is there a way to fix this?

I know it likely has to do with the transparent setting, but removing that makes the image impossible to show.

This is my code:

.x-face-outer.front {
background-color: transparent!important;
border-color: transparent!important;
}

.x-face-inner.front {
background-color: #fff!important;
}

.x-face-outer.front .x-face-title,
.x-face-outer.front .x-face-text {
display: none;
}

.x-card-inner {
min-height: 400px;
}

#obj1 .x-card-inner {
background-image: url(example.png);
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
}

[JadeModerator]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Author]

Posts