@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

@svenpisa just put your complete root definition in custom.css

git checkout css/main.css

to restore the original main.css

@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

@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:...... }

Screenshot_20240319_123533_Chrome.jpg

@sdetweil I copied it the way you had in another post and it wasn’t working, it’s finally working now.

thank you again!

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

@MMRIZE

i will give it a try later with ur css data and let u know if its work. thank man.

@ludoRaspberry said in changement couleur d'une lettre d'un title:

bonjour a tous ; je suis débutant dans la programmation js
j’aimerais changer la couleur d’une lettre sur le “title cNews”
le c en noir et News en rouge
comment puis je faire??

CSS controls the colors and format of the text. It is not the same as js. CSS is a very large topic but the best way to learn is to play with it. You will use the file custom.css to enter your changes. It will override any other css setup by the default MagicMirror.

This post has a lot of information: https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works?_=1708249746950

@svenpisa takes all kinds of skills to make a complete thing. looking good is an important characteristic, glad there are folks like you that translate the vision into something concrete.

hello Sam, I still need your help, I would like to size the display of the module that you recommended to me (MMM-SmartWebDisplay) for displaying the iss planisphere (https://isstracker.spaceflight.esa.int/ ) and I can’t do it when I change the dimensions in config.js it cuts parts of the image, I would like to reduce its dimension without losing parts of the image, I went to the console I’ve tried a lot of things (certainly not the right ones) and I can’t do it…thank you for your help

9acd7874-9754-4112-9ea7-3ad44806468a-image.png

@botswana you might be able to use a customized css to set different font size based on screen resolution.

on another system I use

:root{ --scale-factor: 1; /* set default scaling in case we have partial window, debug or in vm terminal window */ } @media screen and (width:1920px) and (orientation: landscape) { :root{ --scale-factor: 1920/1920; }; } @media screen and (width:3840px) and (orientation: landscape) { :root{ --scale-factor: 3840/1920; }; } @media screen and (width:1080px) { :root{ --scale-factor: 1920/1920; }; }

and then an example use

h1 { font-size: calc( 120px * var(--scale-factor)); }

the 120px could be a variable too…

magicmirror sets these variables. maybe you can scale them by screen resolution and not have to mod everything… BUT many modules don’t use the predefined css styles

:root { --color-text: #999; --color-text-dimmed: #666; --color-text-bright: #fff; --color-background: #000; --font-primary: "Roboto Condensed"; --font-secondary: "Roboto"; --font-size: 20px; --font-size-xsmall: 0.75rem; --font-size-small: 1rem; --font-size-medium: 1.5rem; --font-size-large: 3.25rem; --font-size-xlarge: 3.75rem; --gap-body-top: 60px; --gap-body-right: 60px; --gap-body-bottom: 60px; --gap-body-left: 60px; --gap-modules: 30px; }

and maybe css transform:scale()
https://caniuse.com/css-zoom

@sdetweil On MMM-OnThisDayWikiApi I do not see this config option. It’s not MMM-OnThisDay.

@angeliKITTYx Try this in your custom.css file:

.MMM-OnThisDayWikiApi-single > div { font-size: 40px; }

@MMRIZE Thank you, I REALLY appreciate you pointing that out to me. I have gone through and removed and reinstalled all modules manually and moved all of the changes I made to the custom.css and also stopped changing defaults in the .js files and moved those desired changes directly to the config.js file. Saved my bacon from having HUGE headaches in the future with broken configs.

@kshamus
Use event.class, not event.className.
5ef76f61-d817-4ae0-9cac-83957e50b515-image.png

@MMRIZE Thank you! That is exactly what I wanted.

@sdetweil Thank you for your reply. I will do that

Thank you

@Grizz952 you should set some styles in the top right empty element window to see the effects

@Grizz952 not built in,
css can set background-color

may take multiple clauses

So I think I’m ok with the bottom calendar I just can’t figure out how to make the list to display for a month instead of all the way into January

https://share.icloud.com/photos/078is2God3mgkrI_9spjrgJ5g