Changing icons of the modules Current Weather and Weather Forecast

[Manu85]

@sdetweil I just want to enlarge these images, tell me what elements you need because I cannot select the entire line of icons I can only select one in the console with ctrl shift i

[sdetweil]

@Manu85 it has a class weather-icon

so you want the img under weather-icon under the weather module (I think)

.weather .weather-icon img {
your stuff
}

[sdetweil]

@Manu85 so you put that into custom.css and hit refresh(f5) on the dev window to see the results

[Manu85]

@sdetweil I hope I expressed myself well, I want to enlarge the weather icons for each day of the week

[sdetweil]

@Manu85 yes each icon uses the same weather-icon class. not just one

try it

[Manu85]

@sdetweil I put this in custom.css?

.weather .weather-icon img {

  }

[sdetweil]

@Manu85 AND the sizing stuff u created n the developer console upper right window inside the braces, copy/paste

swipe them with the mouse, copy

[Manu85]

@sdetweil I copied this line because it’s the one that enlarges the icon in the console, I put that in css.custom and it’s still the same

.weather .weather-icon img {
   max-width: 64px;
  }

default is 44px
when I refresh the console page and I select the icon I don’t have any additional css.custom lines, I don’t know if my explanation is clear

[sdetweil]

@Manu85 should be a strike thru on the 44px

did u save the custom.css?

[Manu85]

@sdetweil yes, I saved the custom and when I type 64px instead of 44px I see the icon growing, but that doesn’t change anything and in the console window it’s always the same data

[sdetweil]

@Manu85 ok hang on. I’ll get my laptop …

[Manu85]

@sdetweil OK thanks

[sdetweil]

@Manu85 ok, i think this is what you want

1. add

classes:"forecast",

the the weather forecast , after the module:“weather”, line

2. then add this to custom.css

.forecast .weathericon {
    font-size: 125%;
}

you can change the font-size bigger too

refresh the mm page

[manu85340]

@sdetweil ok thanks I’ll try that when I get home

[Manu85]

@sdetweil I added in js.config

classes:"forecast",

after the line:

module: "MMM-OneCallWeather",

then in custom css:

.forecast .weather-icon {
     font-size: 125%;
}

I refreshed but it doesn’t change anything…

[sdetweil]

@Manu85 sorry, darn using the default calendar again… hang on
this TOPIC is about default calendar and weather

[sdetweil]

@Manu85 in custom.css

.MMM-OneCallWeather .weather-icon  img {
    max-width: 64px !important;    
}

[Manu85]

@sdetweil I’m sorry, it’s my fault, I mixed up the topics…but I didn’t know how to make another topic and let it be you who answers me!
I modified the custom and it works, thanks again for that

[Manu85]

@sdetweil I still need you, in the weather module there are “bubbles” with the wind speed inside, but the numbers are not centered, I made screenshots of the console and I saw where I can change the position however I am unable to put this in my custom css, can you help me please?

[sdetweil]

@Manu85 so, you need to make the selector clause

all the stuff before the {

you know it starts w the module name class (with a leading dot)

the bottom of the html pane has a list of the elements tree. the rightmost is the thing u are selected on

for your prior post (on my phone again)

so you need to find the smallest unique list that makes it work. start from the right
and you may have to use !important to force
it. css always uses the most specific attributes

drawing w my thumb…