I can't apply a hover css customization

Ask the Community Customization
1

Hi, I want to add an RSS feed for news, and would like to customize a movement up -2px when the mouse hovers over the card, and a drop shadow change.

Normally I’d apply this code

:hover {
box-shadow: 0px, 8px, 8px, 0px #00000040;
transform: translate (0px,-2px);
}

What is the class name that I should use before the “:”? I tried the code without the “:” and it doesn’t work either

Please if anyone could help :pray:

1 Like
4

Hi @Maputo, happy to see you on our forum! :hugs:

Our developers have put together a CSS code that should work for the case you described:

[class^="CardLayout__Container"] {
  box-shadow: 0px 8px 8px 0px #00000040;
  transition: transform 0.3s;
}

[class^="CardLayout__Container"]:hover {
  transform: translate(0px, -2px);
}

Please replace your current CSS code with the code above and let me know if it worked :slight_smile:

1 Like
5

Hi Helga that worked fine!

I forgot to ask about something else. The link “read more”, I’d like to customize it to be the same color as the other links in my website #1f6096 and underlined. This is where I have, but again I am not sure about the classes:

a:link {
color: #1f6096;
text-decoration: underline;
}

I also would like to have the bottom padding of the card at 8px, I believe there is a default bottom margin of 16px on the container featuring author name, date and source. What is the class name of that container? So that I can apply a:

{margin-bottom: 8px;
}

Please share the style guide for Elfsight class names if there is one, thanks a lot!

6

@Maputo, thanks for your reply, great that the code worked! :slight_smile:

I hate to say it, but at the moment we don’t have the style guide to share, I’m really sorry for the inconvenience :pensive: I agree that this is a great idea, and we’ll try to think in this direction.

Meanwhile, these are the CSS codes that our devs have prepared for you, could you please try them?

[class^="Text__Container"] [class^="Text__Control"] {
  text-decoration: underline;
  color: #1F6096;
}

[class*="CardUserBlock__UserBlock"] {
  padding-bottom: 8px !important;
}
7

That worked beautifully, thank you Helga!

1 Like
8

You’re most welcome, @Maputo! :heart_eyes: