MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    How to set Font in Alarm Clock

    Scheduled Pinned Locked Moved Troubleshooting
    13 Posts 4 Posters 7.7k Views 3 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • N Offline
      nobita
      last edited by

      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

      1 Reply Last reply Reply Quote 0
      • brobergB Offline
        broberg Project Sponsor
        last edited by

        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;
        
        }
        N 2 Replies Last reply Reply Quote 0
        • N Offline
          nobita @broberg
          last edited by

          @broberg Thanks for your hint , I will try later

          1 Reply Last reply Reply Quote 0
          • N Offline
            nobita @broberg
            last edited by

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

            strawberry 3.141S 1 Reply Last reply Reply Quote 0
            • strawberry 3.141S Offline
              strawberry 3.141 Project Sponsor Module Developer @nobita
              last edited by

              @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
              }
              

              Please create a github issue if you need help, so I can keep track

              N 1 Reply Last reply Reply Quote 1
              • N Offline
                nobita @strawberry 3.141
                last edited by

                @strawberry-3.141 not work, thanks

                strawberry 3.141S 1 Reply Last reply Reply Quote 0
                • strawberry 3.141S Offline
                  strawberry 3.141 Project Sponsor Module Developer @nobita
                  last edited by

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

                  Please create a github issue if you need help, so I can keep track

                  brobergB 1 Reply Last reply Reply Quote 0
                  • brobergB Offline
                    broberg Project Sponsor @strawberry 3.141
                    last edited by

                    @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.

                    morozgrafixM 1 Reply Last reply Reply Quote 0
                    • morozgrafixM Offline
                      morozgrafix Moderator @broberg
                      last edited by

                      @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.141S brobergB 2 Replies Last reply Reply Quote 2
                      • strawberry 3.141S Offline
                        strawberry 3.141 Project Sponsor Module Developer @morozgrafix
                        last edited by

                        @morozgrafix thats correct, another possibility could be !important

                        Please create a github issue if you need help, so I can keep track

                        1 Reply Last reply Reply Quote 2
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy