Hi everyone, i have no clue what im doing…i dont know how to code or really how the rpi/magicmirror works but here i am. So basically im using the default weather module (as it works) and i just wanna replace those icons with custom icons. I also wanna note that im using openmeteo and not the default openweathermap or wtv its called because it didn’t work.

here is my config.js file (the weather part):

module: "weather", position: "top_right", // Adjust position as needed locationName: "xxxx", displayLocation: "xxxx", header: "xxxx", config: { locationName: "xxxx", displayLocation: "xxxx", header: "xxxx", weatherProvider: "openmeteo", // Specify the Open-Meteo provider apiBase: "https://api.open-meteo.com/v1", // REQUIRED: Base URL for Open-Meteo lat: xxxx, // REQUIRED: Latitude of the location lon: xxxx, // REQUIRED: Longitude of the location maxNumberOfDays: 8, // OPTIONAL: Number of forecast days (default is 5) pastDays: 0, // OPTIONAL: Number of past days of data to include (default is 0) units: "imperial", // Set this to 'imperial' for Fahrenheit and miles per hour tempUnits: "imperial", // Make sure to match with 'imperial' windUnits: "imperial", type: "current", // OPTIONAL: Change to "current" if only current weather data is desired iconTable: { '0': 'wi-day-sunny', // Clear sky '1': 'wi-day-cloudy', // Mainly clear '2': 'wi-cloudy', // Partly cloudy '3': 'wi-cloudy', // Overcast '45': 'wi-fog', // Fog '48': 'wi-fog', // Depositing rime fog '51': 'wi-showers', // Drizzle: Light intensity '53': 'wi-showers', // Drizzle: Moderate intensity '55': 'wi-showers', // Drizzle: Dense intensity '56': 'wi-sleet', // Freezing drizzle: Light intensity '57': 'wi-sleet', // Freezing drizzle: Dense intensity '61': 'wi-rain', // Rain: Slight '63': 'wi-rain', // Rain: Moderate '65': 'wi-rain', // Rain: Heavy intensity '66': 'wi-sleet', // Freezing rain: Light intensity '67': 'wi-sleet', // Freezing rain: Heavy intensity '71': 'wi-snow', // Snow fall: Slight '73': 'wi-snow', // Snow fall: Moderate '75': 'wi-snow', // Snow fall: Heavy intensity '77': 'wi-snow', // Snow grains '80': 'wi-showers', // Rain showers: Slight '81': 'wi-rain', // Rain showers: Moderate '82': 'wi-rain', // Rain showers: Violent '85': 'wi-snow', // Snow showers: Slight '86': 'wi-snow', // Snow showers: Heavy '95': 'wi-thunderstorm', // Thunderstorm: Slight or moderate '96': 'wi-thunderstorm', // Thunderstorm with slight hail '99': 'wi-thunderstorm' // Thunderstorm with heavy hail } } }, { module: "weather", position: "top_right", // Adjust position as needed locationName: "xxxx", displayLocation: "xxxx", header: "xxxx", config: { locationName: "xxxx", displayLocation: "xxxx", header: "xxxx", weatherProvider: "openmeteo", // Specify the Open-Meteo provider apiBase: "https://api.open-meteo.com/v1", // REQUIRED: Base URL for Open-Meteo lat: xxxx, // REQUIRED: Latitude of the location lon: xxxx, // REQUIRED: Longitude of the location maxNumberOfDays: 8, // OPTIONAL: Number of forecast days (default is 5) pastDays: 0, // OPTIONAL: Number of past days of data to include (default is 0) units: "imperial", // Set this to 'imperial' for Fahrenheit and miles per hour tempUnits: "imperial", // Make sure to match with 'imperial' windUnits: "imperial", type: "forecast", // OPTIONAL: Change to "current" if only current weather data is desired iconTable: { '0': 'wi-day-sunny', // Clear sky '1': 'wi-day-cloudy', // Mainly clear '2': 'wi-cloudy', // Partly cloudy '3': 'wi-cloudy', // Overcast '45': 'wi-fog', // Fog '48': 'wi-fog', // Depositing rime fog '51': 'wi-showers', // Drizzle: Light intensity '53': 'wi-showers', // Drizzle: Moderate intensity '55': 'wi-showers', // Drizzle: Dense intensity '56': 'wi-sleet', // Freezing drizzle: Light intensity '57': 'wi-sleet', // Freezing drizzle: Dense intensity '61': 'wi-rain', // Rain: Slight '63': 'wi-rain', // Rain: Moderate '65': 'wi-rain', // Rain: Heavy intensity '66': 'wi-sleet', // Freezing rain: Light intensity '67': 'wi-sleet', // Freezing rain: Heavy intensity '71': 'wi-snow', // Snow fall: Slight '73': 'wi-snow', // Snow fall: Moderate '75': 'wi-snow', // Snow fall: Heavy intensity '77': 'wi-snow', // Snow grains '80': 'wi-showers', // Rain showers: Slight '81': 'wi-rain', // Rain showers: Moderate '82': 'wi-rain', // Rain showers: Violent '85': 'wi-snow', // Snow showers: Slight '86': 'wi-snow', // Snow showers: Heavy '95': 'wi-thunderstorm', // Thunderstorm: Slight or moderate '96': 'wi-thunderstorm', // Thunderstorm with slight hail '99': 'wi-thunderstorm' // Thunderstorm with heavy hail } } },

