My 1st MagicMirror2

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 :)

jbeck615

thank you for sharing so much. so so helpful

sithlordhood

@cowboysdude This is the one I used:

http://www.ebay.co.uk/itm/Car-Dash-Flush-Mount-Dual-USB-1m-Male-to-Female-Extension-Cable-Lead-Panel-MA950-/272413643903?hash=item3f6d1e547f:g:rUkAAOSwDmBY4CTs