Layout and positioning on a tiny screen.

[ArmyGuy]

Im using a tiny screen and am having issues with positioning and scaling. I just want to use two modules, clock and calendar (and maybe play around in the future with others). Adding config parameters to the module in /MagicMirror/config/config.js :

{
   module: "clock",
   position: "top_left",
      config: {
         displaySeconds: "false"
                 }
},

does not appear to change anything but it does allow me to comment out modules I don’t want to use. In /MagicMirror/modules/default/clock/clock.js I can enable/disable the analog clock and change some format parameters (clockBold: true, for example). I added the following to /MagicMirror/css/custom.css but it had no effect at all:

.clock{
       left : 100 px,
       top:50 px
         }

MagicMirror/css/main.css has settings for a bunch of stuff and allowed me to adjust the margin so its right against the edge of the screen:

body {
  margin: -2px;
  ...

but nothing else regarding positioning for specific modules. I think im close but I havent been able to find anything specific to this problem as most people are happy with positioning/scaling based on the “top-left, bottom-right” regions. Any advice on how to approach this would be greatly appreciated.

[broberg]

First off, Don’t alter anything in the main.css itself (this will fuck shit up when you are trying to update your mirror later)

Everything you add in custom.css will overwrite anything already in the main.css file (so if

body {
  margin: 20px;
  ...

exists in main.css then

body {
  margin: -2px;
  ...

in custom.css will overwrite that line in main.css)

If you want to free float any placement your modules should have this code

.clock{
position: absolute;
left : 100px;
top : 50px;
}

This will force the position of the module to be calculated from the top left corner of the screen.

This will drop the margin completely :

body {
  position: absolute;
  margin: 0px;
  height: 100%;
  width: 100%;
}

There is many ways to change the sizes, either by font-size or zoom (which would scale everything by %)

If the config parameters doesn’t change anything you probably have a typo somewhere that negates your changes and instead goes with the defaults specified in the module.

[smackenzie5]

This post is deleted!

[smackenzie5]

@broberg Is there an order of precedence between custom.css, calendar.css, and config.js?

I’ve added the position, left and top lines above to my custom.css and calendar.css.
(I put the lines in both just trying to get it to work)

When I start up MagicMirror, the calendar module is in the correct position when it says “Loading…” but once the calendar loads, the module changes position. To me, it looks like the module is at the “top_left” position below the clock which is what the config.js specifies.

Any thoughts on why the module is moving position after loading?

BTW – I added the lines to drop the margin completely to my custom.css and it worked great, no problems.

Thanks,
Scott

[broberg]

@smackenzie5

It should load main.css, then calendar.css and last custom.css

The last loaded css takes presidene over the others (thats why one should make changes in custom.css only).

[smackenzie5]

Thanks @broberg

Does the config.js file takes precedence over the css files?

I’ve tried deleting the calendar’s position line in the config.js file and the calendar module can’t be seen. I tried changing the calendar’s position to absolute in the config.js files and that prevented the mirror from loading at all. Basically, is there anything that needs to be done to the config.js file or should the custom.css file take precedence over everything?

[broberg]

@smackenzie5

Config.js doesn’t really do anything to the layout, it is the index.html and main.css that defines the different positions that you can use.

[Giarry88]

@broberg said in Layout and positioning on a tiny screen.:

@smackenzie5

Config.js doesn’t really do anything to the layout, it is the index.html and main.css that defines the different positions that you can use.

Hi guys!
It seems like I am blowing the dust off this old topics!
By the way… I am trying to change the postions of some modules and I am having the same issue as @smackenzie5 , first it loads the module where i want to place it, but at the end of the loading it increases the size of the top_bar and place it as default.

this is what I’ve put in the custom.css

.MMM-network-signal{
position: absolute;
transform.scale(0,35);
left: 1800px;
top: 0px;
}

Is it because it overlaps with the Weather module?