Styling Classic Cards

[poyser7]

Hi there,

I would like to style the Classic card. Ive managed to add:

#specialism-card .x-face-title {
    font-family:;
    font-size: 37px;
    color: #FF551D;
    font-weight: medium;
  	letter-spacing:0;
}

But I would also like the font style on both sides to be different to each other. Can someone tell me what the css is for having different stying for both sides please?

All the best

[rad]

Hi @poyser7,

Thanks for reaching out.

That would require multiple classes, hence multiple selectors. But I’m not fully sure if you’re referring to texts from the side by side cards, or just words on both sides on the same text. Would you mind providing the URL where these cards are visible, then please provide more clarification of which texts.

Thanks!

[poyser7]

Thank you for your reply.

The URL where the cards are showing is at the bottom of this home page: http://tempsmal.wpengine.com

What Im referring to is mainly the titles on both sides of the cards, for example, Id like to make the titles of the front to be White (They are currently Orange), and the Titles on Reverse stay as Orange. I would also like to adjust the size of the titles so that they fit properly on both sides.

Ive already used the .x-face-title but that seems to change both sides of the card. Can they be styles individually?

Kind regards

[ruenel]

Hello @poyser7,

Before anything else, please be advised that you CANNOT use the ID name in multiple times. An element ID must be unique. Thus, please edit your cards and insert a custom class instead. And then you can update your custom css into this:

.specialism-card .x-face-title {
    font-family:;
    font-size: 37px;
    color: #FF551D;
    font-weight: medium;
  	letter-spacing:0;
}

To target back and front, you will have to use this custom css:

.specialism-card .x-face-outer.front .x-face-title {
  /* your styling for the front */
}

.specialism-card .x-face-outer.back .x-face-title {
  /* your styling for the back */
}

We would love to know if this has worked for you. Thank you.

[poyser7]

Hi there,

This worked perfectly!

Thank you very much for your help.

Best regards
Jay

[ruenel]

You are most welcome Jay!