@Egnos yes, you could mske it smaller. just fiddle w the css and change staryip size in config.js

electronOptions:{ fullscreen:false , x, y, height …}

aee the.options for the electron browser api

Many thanks for your help!

ground control to major C

WOW,it works,you are a genius…thanks so much, I had just about given up on stats

@dcarls91 i think you could override the regions sizings in custom.css

this is whats in main.css for the center

.region.third, .region.middle.center { width: 100%; text-align: center; transform: translateY(-50%); } .region.upper.third { top: 33%; } .region.middle.center { top: 50%; } .region.lower.third { top: 66%; }

and index.html (spaces after < because the viewer here does some funny stuff)

< div class="region upper third">< div class="container">< /div>< /div> < div class="region middle center">< div class="container">< /div>< /div> < div class="region lower third">< div class="container"><br/>< /div>< /div>

so, if u make upper a little smaller and middle a little bigger… it might work out

@ShuraimHassan said in is custom.css only for default modules?:

could you show me an Example that how Can I do this?

do what? make a module, add a css style to an element?

I don’t know ‘responsive’. currently main.css is in pixels for 1920x1080.

I have a version I converted to vh/vw.

3rd party. mm supplies font_awesome.
(see the fonts folder)
other than that every module can use whatever they want. no restrictions.

@sdetweil said in How to write and test CSS without going crazy..:

if u install winscp or bitvise ssh client on your PC, then u can double click edit files on your pi, just like u do on windows

If anyone is looking at this issue in the future and trying to do this on Mac see here: https://www.raspberrypi.org/documentation/remote-access/ssh/sshfs.md

@cweinhofer I am glad it helped

Here is an example .css to change the regions positions. You can move and position the regions freely.

Unbenannt.jpg

/** * Region Definitions. */ .region.bottom.bar { background : gray; position: absolute; width: 50%; } .region.top.bar { background : gray; position: absolute; width: 50%; } .region.top.right { background : green; margin-right: 100px; margin-top: 100px; } .region.top.left{ background : red; margin-left: 100px; margin-top: 100px; } .region.top.center { background : blue; *margin-left: 100px; *margin-top: 100px; } .region.bottom.right { background : green; margin-right: 100px; margin-bottom: 100px; } .region.bottom.center { background : blue; margin-bottom: 100px; } .region.bottom.left { background : red; margin-left: 100px; margin-bottom: 100px; } .region.third { background : cyan; } .region.middle.center { background : cyan; margin-bottom: 100px; text-align: center; position: absolute; width: 45%; height: 33%; left: 1100px; } .region.upper.third { background : yellow; margin-bottom: 100px; text-align: center; position: absolute; width: 45%; height: 33%; left: 1100px; } .region.lower.third { background : magenta; text-align: center; position: absolute; width: 45%; height: 33%; left: 1100px; }

@Piranha1605 Yeah dude I took a gander at your github and then set everything to my needs. I appreciate it!

I think I found where it’s at, it’s actually a transform in the CSS.

Hi @rubenix ,

Thank you for your hint, I will give it a try.

Greetings
Thomas

@Djninja926 cool…

@j-ason

I answered you in your other post.

Ok then I try!
Thanks guys for the support. :winking_face:

I am working on using MM as a family calendar using the 1080p monitor in portrait mode. I am using MMM-CalendarExt2 and have the main large calendar positioned at “fullscreen_below”. Then I have a daily view at position “top_left”. I would like to see as many daily event entries as possible, however it will overlap if there are too many. Currently I am setting the slotCount as 4 to overcome this but there are many days where there is so much unused space that could be filled with additional daily events.

Is there a way in CSS to change the .region.top.left to force a static size and prevent it from overlapping the content below? I tried the following in custom.css but this doesn’t work and I am limited in my knowledge with css and such things but would like to find a solution to it.

body { } .region.top.left { height: 500px; max-height: 500px; }

This is a layout I made for a native 1366x768 TV that I use in my kitchen as an information centre. I’ve used a LOT of custom CSS to make this work. It does indeed use the standard clock module. The weather has been repositioned with CSS to make it look like it’s part of the top-left module, but they are in fact two separate modules.

I no longer use this layout as it didn’t really work for my needs and there were several modules that I didn’t actually use at all. So I use something now that is simpler.

I could share the custom.css and config for my current layout but it would be useless to anyone else unless the TV uses a native 1366x768 display.

You can read about it here in case it inspires you to do something similar:
http://jeffsnerdyprojects.blogspot.com/2018/04/information-center-v2.html?m=1

@mcneilp 50vh is 1/2 the screen height, 100vh is full height

Vertical-align only works in inline elements and table cells.

Two common css hacks are these: https://jsfiddle.net/02vxofa6/1/

The parent (or a wrapper div container filling the parent) is set to display: table-cell; and vertical-align: middle;

If there’s a reason this cannot be done, there’s also another hack:
Set the parent to position: relative; and the text to position: absolute: top: 50%;
But then it’s not exactly in the middle, as the distance to the top is 50%. Give the text a fixed height (maybe even considering a line break there) and set margin-top to - half the text height. height: 20px; margin-top: -10pxfor example.

Re: [MMM-SystemStats (cpu temp/load](fre ram …))

Hi,
Trying to figure out how to only show the CPU and Memory stats and hide the rest? ANy thoughts please?
Thanks