How to set Font in Alarm Clock

nobita

In alarm clock module in Title and Message in alarms config I would like to know how to adjust Bigger Font size and Color Font
Thanks for all helps

broberg

if it is the MMM-AlarmClock that you are referring to then in custom.css add


.MMM-AlarmClock .small {

  font-color: #59F;
  font-size: 10px;

}

nobita

@broberg Thanks for your hint , I will try later

nobita

@broberg Sorry your hints is font header of AlarmClock . but I mean When alarmclock is working like photo post

strawberry 3.141

@nobita the alarm clock sends a notification to the alert module which displays this, so you have to change the css for the alert module:

custom.css

.alert span.light {
  //Here you can change the title
}

.alert span.thin {
  //Here you can change the message
}

nobita

@strawberry-3.141 not work, thanks

strawberry 3.141

@nobita ok it doesnt render in the module itself try .ns-box-inner span.light

broberg

@strawberry-3.141 said in How to set Font in Alarm Clock:

@nobita ok it doesnt render in the module itself try .ns-box-inner span.light

I installed the module just to test it, I also noticed the .ns-box-inner
but, something is overwriting font-size, font-color
I’ve managed to change the color by using .ns-box-inner span.light {color: #00F;}
but changing that to font-color will go back to the original colors.

morozgrafix

@strawberry-3.141 & @broberg I believe that default alert module has inline styles for alerts and notifications that would override any CSS that is set outside of it.

For example take a look at https://github.com/MichMich/MagicMirror/blob/master/modules/default/alert/alert.js#L39

		if (message.title) {
			msg += "<span class='thin' style='line-height: 35px; font-size:24px' color='#4A4A4A'>" + message.title + "</span>";
		}
		if (message.message){
			if (msg != ""){
				msg+= "<br />";
			}
			msg += "<span class='light' style='font-size:28px;line-height: 30px;'>" + message.message + "</span>";
		}

and https://github.com/MichMich/MagicMirror/blob/master/modules/default/alert/alert.js#L81

		if (params.title) {
			message += "<span class='light' style='line-height: 35px; font-size:30px' color='#4A4A4A'>" + params.title + "</span>"
		}
		if (params.message) {
			if (message != ""){
				message += "<br />";
			}

			message += "<span class='thin' style='font-size:22px;line-height: 30px;'>" + params.message + "</span>";
		}

I believe that most elegant way of fixing it is to move those styles into CSS file and have ability to override it in custom.css or other file.

strawberry 3.141

@morozgrafix thats correct, another possibility could be !important