How would I change the size of modules?

tom1234tom123

I have an 800 x 480 display and the default digital clock takes up a lot of space. How would I be able to make it smaller and make other modules that I may install smaller?

sdetweil

@tom1234tom123 every module declares its own way to resize elements… nothing does everything for a module…

you have to read the README to learn about the documented CSS classes you can add in custom.css to change the elements size… some modules don’t document what classes they use, and then u will have to read the code for each module u want to modify…

some modules don’t use any specific classes, so then u have to add some to the code and then set their values in custom.css

clock doesn’t document the classes

in digital mode (numbers) the classes used are
// Style Wrappers
dateWrapper.className = “date normal medium”;
timeWrapper.className = “time bright large light”;
secondsWrapper.className = “dimmed”;
weekWrapper.className = “week dimmed medium”;

in analog mode (clock with hands)
the classes used are in the clock_styles.css file

| edit: I stand corrected, see the post below about using transform!..

Stoffbeuteluwe

@tom1234tom123 there is a way to make it bigger or smaller with your keyboard by pressing shift and + or -

but I’m not sure 🤔

sdetweil

@Stoffbeuteluwe thats the whole screen

Stoffbeuteluwe

@sdetweil yes that’s for the whole screen

airart

add a CUSTOM.CSS file in home/pi/MagicMirror/css/
each module name (as .clock , .weather ecc)
this scale modules but it not move them

body  {
transform:scale(1.0);
}
.clock {
transform:scale(1.0);
}

sdetweil

@airart nice!