@Mykle1 said in Go East, young icon!:

.MMM-NetworkScanner .fa-ul {
margin-left: 2px; /* This aligned NetworkScanner to the left margin /
width: 130px; / If you remove this line it will be the same width as the widest module in the region, this can lead to a big gap, thats why i limited it to 130px if you add devices with longer names you might want to increase this value /
}
.MMM-NetworkScanner .fa-li {
position: relative; / This put the icon on the right side */
float: right;
left: initial;
}

@strawberry-3-141 : How to make icon on the left, but without margin?

@BenNewsome a screenshot would be helpful!

I’m using 24" TV. But for better quality, you should consider using a monitor rather than a TV (based on ppi value).

@slametps it is my MM now.

@MyMirror said in My First Magic Mirror:

@slametps
It really looks nice. May i have also the config and more detailed information of your settings? How did you get the coloured signs in each line of your calender?
Greets

Here is my custom css (copy-paste from various posts in MM-forum):

html {
  cursor: none;
  overflow: hidden;
}

::-webkit-scrollbar {
  display: none;
}

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

/**
 * Default styles.
 */

.dimmed {
  color: #666;
}

.normal {
  color: #fff;
}

.bright {
  color: #fff;
}

.xsmall {
  font-size: 10px;
  line-height: 15px;
}

.small {
  font-size: 15px;
  line-height: 20px;
}

.medium {
  font-size: 25px;
  line-height: 30px;
}

.large {
  font-size: 60px;
  line-height: 60px;
}

.xlarge {
  font-size: 70px;
  line-height: 70px;
  letter-spacing: -3px;
}

.thin {
  font-family: Roboto, sans-serif;
  font-weight: 100;
}

.light {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 300;
}

.regular {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
}

.bold {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
}

.align-right {
  text-align: right;
}

.align-left {
  text-align: left;
}

header {
  text-transform: uppercase;
  font-size: 15px;
  font-family: "Roboto Condensed";
  font-weight: 400;
  border-bottom: 1px solid #666;
  line-height: 10px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  color: #999;
}

sup {
  font-size: 50%;
  line-height: 50%;
}

/**
 * Module styles.
 */

.module {
  margin-bottom: 20px;
}

.region.bottom .module {
  margin-top: 20px;
  margin-bottom: 0;
}

/**
 * Region Definitions.
 */

.region {
  position: absolute;
}

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

.region.right {
  right: 0;
}

.region.top {
  top: 0;
}

.region.top .container {
  margin-bottom: 15px;
}

.region.top .container:empty {
  margin-bottom: 0;
}

.region.top.center,
.region.bottom.center {
  left: 50%;
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.region.top.right,
.region.top.left,
.region.top.center {
  top: 100%;
}

.region.bottom {
  bottom: 0;
}

.region.bottom .container {
  margin-top: 15px;
}

.region.bottom .container:empty {
  margin-top: 0;
}

.region.bottom.right,
.region.bottom.center,
.region.bottom.left {
  bottom: 100%;
}

.region.bar {
  width: 100%;
  text-align: center;
}

.region.third,
.region.middle.center {
  width: 100%;
  text-align: center;
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.region.upper.third {
  top: 33%;
}

.region.middle.center {
  top: 50%;
}

.region.lower.third {
  top: 66%;
}

.region.left {
  text-align: left;
}

.region.right {
  text-align: right;
}

.region table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
}

/*
 * CALENDAR SPECIFIC
 */

.fa.fa-calendar {
  color: #ff0000; /* Red */
}
.fa.fa-birthday-cake {
  color: #ff0000; /* Red */
}
.fa.fa-calendar-check-o {
  color: #ffff00; /* Yellow */
}

fa.fa-calendar-o {
  color: #ffff00; /* white */
}

/*
 * WUFORECAST SPECIFIC
 */

.wuforecast .max-temp {
  font-size: 15px;
  line-height: 15px;
  color: #f66;
}

.wuforecast .min-temp {
  font-size: 15px;
  line-height: 15px;
  color: #0ff;
}

.wuforecast .weather-icon {
  font-size: 15px;
  line-height: 15px;
  color: #f93;
}

.wuforecast .day {
  font-size: 15px;
  line-height: 15px;
  color: #6f6;
}

/*
 * FORECAST
 */

.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;
}

/*.clock .time {
  color: #99F;
}*/

.clock .date {
	color: #09F;
}

.calendar .header {
	color: #F00;
}

/*.newsfeed div.light.small.dimmed {
  color: #F00;
  font-size: 9px;
}*/

.MMM-WunderGround .max-temp {
  color: #f66;
}

.MMM-WunderGround .min-temp {
  color: #0ff;
}

.MMM-WunderGround .weather-icon {
  color: #f93;
}

.MMM-WunderGround .day {
  color: #6f6;
}

/* aligns the table to the right */
.MMM-SystemStats table {
  width: initial;
  float: right;
}

/* aligns all columns to the right within the table */
.MMM-SystemStats td {
  text-align: right !important;
}

.MMM-NetworkScanner ul .fa-ul li .fa-li {
  float: left;
}

@wizz said in Display what would you buy?:

Ok than i go for the 17,3 inch display.

mine is 24".

@Mykle1 I prefer frameless with the back installed deep into the wall (if possible).

@FlatPepsi it is active since arp-scan will executed every updateInterval setting. Of course, it will trigger such a security alert if violate the security policy of your office. No, arp-scan will scan all available devices in the network.

@wizz no, You don’t need VGA-HDMI adapter. Bigger, Better?

@Mykle1 agree with your opinion. require one place to share config.js, to quick learn about implementing MM rather than read more categories.

Hi all,

I’m Slamet PS, a 39 year old hobbist from Bandung, Indonesia. I love tinkering (IoT), also a gunpla modeller and collector and a drone pilot. I completed my first MagicMirror a few weeks a go. One of great products I have ever met.

I also develop a new module (MMM-RandomQuranAyah).

Still tuning the facial-recognition module and plan to add voice-control.
You can find me at FB, instagram, twitter and blog.

So? Where to share the config.js?

How much is this? Only displaying browser?

@DirkS awesome!!!

problem was solved. The correct URL should be:

http://prayerwebcal.appspot.com/Bandung%2C%20Indonesia.ics?x=-6.8963981&y=107.6750389&z=420&s=5&j=0

@strawberry-3.141 Thx. Done.

@MichMich If you may, can add this module to the 3rd party MM-modules list. Thx in advance.

@AAPS said in Wider Veriety of Modules For Different Kinds of People:

@cowboysdude I completely agree! Working on my Magic Mirror is the highlight of my day. I just wanted to suggest different ideas that popped into my head (many of which already became modules before or soon after I posted here), and I do recognize the work that many people put in to this project daily. :smiley:

@slametps I didn’t do anything to alter the config file except change what was already there for the calendar module. I fixed settings from the top right corner of prayerwebcal.appspot.com. Once I got everything the way I wanted, I just replaced the default calendar with my new url.

{
module: “calendar”,

  	header: "Prayer Times",

  	position: "top_left",

  	config: {

  		calendars: [

  			{

  				symbol: "calendar-check-o ",

  				url: "http://prayerwebcal.appspot.com/0.ics?x=0.0&y=0.0&z=-300&s=0&j=0"

  			}

  		]

  	}

  },

In my calendar, it says “No upcoming event”. Here is my entry in config.js

		{
			module: 'calendar',
			classes: 'default everyone',
			header: 'Prayer Time',
			position: 'top_left',
			config: {
				calendars: [
                                        {
						symbol: 'calendar-check-o',
						color: '#00ffff',
						url: 'http://prayerwebcal.appspot.com/?z=420&l=Bandung%2C+Indonesia&x=-6.8963981&y=107.6750389&s=5&j=0'
					}
				]
			}
		},

If I copy the URL into my browser, it display the result.

@cowboysdude said in Wider Veriety of Modules For Different Kinds of People:

All types and kinds right here…

https://forum.magicmirror.builders/category/7/showcase

Calendars, schedulers, traffic, weather… tons of them. with more and more being developed everyday.

If someone needs something specific they can go the request forum and ask…

As for touch screen there are modules for that too… there are voice modules…

Some requests are met, some are not. Everyone that builds modules do so for free and it takes time… even the MagicMirror itself is free… This is THE one place in my life that I can come to and talk to all kinds of people from all over the world. I like that very much :)

Yes, that is the first place I read after I installed my first-time MM a month ago.

@AAPS your calendar module setting?