Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    Make Mirror brighter through custom.css

    Custom CSS
    5
    9
    381
    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.
    • S
      simphi last edited by

      Hi I’ve always used MMM-Remote-Control to increase the birightness of my MagicMirror. But since I switched to a client-only Instance with MM running in docker on my home-server, the module doesnt work anymore. So now I want to increase the brighntess through a custom.css. The problem is: Im a complete beginner with css. Do you guys already have such a custom.css? Can you share it maybe?

      Thanks in advance.

      T lavolp3 2 Replies Last reply Reply Quote 0
      • T
        TheDuDiop @simphi last edited by sdetweil

        @simphi hello here can you see my custom it’s not completely done yet. but it might help you a little

        /*****************************************************
         * Magic Mirror                                      *
         * Custom CSS                                        *
         *                                                   *
         * By Michael Teeuw http://michaelteeuw.nl           *
         * MIT Licensed.                                     *
         *                                                   *
         * Add any custom CSS below.                         *
         * Changes to this files will be ignored by GIT. *
         *****************************************************/
        html {
          cursor: none;
          overflow: hidden;
          background: #2a313b;
        }
        
        ::-webkit-scrollbar {
          display: none;
        }
        
        body {
          margin: 10px;
          position: absolute;
          width: calc(100% - 20px);
          height: calc(100% - 20px);
          background: #2a313b;
          
          font-weight: 400;
          font-size: 2em;
          line-height: 1.5em;
          margin-bottom: -10px;
          -webkit-font-smoothing: antialiased;
        }
        
        .dimmed {
            color: #000;
        }
        
        .normal {
            color: #000;
        }
        
        .bright {
          color: #000;
        }
        .header {
          color: #000;
        }
        .module.calendar{
          background-color:#2a313b;
          border-radius:8px;
          padding:8px;
          color: #00f2ff;
          border: 1px solid ##00f2ff;
          width:300px;
          height: 150px;
          }
        
        .module.clock {
          background-color:#FFCC00;
          border-radius:8px;
          padding:8px;
          color: #FFCC00;
          border: 1px solid #2a313b;
          width:300px;
          height: 150px;
          }
        .module.updatenotification {
        	color: #FFCC00;
        	border: 1px solid #FFCC00;
        }
        
        S 1 Reply Last reply Reply Quote 1
        • lavolp3
          lavolp3 Module Developer @simphi last edited by

          @simphi yeah you can include these items in custom.css and play with them

          .dimmed {
          color: #ccc;
          }
          
          .normal {
          color: #eee;
          }
          
          .bright {
          color: #fff;
          }
          

          Color: #fff is white. You could also write it as #ffffff.
          #eee or #eeeeee is a very light grey.

          1 Reply Last reply Reply Quote 1
          • S
            sdetweil @TheDuDiop last edited by sdetweil

            @TheDuDiop please use code blocks for technical info
            paste, mark the text, hit the </> button above the editor to wrap in a code block

            please edit and correct

            T 1 Reply Last reply Reply Quote 0
            • S
              simphi last edited by

              I just read the code from the MMM-Remote Module and created this CSS. Seems to work well:

              body {
              	color: #ffffff;
              }
              
              header {
              	color: #ffffff;
              	border-bottom: 1px solid #ffffff;
              }
              
              .dimmed {
              	color: #cccccc;
              }
              
              .normal {
              	color: #ffffff;
              }
              
              .bright {
              	color: #ffffff;
              }
              

              Thank you all!

              J 1 Reply Last reply Reply Quote 0
              • T
                TheDuDiop @sdetweil last edited by

                @sdetweil sorry was too late. to edit. will do it at the next post thanks for the hint

                Error

                You are only allowed to edit posts for 3600 second(s) after posting

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

                  @TheDuDiop just means try to do it right , helps us all help you

                  1 Reply Last reply Reply Quote 0
                  • J
                    Jagsi @simphi last edited by

                    @simphi Hy - I copied this to my custom.css file but nothing changed in the appearance of the mirror? Can someone give me hint what I did wrong?

                    lavolp3 1 Reply Last reply Reply Quote 0
                    • lavolp3
                      lavolp3 Module Developer @Jagsi last edited by

                      @Jagsi post your custom.css and we can try to help

                      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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy