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!

@Egnos yes, you could mske it smaller. just fiddle w the css and change staryip size in config.js

electronOptions:{ fullscreen:false , x, y, height …}

aee the.options for the electron browser api

Many thanks for your help!

ground control to major C

WOW,it works,you are a genius…thanks so much, I had just about given up on stats

@dcarls91 i think you could override the regions sizings in custom.css

this is whats in main.css for the center

.region.third, .region.middle.center { width: 100%; text-align: center; transform: translateY(-50%); } .region.upper.third { top: 33%; } .region.middle.center { top: 50%; } .region.lower.third { top: 66%; }

and index.html (spaces after < because the viewer here does some funny stuff)

< div class="region upper third">< div class="container">< /div>< /div> < div class="region middle center">< div class="container">< /div>< /div> < div class="region lower third">< div class="container"><br/>< /div>< /div>

so, if u make upper a little smaller and middle a little bigger… it might work out

@ShuraimHassan said in is custom.css only for default modules?:

could you show me an Example that how Can I do this?

do what? make a module, add a css style to an element?

I don’t know ‘responsive’. currently main.css is in pixels for 1920x1080.

I have a version I converted to vh/vw.

3rd party. mm supplies font_awesome.
(see the fonts folder)
other than that every module can use whatever they want. no restrictions.

@sdetweil said in How to write and test CSS without going crazy..:

if u install winscp or bitvise ssh client on your PC, then u can double click edit files on your pi, just like u do on windows

If anyone is looking at this issue in the future and trying to do this on Mac see here: https://www.raspberrypi.org/documentation/remote-access/ssh/sshfs.md

@cweinhofer I am glad it helped