How to set Font in Alarm Clock

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

broberg

@morozgrafix I actually tried changing the font-size in the .js file, but no go, still the size is unaffected,
adding !important to font-size works

Edit, it works when you change the correct line. sorry my mistake, so we can conclude that it is as morozgrafix says, the inline style overwrites the css files.
So a quick fix would be to just use !important in the css

And Then someone can make a pull request on the default module to remove the inline styles and add it to the css file instead

broberg

@morozgrafix was totally right, edited my post above

morozgrafix

@broberg I agree with you and think that getting rid of those inline styles is the best long term solution