My 1st MagicMirror2

broberg

You could remove the margins of the MM body, that way you would utilize more of the screen itself, since you have more mirror on the sides of the monitor :)

sithlordhood

@broberg I will look into this - will give me a little more room. Cheers!

sithlordhood

@djdwayneanthony Also here is my custom.css - it is only colour changes for the Weather forecast and not my work - copied from someone else’s post here…

#/*****************************************************

Magic Mirror *
Custom CSS *

By Michael Teeuw http://michaelteeuw.nl *
MIT Licensed. *

Add any custom CSS below. *
Changes to this files will be ignored by GIT. *
*****************************************************/

body {
}

.dimmed {
color: #666;
}

.normal {
color: #999’
}

.bright {
color: #fff;
}

.brightb {
color: #55acee;
}
.currentweather .wi-sunrise {
color: #ffd700;
}
.currentweather .wi-sunset {
color: #ffa500;
}
.currentweather .wi-day-sunny {
color: #ffff00;
}
.currentweather .wi-night-showers {
color: #55acee;
}
.currentweather .wi-degrees {
color: #415;
}
.currentweather .wi-rain {
color: #55acee;
}
.currentweather .wi-showers {
color: #55acee;
}
.currentweather .wi-night-showers {
color: #55acee;
}
.currentweather .wi-night-alt-cloudy-windy {
color: #aaa;
}
.currentweather .wi-night-cloudy {
color: #aaa;
}
.currentweather .wi-cloudy {
color: #aaa;
}
.currentweather .wi-day-cloudy {
color: #aaa;
}
.currentweather .wi-cloudy {
color: #aaa;
}
.currentweather .wi-cloudy-windy {
color: #aaa;
}
.currentweather .wi-showers {
color: #55acee;
}
.currentweather .wi-thunderstorm {
color: #ff00ff;
}
.currentweather .wi-snow {
color: #fff;
}
.currentweather .wi-fog {
color: #999;
}
.currentweather .wi-night-clear {
color: #fff;
}
.currentweather .wi-night-rain {
color: #55acee;
}
.currentweather .wi-night-thunderstorm {
color: #ff00ff;
}
.currentweather .wi-night-snow {
color: #fff;
}

.weatherforecast .wi-sunrise {
color: #ffd700;
}
.weatherforecast .wi-sunset {
color: #ffa500;
}
.weatherforecast .wi-day-sunny {
color: #ffff00;
}
.weatherforecast .wi-night-showers {
color: #55acee;
}
.weatherforecast .wi-degrees {
color: #415;
}
.weatherforecast .wi-rain {
color: #55acee;
}
.weatherforecast .wi-showers {
color: #55acee;
}
.weatherforecast .wi-night-showers {
color: #55acee;
}
.weatherforecast .wi-night-alt-cloudy-windy {
color: #aaa;
}
.weatherforecast .wi-night-cloudy {
color: #aaa;
}
.weatherforecast .wi-cloudy {
color: #aaa;
}
.weatherforecast .wi-day-cloudy {
color: #aaa;
}
.weatherforecast .wi-cloudy {
color: #aaa;
}
.weatherforecast .wi-cloudy-windy {
color: #aaa;
}
.weatherforecast .wi-showers {
color: #55acee;
}
.weatherforecast .wi-thunderstorm {
color: #ff00ff;
}
.weatherforecast .wi-snow {
color: #fff;
}
.weatherforecast .wi-fog {
color: #999;
}
.weatherforecast .wi-night-clear {
color: #fff;
}
.weatherforecast .wi-night-rain {
color: #55acee;
}
.weatherforecast .wi-night-thunderstorm {
color: #ff00ff;
}
.currentweather .wi-night-snow {
color: #fff;
}

}

djdwayneanthony

Legend! Will play about with this tomorrow! Thank you, and once again, well done!

sithlordhood

This post is deleted!

sithlordhood

This post is deleted!

sithlordhood

@broberg Borderless Layout

Looks better - plus can get more calendar entries on the screen now! Thanks for the tip.

broberg

@sithlordhood no probs! glad I could give useful tips :D

On my raspberry I also noticed my 1920 background didn’t display correctly, I had black borders around the workspace that cut off some graphics, so I followed this :
http://www.opentechguides.com/how-to/article/raspberry-pi/28/raspi-display-setting.html

And gained a couple of more pixels :) (ie I got the full 1920 resolution again)

cowboysdude

@Cato I’ve been looking for a usb extension … I found one once that was round with 2 USB ports but I can’t find it again :( I would have drilled through my case and installed that!!

schlachtkreuzer6

@broberg @sithlordhood

@broberg said in My 1st MagicMirror2:

You could remove the margins of the MM body, that way you would utilize more of the screen itself, since you have more mirror on the sides of the monitor :)

It´s easy just add this to your custom css:

/*****************************************************
 * Magic Mirror                                      *
 * Custom CSS                                        *
 *                                                   *
 * By Michael Teeuw http://michaelteeuw.nl           *
 * MIT Licensed.                                     *
 *                                                   *
 * Add any custom CSS below.                         *
 * Changes to this files will be ignored by GIT. *
 *****************************************************/

body {
  margin: 20px;
  position: absolute;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  background: #000;
  color: #aaa;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
}

.region.fullscreen {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
}

just play with the px and don´t forget about the fullscreen mode for modules :)