Trying to add custom code to change border color of RSS widget when hovered

Ask the Community Customization
1

The title explains what I’m attempting to do. I think part of the issue is semantics — what I’m referring to as ‘border color’ is actually ‘background’, but which one? There’s Style > Post > Background Color, which is the background color of the widget, and Style > Background > Background, which is the border I’m trying to change. I tried the following CSS variations, but neither of them work:

[class*=“Post__Container”]:hover {
background-color:#fff !important;
transition:background-color 0.3s ease-in;
}

and…

class*=“Background__Container”]:hover {
background-color:#fff !important;
transition:background-color 0.3s ease-in;
}

I also tried doing it as a JS onMouseOver event,. It validates okay, but doesn’t work. Ditto for the element.addEventListener(‘mouseover’, …) method.

Any help?

2 Likes
3

Hi there and welcome aboard, @Bob_Wilson :waving_hand:

This code will do the trick:

.es-background-overlay:hover {
    background-color: #ffff !important; 
    transition:background-color 0.3s ease-in;
}

Please add it to the Custom CSS section on the Style tab of your widget’s settings and let me know if you like the result :wink:

1 Like
4

Thank you, Max! I went with a slightly different color for better visibility, but your code works perfectly. :+1: Now that I see it in action though, it appears I requested the wrong thing. Hover state does indeed now highlight the border, but it highlights the border for the entire feed, not just the post hovered. Is there a way of either changing the border color on just the post hovered, or alternatively, change the background color of a particular post when hovered?

Follow-up Question: It seems I had the class wrong, and from other posts I’ve read, other people have the same confusion. Is there a way to determine the class using our browser’s Rt-click + Inspect menu? It looks like the info might be there, but the quantity of data is overwhelming.

2 Likes
5

We have a special guide explaining how to find a correct class of the element. Feel free to check it out - Guide to CSS Codes.

As for your request, I’ve passed it on to the devs. They’ll adjust the code and I’ll update you once it’s done :wink:

1 Like
6

Thank you for wating!

Please try to use this CSS code instead and let me know if you like the result :wink:

@external {
  :root {
  --padding-horizontal: 10px;
  --padding-vertical: 15px;
  }
}

.es-list-layout {
  gap: 0 !important;
}

.es-widget-background-wrapper {
  padding: 0;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  overflow: hidden;
}

.es-list-layout > div {
  border: solid;
  border-width: var( --padding-horizontal);
  border-color: rgb(238, 238, 238);
}


.es-list-layout>div {
  border-top-width: var(--padding-vertical);
  border-bottom-width: var(--padding-vertical);
}

.es-list-layout>div:hover {
  border-color: #cfc !important;
  transition: border-color 0.3s ease-in-out;
}
1 Like
7

Yes @Max , works great! I had to reduce padding to fit within the constraints of my narrow sidebar where the widget is placed, and I want the transition away to be instant, so I changed “ease-in-out” to “ease-in” and it is now perfect!

My thanks to you and the dev working behind the scenes. You should both take the rest of the day off with pay. If anyone asks, just tell them I said it’s okay lol!

2 Likes
8

I am so happy you like how the code worked! Thank you so much for your kind words :blush:

If any further questions come up, we’re always here to help.

9

In the meantime, we’d like to invite you to participate in our new contest, where you can win a 3-month extension for your subscription - March Contest: Create a Dating Profile for Elfsight Widget and Win 3 Months FREE! :wrapped_gift:

Check the details and join in :wink: