MagicMirror² v2.12.0 is available! For more information about this release, check out this topic.

Make Mirror brighter through custom.css



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



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

  • Module Developer

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



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



  • 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!



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



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



  • @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?


  • Module Developer

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


Log in to reply