Read the statement by Michael Teeuw here.
change position body size
-
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.
-
@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?_=1707761145294the 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,
alignmenteasy 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 -
NICE!!!
And thanks for the links… The last one was great… :-)
And sorry for “easy” ;-)
I’m more the opposite of you… :D
-
@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.