@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

Hi @contactmike1 I have checked the issue and reproduced it, I can confirm that it is a bug. I will create GitHub issue and will solve it as well.

The issue is because alert.js is not getting call back from Notificationfx.js when it is dismissed by user, In case of timer it is working fine.

Here in code below we are not assigning onClose call back handler (It should also set with right context).

this.alerts[sender.name] = new NotificationFx({
			message: image + message,
			effect: this.config.alert_effect,
			ttl: params.timer,
			al_no: "ns-alert"
		});

Below notification handler is calling the callback when user dismisses it or it is dismissed by code.

NotificationFx.prototype.dismiss = function () {
		this.active = false;
		clearTimeout(this.dismissttl);
		this.ntf.classList.remove("ns-show");
		setTimeout(() => {
			this.ntf.classList.add("ns-hide");

			// callback
			this.options.onClose(); //< -----------
		}, 25);

@kusselin Hi it is possible with both JavaScript and CSS. Based on bin type you can either create css class like .biobin or .residualbin and in that class have image background of that bin type or you can directly assign image source to bin type. It would be easier if you post some code here…

Below is quick example with .css

body {
   background-color: #cccccc;
}

.bin{
height:350px;
width:300px;
background-size: cover;

}
.biobin{
background-image: url("https://cdn0.iconfinder.com/data/icons/garbage-items-cartoon-style/512/al396_14-512.png");
}
.residualbin {
background-image: url("https://safe.onoffmarket.com/data/item/201201/1325650700_l1")
}


< div class=" bin biobin">bio bin
< /div>
< div class="bin residualbin"> residual bin
< /div>

@MrDondoT If you are not changing modules frequently then you can do it with custom.css and using module id and sub classes.
Below is example for calendar, same is possible with other modules.

#module_4_calendar .module-header {
	color: orange !important;
}

#module_4_calendar .title.bright 
{
	color: orange !important;	
}

@SiJuAtHome11 Which module you are using ? https://github.com/darickc/MMM-SolarEdge this one looks okay by code and looks like it supports multiple instance of same modules.

If you are using https://github.com/bertieuk/MMM-SolarEdge this one then from code it looks like it does not support multiple modules.

@keithhannen Good to know that :) , I think you need to keep dev tools open ? If Yes, you can undock it and then minimize it.

@JasonInOttawa May be float is doing this because you are not showing week text as header ? In my screenshot they are aligned on top. Any ways both are on user choice ! :)

@JasonInOttawa yes there are multiple ways to achieve the same :) We both posted reply at same time !

@JasonInOttawa yes, Indeed I was only giving example to understand the requirement. you can do it by using custom.css file. Add below code to show clock and current weather side by side.

.clock
{
	float: left;
}
.currentweather
{
	float: left;
	padding-left: 20px; //Adjust this for left spacing between both modules
}

below should be output.

@JasonInOttawa You mean like below ?

@smart_user Where you are stuck ? check the default modules code, you will need to configure a timer to repeat the task every 1 hour (should be configurable). and in that task you should display message on screen.

Check window.timeout and window.setInterval function of javascript.