change position body size

svenpisa

Hello everyone,
I’m sure that my query has been asked several times before, but I can’t find a forum entry that helps me at the moment.

Can you briefly explain to me how I can change the size of the position bodies? In other words, how do I enter it in Custom.css?

I would like to adjust the widths of the top_left, top_center and top_middle.
As far as I understand it, I will probably control it somehow via padding, but how exactly does that work?

I would appreciate a short answer with an explanation or a link to a tutorial or instructions.

sdetweil

@svenpisa those things are called regions in MagicMirror

you can see their definitions in css/main.css (small sample)

.region {
  position: absolute;
}

.region.fullscreen {
  position: absolute;
  inset: calc(-1 * var(--gap-body-top)) calc(-1 * var(--gap-body-right)) calc(-1 * var(--gap-body-bottom)) calc(-1 * var(--gap-body-left));
  pointer-events: none;
}

.region.right {
  right: 0;
  text-align: right;
}

you can change them, by defining the same thing (the selector clause, everything before the {) in custom.css

in MM there is a stack of css definitions

custom.css on top
module css  (multiple)
main.css

the versions of definitions above another overrides the prior

custom.css overrides all
module overrides main
main is the base..

in the developers window you can see where a definition comes from when u select and element, in the element tab
see this for a starter on developers window elements tab
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1707761145294

the doc, https://docs.magicmirror.builders/modules/configuration.html#position
shows the view of the default definitions…

note that adding to one means taking away from another…

there are lots of settings that affect each other… padding, margin, width , height,
what to do about content that exceeds the boundary, wrap, clip,
alignment

easy is a term I would not use for html/css
(I am not a visual designer, and this hurts my head…)
https://www.geeksforgeeks.org/design-a-web-page-using-html-and-css/
https://www.udacity.com/blog/2021/02/an-introduction-to-margins-and-padding-in-css.html

svenpisa

NICE!!!

And thanks for the links… The last one was great… :-)

And sorry for “easy” ;-)

I’m more the opposite of you… :D

sdetweil

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