Weather widget with custom icons

Wishlist Weather
1

Would be great if we could use custom icons on that widget. There is a way to do that?

1 Like
2

Hi there, @Klayton :waving_hand:

Interesting idea, we’ll try to consider this opportunity in the future, especially if it gets more votes :slightly_smiling_face:

As for now, I’ll be happy to check if there is a custom solution. Could you please specify which icons you’d like to replace with the custom?

1 Like
3

Something link this > https://www.flaticon.com/free-animated-icon/rain_6455055?term=clouds&page=1&position=24&origin=search&related_id=6455055

But with only one color

1 Like
5

Thank you!

We couldn’t download the image you’ve shared (the Premium plan is needed), that’s why we’ve used a random icon to demonstrate how it works.

This code should be added to the Custom CSS field on the Style tab of your widget’s settings:

.eapp-weather-forecast-item-icon:has(g.am-weather-sun):has(g.am-weather-cloud-2) svg {
  display: none;
}

.eapp-weather-forecast-item-icon:has(g.am-weather-sun):has(g.am-weather-cloud-2):after {
  content: "";
  background-size: 32px 32px;
  display: block;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4NCjxzdmcgZmlsbD0iIzAwMDAwMCIgaGVpZ2h0PSI4MDBweCIgd2lkdGg9IjgwMHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiANCgkgdmlld0JveD0iMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik00NzguOTA4LDIyMi43MjZjLTE5LjYzMy0yMi42OTQtNDYuMTcyLTM4LjI0LTc1LjMxMS00NC4yNDhjLTIwLjA4Ny02Ny40NzQtODIuMTIyLTExNC4wMzEtMTUzLjE0Mi0xMTQuMDMxDQoJCQljLTM2LjIxOSwwLTcxLjY5NywxMi40NTctOTkuODk4LDM1LjA3NGMtMjYuMTU0LDIwLjk3Ni00NS4yMDUsNDkuOTA4LTU0LjExMSw4MS45OTFDMzkuMzU0LDE5OC43NzMsMCwyNTEuNDEsMCwzMTEuNjE3DQoJCQljMCw3NC45NTYsNjAuOTgsMTM1LjkzNiwxMzUuOTM1LDEzNS45MzZoMjQxLjY4OWMwLjI2OSwwLDAuNTM3LTAuMDEsMC44MDEtMC4wMzFjMzUuNzAxLTAuNjA4LDY5LjE3Mi0xNC45Miw5NC4zMS00MC4zNDUNCgkJCWMyNS4zMi0yNS42MDksMzkuMjY1LTU5LjU0NiwzOS4yNjUtOTUuNTZDNTEyLDI3OC45NjMsNTAwLjI0NywyNDcuMzk0LDQ3OC45MDgsMjIyLjcyNnogTTM3Ny40OTcsNDI2Ljg4NA0KCQkJYy0wLjE3NiwwLjAwMS0wLjM0OSwwLjAwOC0wLjUyMiwwLjAxOWgtMjQxLjA0Yy02My41NjgsMC0xMTUuMjg1LTUxLjcxOC0xMTUuMjg1LTExNS4yODZjMC01Mi44MjYsMzUuNzE0LTk4Ljc3OSw4Ni44NTItMTExLjc0OA0KCQkJYzMuNzMyLTAuOTQ3LDYuNjI4LTMuODkyLDcuNTExLTcuNjQxYzE0Ljg1My02My4wNzcsNzAuNTQ5LTEwNy4xMywxMzUuNDQzLTEwNy4xM2M2My44MDQsMCwxMTkuMjc4LDQzLjE0NCwxMzQuOTA0LDEwNC45MTgNCgkJCWMxLjAxNyw0LjAxOCw0LjMzOSw3LjA0LDguNDM1LDcuNjcyYzU1LjYxNSw4LjU3OSw5Ny41NTUsNTcuNTU3LDk3LjU1NSwxMTMuOTI4QzQ5MS4zNTEsMzc0LjQxMiw0NDAuMjc2LDQyNi4xMiwzNzcuNDk3LDQyNi44ODR6DQoJCQkiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCgk8Zz4NCgkJPHBhdGggZD0iTTI2NS41MjcsMjcwLjQ3MmMtOC42NjMtMjcuMzA4LTI1LjQ1NC01MC44MjEtNDguNTU0LTY4Yy0yMy41NjctMTcuNTI1LTUxLjU5MS0yNi43ODktODEuMDM4LTI2Ljc4OQ0KCQkJYy01LjcwMiwwLTEwLjMyNSw0LjYyMi0xMC4zMjUsMTAuMzI1czQuNjIyLDEwLjMyNSwxMC4zMjUsMTAuMzI1YzUwLjQ4NywwLDk0LjY1NywzMi4zMDQsMTA5LjkxLDgwLjM4Mw0KCQkJYzEuMzk1LDQuMzk3LDUuNDU5LDcuMjA2LDkuODM4LDcuMjA2YzEuMDM1LDAsMi4wODctMC4xNTcsMy4xMjQtMC40ODZDMjY0LjI0MiwyODEuNzExLDI2Ny4yNTEsMjc1LjkwNywyNjUuNTI3LDI3MC40NzJ6Ii8+DQoJPC9nPg0KPC9nPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0yNzEuNzc4LDMwNi42MjJjLTAuMjA3LTUuNjk4LTQuOTc4LTEwLjE1LTEwLjY5MS05Ljk0NWMtNS42OTgsMC4yMDctMTAuMTUsNC45OTMtOS45NDUsMTAuNjkxDQoJCQljMC4wNTIsMS40MTEsMC4wNzcsMi44NDEsMC4wNzcsNC4yNDljMCw1LjcwMiw0LjYyMiwxMC4zMjUsMTAuMzI1LDEwLjMyNWM1LjcwMiwwLDEwLjMyNS00LjYyMiwxMC4zMjQtMTAuMzI1DQoJCQlDMjcxLjg2OCwzMDkuOTYyLDI3MS44MzgsMzA4LjI4MSwyNzEuNzc4LDMwNi42MjJ6Ii8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+");
}

If you have a ready list of the icons you’d like to use in the widget, please share it with us and we’ll adjust the code for you :slightly_smiling_face:

1 Like
6

Oh Thank you!
But I was just suggesting an improvement :sweat_smile:

1 Like
7

Got it, thanks :wink: