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.

    notificationFx.css

    Scheduled Pinned Locked Moved Custom CSS
    8 Posts 2 Posters 876 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.
    • R Offline
      Ray
      last edited by

      So I have a dilemma that I don’t quite know how to solve
      currently in my custom.css . I have the settings for the alert module which uses the notificationFx.css. And it works perfectly.

      .ns-box {        
        background-color: rgba(0, 0, 0, 0.5);
        padding: 17px;
        line-height: 1.4;
        margin-bottom: 10px;
        z-index: 1;
        font-size: 70%;
        position: relative;
        display: table;
        word-wrap: break-word;
        max-width: 100%;
        border-width: 1px;
        border-radius: 5px;
        border-style: solid;
        border-color: var(--color-text-dimmed);
      }
      .ns-box .dimmed {     
          color: #00FFFF;
      }
      .ns-box .normal {     
          color: #ffffff;
      }
      .ns-box .bright {     
          color: #00FF00;
      }
      

      The problem is my new module MMM-StopwatchTimer uses exactly the same alert notificationFx.css
      I don’t want to have the same settings the same colors. How do I fix this problem

      Any help would be appreciated

      S 1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @Ray
        last edited by

        @ray I think if u add the modulename as the start of each class, that will override the general case

        alert .ns-box {…

        }

        note the space between alert and .ns-box

        repeat for all the classes that apply

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        R 2 Replies Last reply Reply Quote 0
        • R Offline
          Ray @sdetweil
          last edited by

          @sdetweil I think I tried that but I’ll try again

          1 Reply Last reply Reply Quote 0
          • R Offline
            Ray @sdetweil
            last edited by

            @sdetweil when I added it to the 1st 1 it worked
            but when I added to the other 3 everything is in black and white now

            .alert .ns-box  {        /*ns-box is for Alert. It displays notifications for other modules.*/
              background-color: rgba(0, 0, 0, 0.5);
              padding: 17px;
              line-height: 1.4;
              margin-bottom: 10px;
              z-index: 1;
              font-size: 70%;
              position: relative;
              display: table;
              word-wrap: break-word;
              max-width: 100%;
              border-width: 1px;
              border-radius: 5px;
              border-style: solid;
              border-color: var(--color-text-dimmed);
            }
            .alert .ns-box .dimmed {     /* Header MagicMirror */
                color: #00FFFF;
            }
            .alert .ns-box .normal {     /* */
                color: #ffffff;
            }
            .alert .ns-box .bright {     /* Welcome start was successful */
                color: #00FF00;
            }
            

            is it because I have
            dimmed
            normal
            bright
            should there be a – there instead of . Maybe

            I should’ve included these in my 1st reply sorry

            S 1 Reply Last reply Reply Quote 0
            • S Offline
              sdetweil @Ray
              last edited by

              @ray
              . (dot) means class
              no dot means html element (li, ul, div, span…)

              that should have worked

              this

              .alert .ns-box .normal
              

              means ALL the .normal classes, INSIDE .ns-box classes , inside .alert classes

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              R 1 Reply Last reply Reply Quote 0
              • R Offline
                Ray @sdetweil
                last edited by

                @sdetweil said in notificationFx.css:

                .alert .ns-box .normal

                If I set it up just like this. It works
                but the 3 items below my new module will use them, which I do not want

                .alert .ns-box {        /*ns-box is for Alert. It displays notifications for other modules.*/
                  background-color: rgba(0, 0, 0, 0.5);
                  padding: 17px;
                  line-height: 1.4;
                  margin-bottom: 10px;
                  z-index: 1;
                  font-size: 70%;
                  position: relative;
                  display: table;
                  word-wrap: break-word;
                  max-width: 100%;
                  border-width: 1px;
                  border-radius: 5px;
                  border-style: solid;
                  border-color: var(--color-text-dimmed);
                }
                .ns-alert .dimmed {     /* Header MagicMirror */
                    color: #00FFFF;
                }
                .ns-box .normal {     /* */
                    color: #ffffff;
                }
                .ns-box .bright {     /* Welcome start was successful */
                    color: #00FF00;
                }
                

                if I set it up like this. Everything is black and white. except for the box it will be black and the text will be white

                .alert .ns-box {        /*ns-box is for Alert. It displays notifications for other modules.*/
                  background-color: rgba(0, 0, 0, 0.5);
                  padding: 17px;
                  line-height: 1.4;
                  margin-bottom: 10px;
                  z-index: 1;
                  font-size: 70%;
                  position: relative;
                  display: table;
                  word-wrap: break-word;
                  max-width: 100%;
                  border-width: 1px;
                  border-radius: 5px;
                  border-style: solid;
                  border-color: var(--color-text-dimmed);
                }
                .alert .ns-box .dimmed {     /* Header MagicMirror */
                    color: #00FFFF;
                }
                .alert .ns-box .normal {     /* */
                    color: #ffffff;
                }
                .alert .ns-box .bright {     /* Welcome start was successful */
                    color: #00FF00;
                }
                
                

                I cannot see what I’m doing wrong here

                S 1 Reply Last reply Reply Quote 0
                • S Offline
                  sdetweil @Ray
                  last edited by sdetweil

                  @ray said in notificationFx.css:

                  If I set it up just like this. It works

                  but ALL the custom classes need .alert in front

                  only use for alert

                  sorry, didn’t scroll down

                  open the developers window, ctrl-shift-i, select the elements tab, click the pointer top left and navigate to the content in the left pane, and you will see the classes tree on the right… top is closest to the module, bottom is more global

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  R 1 Reply Last reply Reply Quote 0
                  • R Offline
                    Ray @sdetweil
                    last edited by

                    @sdetweil yes I just did that I sent you a copy of it

                    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