Weather Menu Customization

Ask the Community Customization
1

Greetings @Max,

Thank you, this was very useful. I would also like to change the color of the scroll menu (if that what that’s what it’s called :sweat_smile:).

Currently, it’s black, and I’d prefer custom blue (Hex: #4285f4) with the same opacity. Or any other color that would match the widget or other aesthetics of the web page.

I think this would be more visible to users.

image

Best wishes,
mw

1 Like
3

@Master_Web This code will do the trick:

.eapp-weather-forecast-arrow {
  background: #4285f4 !important;
}
1 Like
4

Thanks @Max.

This is a great start. I would like to adjust the opacity, so it doesn’t fully obscure the details behind it. Below are all the code I’m using now. I’m still tinkering to see if I can figure it out, I do love learning.

.eapp-weather-weather-component * {
font-family: Lato;
}
.eapp-weather-forecast-arrow:hover {
background: rgba(66, 134, 244, 1) !important;
}
.eapp-weather-forecast-arrow svg {
fill: white !important;
}
.eapp-weather-forecast-arrow {
background: #4285f4 !important;
}
.scroll-menu-arrow {
opacity: 1;
}

Thanks again,
mw

1 Like
5

The opacity can be adjusted in the highlighted line:

image
image647×337 6.13 KB

6

Thank you @Max.

I get it, I thought that the value was already reducing the opacity. Now I realize this background color - rgba (66, 134, 244, 1), was already made this way, correct?

I could just remove this line of code now, right?

Thanks again,
mw

1 Like
7

@Master_Web It depends on what you’d like to achieve. This highlighted setting changes the opacity of the arrow, if you’d like to always display it, not just on hover:

image
image647×337 6.13 KB

In this case, you should keep this part as well:

.eapp-weather-forecast-arrow:hover {
background: rgba(66, 134, 244, 1) !important;
}

If you want to show the arrows only on hover and would like to adjust its opacity, here is the full code for this:

/* Change color of the arrows on hover */
.eapp-weather-forecast-arrow svg {
  fill: white !important;
}

/* Change background color of the arrows and opacity on hover */
.eapp-weather-forecast-arrow {
  background: #4285f4 !important;
  opacity: 0.5;
}
1 Like
8

Thank you @Max.

So I took out this line yesterday and it worked and looked how I wanted it.

.eapp-weather-forecast-arrow:hover {
background: rgba(66, 134, 244, 1) !important;
}

Today I see that It’s not working how I want it, which is for the background to always be visible with opacity, the arrow can be solid, and the background becomes a solid on hover.

I replaced the line of code, however, it only becomes a solid color on hover. Here is all the code. What did I miss?

.eapp-weather-weather-component * {
font-family: Lato;
}
.eapp-weather-forecast-arrow:hover {
background: rgba(66, 134, 244, 1) !important;
}
.eapp-weather-forecast-arrow svg {
fill: white !important;
}
.eapp-weather-forecast-arrow {
background: #4285f4 !important;
}
.scroll-menu-arrow {
opacity: 0.6;
}

So, I’m not sure what’s missing now.

Thanks again,
mw

1 Like
9

@Master_Web I am afraid I didn’t quite get what final you result you’d like to achieve. Do you want to display arrows just on hover or always?

10

Thanks for your patience, Max,

Always with opacity (#4285f4):

image

And then a solid color on hover:

image

Hope this helps.

Thanks again,
mw

11

For this, you just need to use the code from this message:

12

Thanks Max.

That’s what I was thinking. I copied over the code (removed the quotes), however it still only does solid color on hover.

Could it be something on the backend?

Thanks again,
mw

1 Like
13

That’s weird, but I’ve readded the same code and everything is working fine now. Could you please-double check-it?

1 Like
14

Thanks Max.

I think it’s weird too. I doubled checked line by line, see below:

image
image576×531 33.8 KB

image
image589×519 29.3 KB

Not sure if I’m pushing the widget dashboard too hard :joy: but one of the weather widget preview was looking like this in the dashboard main area, if that’s what it’s called:

image
image294×294 1.65 KB

Thanks again,
mw

1 Like
15

Yes, I see that the code isn’t working again. I’ve passed it on to the devs and will update you tomorrow :slightly_smiling_face:

1 Like
16

Hi there, @Master_Web :wave:

After the recent release the priority of some codes changed, that’s why it didn’t work.

We’ve adjusted the code and everything is working as expected now. Here is the full version:

.eapp-weather-forecast-arrow:hover {
background: rgba(66, 134, 244, 1) !important;
}
.eapp-weather-forecast-arrow svg {
fill: white !important;
}
.eapp-weather-forecast-arrow {
background: #4285f4 !important;
}

.scroll-menu-arrow {
  opacity: 0.6 !important;
}

.menu-wrapper--inner {
  pointer-events: none;
}

.scroll-menu-arrow:hover {
  opacity: 1 !important;
}

Check it out and let me know if you like the result :slightly_smiling_face:

1 Like
17

Thank you Max.

I actually noticed the change in one of the widgets, and copied over the code to the other two.

They are all working flawlessly now.

Thanks again,
mw

1 Like