Changing icons of the modules Current Weather and Weather Forecast

[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…

[sdetweil]

@Manu85 topic.

you should have been able to create a new topic

[Manu85]

@sdetweil thanks to you I succeeded, I hope I understood the logic well, I will try on other icons to be sure I understand, you are the best

[Manu85]

@sdetweil I put that in my css…

.MMM-OneCallWeather .weather-icon  p {
    top: -65px !important;    
    left: 16px  !important;  
}

[sdetweil]

@Manu85 awesome!!!

[sdetweil]

@Manu85 said in Changing icons of the modules Current Weather and Weather Forecast:

I will try on other icons

it’s the same process icons or text…