A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Subcategories

  • Share your custom style sheets with the community!

    24 Topics
    302 Posts
    J
    @jerryy622 Hey Jerry, This sounds fantastic! Please share your scripts or a link as to where to find the info! I would love to have this kind of thing running on my TV so i can view it when i switch to the HDMI channel that my Pi would be hooked to! I would love to see some screen shots of what you created also! Joe
  • You have questions regarding CSS?

    114 Topics
    680 Posts
    R
    @kool said Bumping this back up. Pleeeease help Dear @kool , if you are using url as suggested by Sam ( @sdetweil ), you are nearly done. As far as I can see from my rookie perspective you do have some redundancies in your config.js (e.g. the unit section: units, tempUnits, windUnits) ) but this shouldn’t disturb. As far as I understood you can delete these icontables because you do not use the icon-font but try to use some images from sigle file-URLs instead - so you can delete the whole section iconTable {} with all entries. In addition you have to adapt (see above, Sam’s tip) the URL of all you images in your custom.css file. (pls. double check, if the files are really in these locations) You wrote in your current css .weatherforecast .wi-day-sunny { content: url("/home/kool/MagicMirror/css/icons/6fas/day.svg") !important; } IF your weather-icon files are really in this directory (/home/kool/MagicMirror/css/icons/6fas/) than your css should be as follows: .weatherforecast .wi-day-sunny { content: url("/css/icons/6fas/day.svg"); You do not need the !important flag (in my case) second wrong thing besides the URL is your qualifier. you are using .weatherforecast .wi-something .... This cannot be recognized because .weatherforecast is not defined. At first you have to decide if you want to have different icons for the current weather and for the weather forecast. (In my case this is true). IF you would like to have this you have to differentiate the two instances of the weather-module by a “classes” definition. For example your first instance of the weather module (current weather) than should be module: "weather", position: "top_right", // Adjust position as needed classes: "weather_current", config: { 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 } }, (pay attention for the third line: classes: “weather_current”, ) THIS is your qualifier if you are about to diffrentiate between current weather and weather forecast image-wise. (“weather_current” is just an example! you can name it like you want every name is suitable and OK, only pay attention that all of these namings are strictly case sensitive, so Weather is NOT the same as weather" Your correct line for custom.css than is: .weather_current .wi-day-sunny { content: url("/css/icons/6fas/day.svg"); and the same dance than for your second instance with DIFFERENT classes-clause in config.js (e.g. a " classes: “weather_forecast”, " in the definition of the second weather instance ) results in a custom.css entry like this: .weather_forecast .wi-day-sunny { content: url("/css/icons/some_other_directory_with_smaller_icons/day.svg"); Because the “forecast instance” of the weather module is (in my case) organized as table I found it really useful to differentite these logos - big ones for current, smaller ones for the forecast: [image: 1744630855324-screenfloat-bildschirmfoto-von-sublime-text-am-14_04_2025-13_38_51-14_04_2025-13-38-51.jpg] If You do NOT like to differentiate the current and forecast instance you do NOT need the classes-phrase in config.js and your correct qualifier is the name of the module (so “weather” ) and your custom.css entry is like this: .weather .wi-day-sunny { content: url("/css/icons/6fas/day.svg"); And this than is valid for both instances. Keep in mind that there are a LOT more weather conditions than the two times 5 conditions you have defined in your current custom.css! my own definition for the current weather for your reference: .weather_current .wi-fog { content: url("/css/icons/current/wsymbol_0007_fog.png"); } .weather_current .wi-cloudy { content: url("/css/icons/current/wsymbol_0002_sunny_intervals.png"); } .weather_current .wi-cloudy-windy { content: url("/css/icons/current/wsymbol_0004_black_low_cloud.png"); } .weather_current .wi-rain { content: url("/css/icons/current/wsymbol_0018_cloudy_with_heavy_rain.png"); } .weather_current .wi-showers { content: url("/css/icons/current/wsymbol_0017_cloudy_with_light_rain.png"); } .weather_current .wi-thunderstorm { content: url("/css/icons/current/wsymbol_0024_thunderstorms.png"); } .weather_current .wi-snow { content: url("/css/icons/current/wsymbol_0019_cloudy_with_light_snow.png"); } .weather_current .wi-snowflake-cold { content: url("/css/icons/current/wsymbol_0020_cloudy_with_heavy_snow.png"); } .weather_current .wi-na { content: url("/css/icons/current/wsymbol_0999_unknown.png"); } .weather_current .wi-day-sunny { content: url("/css/icons/current/wsymbol_0001_sunny.png"); } .weather_current .wi-day-cloudy { content: url("/css/icons/current/wsymbol_0043_mostly_cloudy.png"); } .weather_current .wi-day-cloudy-gusts { content: url("/css/icons/current/wsymbol_0004_black_low_cloud.png"); } .weather_current .wi-day-cloudy-windy { content: url("/css/icons/current/wsymbol_0004_black_low_cloud.png"); } .weather_current .wi-cloudy-windy { content: url("/css/icons/current/wsymbol_0004_black_low_cloud.png"); } .weather_current .wi-day-fog { content: url("/css/icons/current/wsymbol_0007_fog.png"); } .weather_current .wi-day-hail { content: url("/css/icons/current/wsymbol_0015_heavy_hail_showers.png"); } .weather_current .wi-day-haze { content: url("/css/icons/current/wsymbol_0005_hazy_sun.png"); } .weather_current .wi-day-lightning { content: url("/css/icons/current/wsymbol_0016_thundery_showers.png"); } .weather_current .wi-day-rain { content: url("/css/icons/current/wsymbol_0085_extreme_rain_showers.png"); } .weather_current .wi-day-rain-mix { content: url("/css/icons/current/wsymbol_0009_light_rain_showers.png"); } .weather_current .wi-day-rain-wind { content: url("/css/icons/current/wsymbol_0010_heavy_rain_showers.png"); } .weather_current .wi-day-showers { content: url("/css/icons/current/wsymbol_0018_cloudy_with_heavy_rain.png"); } .weather_current .wi-day-sleet { content: url("/css/icons/current/wsymbol_0087_heavy_sleet_showers.png"); } .weather_current .wi-day-sleet-storm { content: url("/css/icons/current/wsymbol_0089_heavy_sleet.png"); } .weather_current .wi-day-snow { content: url("/css/icons/current/wsymbol_0011_light_snow_showers.png"); } .weather_current .wi-day-snow-thunderstorm { content: url("/css/icons/current/wsymbol_0057_thundery_snow_showers.png"); } .weather_current .wi-day-snow-wind { content: url("/css/icons/current/wsymbol_0053_blowing_snow.png"); } .weather_current .wi-day-sprinkle { content: url("/css/icons/current/wsymbol_0009_light_rain_showers.png"); } .weather_current .wi-day-storm-showers { content: url("/css/icons/current/wsymbol_0018_cloudy_with_heavy_rain.png"); } .weather_current .wi-day-sunny-overcast { content: url("/css/icons/current/wsymbol_0002_sunny_intervals.png"); } .weather_current .wi-day-thunderstorm { content: url("/css/icons/current/wsymbol_0024_thunderstorms.png"); } .weather_current .wi-day-windy { content: url("/css/icons/current/wsymbol_0060_windy.png"); } .weather_current .wi-solar-eclipse { content: url("/css/icons/current/wsymbol_0005_hazy_sun.png"); } .weather_current .wi-hot { content: url("/css/icons/current/wsymbol_0045_hot.png"); } .weather_current .wi-day-cloudy-high { content: url("/css/icons/current/wsymbol_0006_mist.png"); } .weather_current .wi-day-light-wind { content: url("/css/icons/current/wsymbol_0060_windy.png"); } .weather_current .wi-night-clear { content: url("/css/icons/current/wsymbol_0008_clear_sky_night.png"); } .weather_current .wi-night-alt-cloudy { content: url("/css/icons/current/wsymbol_0041_partly_cloudy_night.png"); } .weather_current .wi-night-alt-partly-cloudy { content: url("/css/icons/current/wsymbol_0041_partly_cloudy_night.png"); } .weather_current .wi-night-alt-cloudy-gusts { content: url("/css/icons/current/wsymbol_0041_partly_cloudy_night.png"); } .weather_current .wi-night-alt-cloudy-windy { content: url("/css/icons/current/wsymbol_0041_partly_cloudy_night.png"); } .weather_current .wi-night-alt-hail { content: url("/css/icons/current/wsymbol_0031_heavy_hail_showers_night.png"); } .weather_current .wi-night-alt-lightning { content: url("/css/icons/current/wsymbol_0032_thundery_showers_night.png"); } .weather_current .wi-night-alt-rain { content: url("/css/icons/current/wsymbol_0025_light_rain_showers_night.png"); } .weather_current .wi-night-alt-rain-mix { content: url("/css/icons/current/wsymbol_0026_heavy_rain_showers_night.png"); } .weather_current .wi-night-alt-rain-wind { content: url("/css/icons/current/wsymbol_0026_heavy_rain_showers_night.png"); } .weather_current .wi-night-alt-showers { content: url("/css/icons/current/wsymbol_0025_light_rain_showers_night.png"); } .weather_current .wi-night-alt-sleet { content: url("/css/icons/current/wsymbol_0029_sleet_showers_night.png"); } .weather_current .wi-night-alt-sleet-storm { content: url("/css/icons/current/wsymbol_0029_sleet_showers_night.png"); } .weather_current .wi-night-alt-snow { content: url("/css/icons/current/wsymbol_0028_heavy_snow_showers_night.png"); } .weather_current .wi-night-alt-snow-thunderstorm { content: url("/css/icons/current/wsymbol_0075_thundery_snow_showers_night.png"); } .weather_current .wi-night-alt-snow-wind { content: url("/css/icons/current/wsymbol_0071_blowing_snow_night.png"); } .weather_current .wi-night-alt-sprinkle { content: url("/css/icons/current/wsymbol_0025_light_rain_showers_night.png"); } .weather_current .wi-night-alt-storm-showers { content: url("/css/icons/current/wsymbol_0026_heavy_rain_showers_night.png"); } .weather_current .wi-night-alt-thunderstorm { content: url("/css/icons/current/wsymbol_0032_thundery_showers_night.png"); } .weather_current .wi-night-cloudy { content: url("/css/icons/current/wsymbol_0041_partly_cloudy_night.png"); } .weather_current .wi-night-cloudy-gusts { content: url("/css/icons/current/wsymbol_0044_mostly_cloudy_night.png"); } .weather_current .wi-night-cloudy-windy { content: url("/css/icons/current/wsymbol_0044_mostly_cloudy_night.png"); } .weather_current .wi-night-fog { content: url("/css/icons/current/wsymbol_0064_fog_night.png"); } .weather_current .wi-night-hail { content: url("/css/icons/current/wsymbol_0039_cloudy_with_heavy_hail_night.png"); } .weather_current .wi-night-lightning { content: url("/css/icons/current/wsymbol_0032_thundery_showers_night.png"); } .weather_current .wi-night-partly-cloudy { content: url("/css/icons/current/wsymbol_0041_partly_cloudy_night.png"); } .weather_current .wi-night-rain { content: url("/css/icons/current/wsymbol_0025_light_rain_showers_night.png"); } .weather_current .wi-night-rain-mix { content: url("/css/icons/current/wsymbol_0026_heavy_rain_showers_night.png"); } .weather_current .wi-night-rain-wind { content: url("/css/icons/current/wsymbol_0025_light_rain_showers_night.png"); } .weather_current .wi-night-showers { content: url("/css/icons/current/wsymbol_0026_heavy_rain_showers_night.png"); } .weather_current .wi-night-sleet { content: url("/css/icons/current/wsymbol_0029_sleet_showers_night.png"); } .weather_current .wi-night-sleet-storm { content: url("/css/icons/current/wsymbol_0029_sleet_showers_night.png"); } .weather_current .wi-night-snow { content: url("/css/icons/current/wsymbol_0027_light_snow_showers_night.png"); } .weather_current .wi-night-snow-thunderstorm { content: url("/css/icons/current/wsymbol_0075_thundery_snow_showers_night.png"); } .weather_current .wi-night-snow-wind { content: url("/css/icons/current/wsymbol_0028_heavy_snow_showers_night.png"); } .weather_current .wi-night-sprinkle { content: url("/css/icons/current/wsymbol_0025_light_rain_showers_night.png"); } .weather_current .wi-night-storm-showers { content: url("/css/icons/current/wsymbol_0026_heavy_rain_showers_night.png"); } .weather_current .wi-night-thunderstorm { content: url("/css/icons/current/wsymbol_0032_thundery_showers_night.png"); } HTH & good luck! Ralf
  • How can elements in the default weather module be moved

    12
    2
    0 Votes
    12 Posts
    1k Views
    S
    @DDE12 make the icon 1.5em then you need to size the div the spans are in
  • MMM-CoupleDays

    3
    2
    0 Votes
    3 Posts
    344 Views
    plainbrokeP
    @sdetweil Wow, Thanks, I finally figured out what you have been trying to tell me. Found the wording to make it big enough to read now… \Thanks for you help Sam…
  • MMM-CalendarExt3 CSS configuration for Month Size

    4
    1
    0 Votes
    4 Posts
    503 Views
    S
    @sharkbait awesome. You can use it on every module
  • Delete Fade In/Fade Out animation in the NewsFeed Module

    11
    0 Votes
    11 Posts
    663 Views
    V
    @sdetweil Ok Now I understand. The 2 variables must be set in the configuration of each news. Now it is corrected and works. Thank you very much.
  • Calendar

    5
    1
    0 Votes
    5 Posts
    725 Views
    plainbrokeP
    @sdetweil Thank you for the help Sam. You are the man…
  • Help restyling MMM-ValuesByNotification

    18
    0 Votes
    18 Posts
    2k Views
    S
    @BKeyport awesome
  • Dynamic Font Colors

    8
    0 Votes
    8 Posts
    466 Views
    I
    @MMRIZE @sdetweil thanks for the help. I havent had a chance to play around with it on my set up but looks to be going in the right direction!
  • Custom CSS for weather when I have 2

    2
    1
    0 Votes
    2 Posts
    295 Views
    S
    @pritikin71 classes goes after module: right? { module : " calendar", classes:"foo", config: { . . . } } css .foo ..... { (NOT .weather) ... } you can ALSO use the ID value assigned to the module the selector for id is #id ... { ... } I use this cheatsheet to help me remember https://www.w3schools.com/cssref/css_selectors.php everthing before the { is called the selector clause… because is ‘selects’ the elements of the page doc, that the stuff INSIDE the {} will be applied to . = class # = id : is the prefix for special elements [ x ] means element with an attribute of x <div x="foo"/> nothing = tag name (table, ul, li, p, ....div)
  • change size font any module

    3
    0 Votes
    3 Posts
    330 Views
    bugsounetB
    Hi, maybe the best way is using zoom functionality because,any logos will not follow the font size in custom css try this: #CARBURANTS { zoom: 120%; }
  • Reducing font size causes letters to overlap.

    5
    0 Votes
    5 Posts
    453 Views
    S
    @atltiger81 no, don’t change the code just add a classes property to the compliments module config { module:"compliments", position:"....", config: { compliments: { ... ... }, classes:".......... whatever" } } from the doc [image: 1718795523966-1000026352-resized.jpg]
  • ,Change Fonts

    font raspberry pi 3 css custom
    10
    0 Votes
    10 Posts
    8k Views
    D
    @TazDev Thanks! This is exactly what I needed to change my MagicMirror so it displays Aurabesh for some of the data.
  • Custom CSS Debugging

    3
    0 Votes
    3 Posts
    279 Views
    D
    @sdetweil YES!!! Thank you so much! This is exactly what I wanted. <chef’s kiss>
  • This topic is deleted!

    1
    1
    0 Votes
    1 Posts
    15 Views
  • Font for non-latin characters

    Solved
    6
    0 Votes
    6 Posts
    621 Views
    J
    Thanks @MMRIZE and @karsten13 ! I have tried following your instructions but it didn’t help. I figured out it’s hidden in the modules css-file. I should have thought about that beforehand. When I change the font as suggested by @MMRIZE to set as font-family: 'Open Sans Condensed', 'Noto Sans KR'; It works now. Thanks guys! Case closed!
  • Refresh Magic Mirror after custom css changes

    8
    0 Votes
    8 Posts
    1k Views
    S
    @Hanimani the easy solution is to use the browser on the system you are on. when you get it right, restart mm where it is running config.js address:"0.0.0.0", // listen for connections on all network interfaces ipWhitelist:[], // dont restrict source systems wanting to access mm if you are using windows as your keyboard system, you can use winscp or bitvise ssh clients to provide the ssh window AND a file manzger view of the mm system. then you can double click a file to edit it directly on your pc, save puts it back on the mm syste. i use notepad++ as my windows editor for mm files
  • Main.css / custom.css change

    2
    0 Votes
    2 Posts
    513 Views
    S
    @svenpisa just put your complete root definition in custom.css git checkout css/main.css to restore the original main.css
  • custom css for module question

    11
    1
    1 Votes
    11 Posts
    2k Views
    G
    @MMRIZE said It needs some tricks. ;) thank you :raising_hands: this module has not been designed for this. So I can’t help about it. I recommend hiding empty cells to save some unnecessary (empty) lines. understood even though I hate this kind of looks… But… Is it really useful or pretty? boom! what my wife wants, my wife gets lol (happy wife = happy life Anyway Yes, everything is possible… I’m satisfied! I appreciate your assistance… you’ve inspired me to learn more
  • Modify the font of the compliment module

    2
    0 Votes
    2 Posts
    341 Views
    S
    @Horyzon the compliments module provides a config option to set the classs or classes for the content then you can style it/them in custom.css classes:'foo' .foo { color:...... } [image: 1710877190465-screenshot_20240319_123533_chrome-resized.jpg]
  • Module Region question

    21
    2
    0 Votes
    21 Posts
    5k Views
    G
    @sdetweil I copied it the way you had in another post and it wasn’t working, it’s finally working now. thank you again!
  • What's overriding my custom css?

    7
    0 Votes
    7 Posts
    1k Views
    G
    I figured out how to fix my issue I added : .region.top.center{ top: -50px; left: 560px; } .region.top.left{ top: -50px; left: -50px; } .region.top.right { top: -50px; right: -50px; width: 300px; } to the bottom of my custom css file. thanks guys