sorry if that looks bad…also note that i got that table from this reddit post (the second image in the post): https://www.reddit.com/r/filemaker/comments/14yrpb9/openmeteo_weather_api_integration_free_icons_free/

here is my custom.css file:

/*! * Weather Icons 2.0.8 * Updated September 19, 2015 * Weather themed icons for Bootstrap * Author - Erik Flowers - erik@helloerik.com * Email: erik@helloerik.com * Twitter: http://twitter.com/Erik_UX * ------------------------------------------------------------------------------ * Maintained at http://erikflowers.github.io/weather-icons * * License * ------------------------------------------------------------------------------ * - Font licensed under SIL OFL 1.1 - * http://scripts.sil.org/OFL * - CSS, SCSS and LESS are licensed under MIT License - * http://opensource.org/licenses/mit-license.html * - Documentation licensed under CC BY 3.0 - * http://creativecommons.org/licenses/by/3.0/ * - Inspired by and works great as a companion with Font Awesome * "Font Awesome by Dave Gandy - http://fontawesome.io" */ @font-face { font-family: 'weathericons'; src: url('../font/weathericons-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } .wi { display: inline-block; font-family: 'weathericons'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wi-fw { text-align: center; width: 1.4em; } .wi-rotate-90 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .wi-rotate-180 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .wi-rotate-270 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .wi-flip-horizontal { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1); -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } .wi-flip-vertical { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1); -webkit-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); } /* Current Weather Icons */ .currentweather .wi-day-sunny { content: url("/home/kool/MagicMirror/css/icons/6fa/day.svg") !important; } .currentweather .wi-night-clear { content: url("/home/kool/MagicMirror/css/icons/6fa/night.svg") !important; } .currentweather .wi-cloudy { content: url("/home/kool/MagicMirror/css/icons/6fa/cloudy.svg") !important; } .currentweather .wi-fog { content: url("/home/kool/MagicMirror/css/icons/6fa/fog.svg") !important; } .currentweather .wi-rain { content: url("/home/kool/MagicMirror/css/icons/6fa/rain.svg") !important; } /* Add more current weather icons as needed */ /* Weather Forecast Icons */ } .weatherforecast .wi-day-sunny { content: url("/home/kool/MagicMirror/css/icons/6fas/day.svg") !important; } .weatherforecast .wi-night-clear { content: url("/home/kool/MagicMirror/css/icons/6fa/night.svg") !important; } .weatherforecast .wi-cloudy { content: url("/home/kool/MagicMirror/css/icons/6fa/cloudy.svg") !important; } .weatherforecast .wi-fog { content: url("/home/kool/MagicMirror/css/icons/6fa/fog.svg") !important; } .weatherforecast .wi-rain { content: url("/home/kool/MagicMirror/css/icons/6fa/rain.svg") !important; } /* Hide Humidity */ .humidity { display: none !important; }

I got the icons from this other weather module (but that module didn’t work as openweathermap is like glitchy or something)… weather module link: https://github.com/MarcLandis/MMM-OpenWeatherMapForecast
when i try to load the magic mirror, i see the numbers - like whats the weather and stuff, but i keep getting the default weather icons.
basically my idea was to override the default weather icons with some custom weather icons that i found but its not exactly working
any help would be greatly appreciated plz help me :(

@kasperinline awesome!!

@Future-Mirror did this help?

@synint said in Trying to create a white background with black text to the clock module title block.:

so ended up changing the root section of the main.css file see code below

just copy that root section to custom.css
then modify.

again the developers window should make quick work of finding the right selector and style setting

@Chiiki58 awesome, glad you’re making progress.

Replying to an old post…I know. But it shows up in search engine results.

One way to easily/cleanly make this adjustment is included in the sample custom.css. Below is an example with the relevant parts only, and adjustments to my preferences (were all 60px values before).

:root { --gap-body-top: 10px; --gap-body-right: 20px; --gap-body-bottom: 10px; --gap-body-left: 20px; }

@oldrocker What modules have you worked on? I love to see upgrades to the system, even if they’re not accepted in the main module.

@oldrocker correct,… only for visual content change… MM doesn’t know anything else the modules does…

A pull request was made on the develop branch : https://github.com/MichMich/MagicMirror/pull/3193

https://github.com/CFenner/MMM-AirQuality

Hi.
I enlarged the letters to see the message clearly.
here was a problem when I get a long message (like 'Unhealthy for Sensitive Group")
the MENTION LINE gets LONGER!

so I want to change it to a short one by myself. (to my Own Language, 덜 나쁨, 나쁨, 최악, 위험)
Does anyone know how to change it?

PLUS! Can I change the color of the letters to match the message?

photostudio_1684895545568.jpg

@foxie the mm base web server is at

http://machine-address:port_from_config.js

module path adds

modules/module_name

and any folder inside module folder
sometimes

node_modules

and library
and it’s subfolder

the

path

library

resolve

method
can help build that path

be careful using localhost for the machine address, as this means ONLY. apps INSIDE the same machine can access

if you ran a remote browser to access your mm with your module, localhost would fail

I will use localhost for this example , using module name fribble

let host_address = config.address==“0.0.0.0”?“localhost”:config.address

“http://”+host_address+“:”+config.port+“/modules/”+this.name+“/node_modules/library_name/folder”

if all u need is the path to the folder

I will leave as an exercise how to get the magicmirror machine ip address if the config says ‘any adapter’ (address:“0.0.0.0”)

@sdetweil Thank you so much. It works!

@pcmofo Default modules, and compliant other modules use the font settings in the root from main.css.

You can copy that over to custom.css and adjust as needed to affect the base.

How do i fix the clock in the top right corner, at the moment it is floating so moves up and down for some reason and is rather inset. This gives an unpleasant aesthetic so id rather the clock was fixed in place. I have attached the current CSS below. Any help is greatly appreciated

#GPHOTO_CURRENT { background-size:cover; } .clock { padding: 10px; background-color: rgba(0, 0, 0, 0.2); } .weather { padding: 10px; background-color: rgba(0, 0, 0, 0.2); } .calendar { padding: 10px; background-color: rgba(0, 0, 0, 0.2); } .clock { top:1px; left: 1px; bottom: inherit; right: inherit; } #GPHOTO_INFO { top: 400px; left: 10px; bottom: inherit; right: inherit; }

I was checking this dashboard Magic(Dashboard)Mirror and saw @MZ-BER was able to stack the number of the day in the calendar icon, I saw a a html and css example, see below, but it’s way beyond my skills

https://codepen.io/davegandy/pen/PoWPXO

@sdetweil thanks for that. I didn’t even think of adding it to config.js. I was so busy trying to change it in the custom.css file that I total forgot you can do it in there as well.

I changed everything back and it works great. It’s a little squashed up so I’m now trying to make it into 2 rows. Not sure how to tackle that one yet.

@merlijnalmer said in is there a way to get the MMM-CalendarExt preset looks in to MMM-CalendarExt2:

styleName: "style20
do you have the css of this model? Please can you put this very nice

@wenike well, you can test on a bigger screen … I know… but some of this is just hard work…

@causerino yes, see

https://forum.magicmirror.builders/topic/14209/server-client-setup-how-to-force-client-s-custom-css/4?_=16175438725888

@mopedmann

Hi, the Css-Switcher is really the more comfortable way to do the change!

but, you don’t learn the basics of coding ;-)

Anyway, good to hear that it works in both ways.

Greetings Foxy