@kasperinline I do not know, but you can use the developer window elements tab to view and test changes live

See the second link in my signature below for a short walkthru

@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

@sdetweil Thank you! On it!