@sdetweil Thank you again. Solved with: Added 2 rows. Increased hw Increased region middle.center Result: [image: 1741813929089-bildschirmfoto_2025-03-12_22-06-37.png]

@gonzonia sameo

@sdetweil I didn’t see a specific call out in the documentation for that module but seems to be working fine. One the first page the background photo is at full opacity and on the other two pages the same image is dimmed (via the gradient)

@aaronaxvig Thank you! All other search results that had changing the CSS body really messed up other module internal alignment. This resizes correctly and doesn’t mess with other module alignment

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.

@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? [image: 1684895684595-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