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.

    Notification customize

    Scheduled Pinned Locked Moved Custom CSS
    10 Posts 2 Posters 1.5k Views 2 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.
    • F Offline
      fischi87 @MMRIZE
      last edited by

      @MMRIZE
      The Problem is, when i send just the Alert without the notification Type, the alert Display in Center with a other Looks Like. So i think this Are 2 different things. I want the different between notification and the alert.

      I work with notification from other modules?

      M 1 Reply Last reply Reply Quote 0
      • M Offline
        MMRIZE @fischi87
        last edited by

        @fischi87
        So, what you want is this kind? Instead of top position than bottom position?
        3b9d4d5f-4bda-467b-b1f8-bf04ed7131b5-image.png

        You can override most of presentation with css.
        Append this into your custom.css

        /* css/custom.css */
        .ns-box {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 10px;
        }
        
        .ns-effect-slide-center.ns-show {
          animation: new-anim-slide-elastic-center 1s ease;
        }
        
        @keyframes new-anim-slide-elastic-center {
          0% {
            opacity: 0;
            transform: translateY(100%);
          }
          90% {
            opacity: 1;
            transform: translateY(-20px);
          }
          100% {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        

        You may need hiding animation. guess it by yourself. :)

        F 1 Reply Last reply Reply Quote 0
        • F Offline
          fischi87 @MMRIZE
          last edited by

          @MMRIZE

          thanks that looks fine and this is a alert or alert with type notification? because i need the type notification. if i get more than one notification the alert displayed just the last one and the notification more than just one. u know what i mean?

          M 2 Replies Last reply Reply Quote 0
          • M Offline
            MMRIZE @fischi87
            last edited by

            @fischi87
            It is for type: 'notification'.
            I used this;

            
            this.sendNotification('SHOW_ALERT', {
                    type: 'notification',
                    title: 'Test Module',
                    message: 'I am a test notification',
                    timer: 10000,
            })
            
            F 1 Reply Last reply Reply Quote 0
            • M Offline
              MMRIZE @fischi87
              last edited by

              @fischi87
              But what you want is a stackable something; it needs another CSS modification. (I thought only single notification case.)

              1 Reply Last reply Reply Quote 0
              • F Offline
                fischi87 @MMRIZE
                last edited by

                @MMRIZE

                i will give it a try later with ur css data and let u know if its work. thank man.

                1 Reply Last reply Reply Quote 0
                • 1 / 1
                • 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