How to style classic card element

Hi there,

I’m trying to style the classic card element. I’ve tried adding an ID and adding custom CSS, but I can’t seem to style the header.

Can you assist?

Many thanks,
LK

Hi @LaurenCK,

Thanks for writing in.

To add class or id to your card, it could be done by adding it in the id or class box below the classic card element.

If you have added already, you could uniquely customize your classic card element.

Not sure what you mean by header. Would you mind sharing us a screenshot of what header that you want to change.
Share us the Custom CSS that you made so we could check it.

For the meantime, you could check the link below on how to style your class card element.


Hope it helps.

Let us know how it goes.

Thanks.

Hi there,

Sorry, I’m trying to change the font-family of the Front Title and body content of the cards.

I have some limited styling ability with inline for the body content of the card, but I can’t figure out how to style the card Title (in the screenshot, the word ‘Engagement’).

For the content of the card:
I already have some inline styling in the body–but when I try to change the font-family with inline css, everything stops working (e.g., line-height & text alignment revert and font-family doesn’t change). If I take font-family out of my inline css, the other two selectors work.

  • CTR
  • Clicks
  • Impressions
  • Viewability

Is it possible to style the title through an ID and custom CSS? I tried inline css in the Title field, but it just styles the body content, the Title itself doesn’t change.

Many thanks,
LK

Hi again,

There must be a syntax error in your inline css with font family which is breaking the other style rules. To style your card headline using ID and custom CSS. just add the following code in the Theme Options > CSS:

#funnel-kpi-header .x-face-content .x-face-title {
    font-family: Lato;
    font-size: 30px;
    color: #66b934;
    font-weight: bold;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!

1 Like

Thank you so much!! :smiley:

Hi @LaurenCK,

Happy to hear that.

Feel free to ask us again.

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.