@fsne04 if you check the code of MMM-Screent cast @ https://github.com/kevinatown/MMM-Screencast/blob/master/constants.js then there is no position which supports fullscreen_below.

you need to set one of the below value as per documentation of the module

const POSITIONS = {
  bottomRight: 'bottomRight',
  bottomCenter: 'bottomCenter',
  bottomLeft: 'bottomLeft',
  center: 'center', 
  topRight: 'topRight',
  topCenter: 'topCenter',
  topLeft: 'topLeft',
  top_bar: 'topRight',
  top_left: 'topLeft',
  top_center: 'topCenter',
  top_right: 'topRight',
  upper_third: 'topRight',
  middle_center: 'center',
  lower_third: 'bottomCenter',
  bottom_left: 'bottomLeft',
  bottom_center: 'bottomCenter',
  bottom_right: 'bottomRight',
  bottom_bar: 'bottomCenter'
};

@kusselin Sorry I did not understand. do you want to have standard icons but with different color for icon and text ?

@Cetax Your pastebin is private so others can not access the code. you want to have your data as below ?

@kusselin Edited my answer above.

@kusselin Hi it is already possible with default calendar module. Sorry was not aware of that feature. while looking at code I found that you can configure your custom class and font color based on title of the event using custom events property in config.

{
	module: "calendar",
	header: "NL Holidays",
	position: "top_left",
	config: {
		calendars: [
			{
				symbol: "calendar-check",
				url: "webcal://www.calendarlabs.com/ical-calendar/ics/101/Netherlands_Holidays.ics",
			}
		],
		customEvents: [
			 {
				"keyword": "Christmas Day",
				"symbol": "calendar-icon-christmas",
				"color": "red"
			 },
			 {
				"keyword": "Easter Sunday",
				"symbol": "calendar-icon-easter",
				"color": "blue"
			 }
		]
	}
}

you will need to add below css classes in custom.css, Make sure to name your css class with .fa- but while adding it in config remove it. in above config symbols calendar-icon-christmas and calendar-icon-easter are css classes with out .fa-

.fa-calendar-icon-christmas
{
	background-image: url('https://cdn.iconscout.com/icon/premium/png-256-thumb/christmas-ball-1429333-1209909.png');
	width: 20px;
	height: 20px;
	background-size: contain;
	background-repeat: no-repeat;
}
.fa-calendar-icon-easter
{
	background-image: url('https://icons.iconarchive.com/icons/iconka/easter-egg-bunny/256/green-love-icon.png');
	width: 20px;
	height: 20px;
	background-size: contain;
	background-repeat: no-repeat;
}

below should be output. Same way you can do it for different bins based on title of the event (Biotonne or Restmüll)

@kusselin can you post screenshot of what you have right now ? If you have created your own module then it will go into that module’s css. if you are using other module and want to display it over there then you can put it in custom.css.

Here logic is based on data you need to assign the css class to html elements and then they will show the visuals.

@Morganga you can do this with css animation. You may want to disable the seconds in clock as it will update the Dom every second and then you won’t see much of animation.

I did this in dirty way using JavaScript as below by changing clock.js and keeping displaySeconds to true

if (this.config.clockBold === true) {
			timeString = now.format(hourSymbol + '[ < span class="bold">]mm[ < /span>]');
		} else {
                         //here to
			if (now.toDate().getSeconds() % 2 == 0)
				timeString = now.format(hourSymbol + ":mm");
			else
				timeString = now.format(hourSymbol + " mm");
                         //here 
		}

Blinking text example using css @ https://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css-3
you will need to wrap : in span or other element and apply css class to it and let it blink.

About centering the text is also possible with CSS, check the css classes using dev tools.

@jonspraggins it should be \n and not /n :)

@contactmike1 Sure, if there is a possibility to dismiss the alert by clicking on it then it should work correctly (should hide the overlay as well). More over people are also using MM with touch screen using IR frame so it should any ways work.

You can add below one line in your code in alert.js file if you do not want to wait for merge in master.

//Store alert in this.alerts
		this.alerts[sender.name] = new NotificationFx({
			message: image + message,
			effect: this.config.alert_effect,
			ttl: params.timer,
			onClose: () => this.hide_alert(sender),  //< - add this line, with out this comment
			al_no: "ns-alert"
		});

@contactmike1 Pull request at https://github.com/MichMich/MagicMirror/pull/2229