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

@rastaa I just want the whole calendar to be 100px more to the right. In that case, assuming you mean the default “calendar” module, these values should move the entire module. Adjust to your liking in the custom.css file. .calendar { margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; }

@GoodWillGustin The background image can’t change transparency with css, you either add background color to the modules above (that’s probably what sean means with the css tip at the bottom of his readme). You can change the transparency of that entire module, but any text etc would also get affected. .MMM-WeatherBackground {opacity: 0.5}

I think I found some rogue css that was messing it up for that region…I removed it and it seems to look better now!

Here is an example of the weather module: /*.MMM-BMW-DS .header {color: yellow}*/ /* Header color. */ .MMM-BMW-DS .image {width: 5%; height: 5%; margin-top: 0px; margin-bottom: -10px; } /* icon size */ .MMM-BMW-DS .current {color: #FFFFFF; font-family: Gloria Hallelujah; font-size: .99em;}/* text forecast color. Default is white. */ .MMM-BMW-DS .summary {color: #FFFFFF; font-family: Gloria Hallelujah; font-size: .99em; display: none; }/* text forecast color. Default is white. */ /* uncomment to hide */ .MMM-BMW-DS .daily {color: #FFFFFF; font-family: Gloria Hallelujah; font-size: .99em; }/* days of the week color. Default is white. */

@Ic3Cub3 https://github.com/MichMich/MagicMirror

https://github.com/michael5r/mmm-hue-lights/issues/13 Hi, so i am having 3 hue Lights (4, with 1 hidden) and i am trying to line them up in a row at Top_center. Can someone help me? I tried this in the custom.css but no success: .mmm-hue-lights .grid { width: auto; // do i have to adapt the width manually? display: flex; flex-direction: row; flex-wrap: nowrap; //cause i want no wrap margin: -10px; max-width: auto; // adapt this too? justify-content: center; align-items: center; } .mmm-hue-lights .grid .hue { //float: left; //test width: calc(33.33% - 20px); //like in your example or does this have to be 33.33% of the top_center? margin: 10px; display: block; }

try float: left; in the custom.css for the one module you would like to Change

yes, right

@PhuongDinh129 said in Please help! The little different in the height is killing me from inside.: Thanks, it worked. :thumbsup:

Hi, how can I add more space between lines off weatherforecast?

thank you :)

@saljoke interesting

Okay, I figured it out. For posterity: one needs to address the specific sub-style: .ns-alert span.light.dimmed.medium, .ns-alert span.thin.thin.bright.small { font-size: 80px !important; }

Hii, After MagicMirror starts MMM-weather modules show as positon top_left but MMM-globe displays in position top center weather module gets hidden

Does this still work? I tried it just now and when I set the max-width value the module did shift to the left side. Even when adding the .region.middle.center code that did not help me.

@j-e-f-f Thanks for your instruction. I already have been using those tricks in my modules. Just wanted to know other way to achieve. :D