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.

    MMM-Openhab header color

    Scheduled Pinned Locked Moved Utilities
    8 Posts 2 Posters 484 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.
    • S Offline
      sdetweil @clakkentt
      last edited by

      @clakkentt yah, iframe is untouchable

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      C 3 Replies Last reply Reply Quote 0
      • C Offline
        clakkentt @sdetweil
        last edited by

        @sdetweil

        But the i-frame properties must come from somewhere, the title in the i-frame is red

        This is the css file that is referenced

        
        /* =================================== HEADER FARBE */
        .mdl-layout__header {
          background-color: #000000 !important;
          color: red !important;
        }
        
        .mdl-layout {
          background-color: #000000 !important;
        }
        
        /* =================================== HINTERGRUND FARBE  */
        
        /*  HINTERGRUND STEUERELEMENTE */
        .page-content {
          background-color: #000000 !important;
        }
        /*  HINTERGRUND Links/Rechts Wrapper */
        .mdl-color--grey-100 {
          background-color: #000000 !important;
        }
        
        /* =================================== STEUERELEMENTE LINE-HEIGHT */
        
        /* ZEILENHÖHE */
        html.ui-layout-condensed .mdl-form__row {
            height: 45px;
        }
        
        /* =================================== STEUERELEMENTE FARBE  */
        
        /* STEUERELEMENTE - HINTERGRUND FARBE  */
        .mdl-color--white {
            background-color: #000000 !important;
        }
        /* STEUERELEMENTE - TEXT FARBE  */
        .mdl-color-text--grey-700 {
            color: #f4f00c !important;
        }
        /* STEUERELEMENTE - Zwischenstriche Farbe */
        .mdl-form__row {
            border-bottom: 1px solid #2d2d2d;
        }
        .mdl-form__label {
            color: #ffffff !important;
        }
        .mdl-form__control {
            color: #ffffff !important;
        }
        
        
        /* =================================== SWITCH FARBE OFF */
        
        /* SWITCH Button Farbe */
        .mdl-switch__thumb {
          background-color: #fff;
        }
        /* SWITCH Button Track */
        .mdl-switch__track {
            background: #9b4f4f;
        }
        /* SWITCH Button Button-Farbe */
        .mdl-switch__thumb {
          background: #5b5757;
        }
        
        /* =================================== SWITCH FARBE ON */
        /* SWITCH Button Button-Farbe */
        .mdl-switch.is-checked .mdl-switch__thumb {
            background: #d8d8d8;
        }
        /* SWITCH Button Track-Farbe*/
        .mdl-switch.is-checked .mdl-switch__track {
            background: #66d693;
        }
        /* =================================== FRAME Rundungen */
        
        /* Fenster / Abschnitt Rundungen */
        .mdl-form {
          /*+border-radius: 10px;*/
          -moz-border-radius: 3px;
          -webkit-border-radius: 3px;
          -khtml-border-radius: 3px;
          border-radius: 3px;
        }
        
        /* =================================== BUTTON FARBE - OFF */
        
        /* BUTTON SELECTED */
        BUTTON.mdl-button--accent {
          border: 1px solid #5ddd90;
          /*+box-shadow: 0px 0px !important;*/
          /*-moz-box-shadow: 0px 0px !important;
          -webkit-box-shadow: 0px 0px !important;
          box-shadow: 0px 0px !important;*/
          background-color: #333 !important;
          color: #5ddd90 !important;
        }
        /* =================================== BUTTON FARBE - ON */
        
        /* BUTTON DESELECTED */
        .mdl-form__setpoint BUTTON, .mdl-form__rollerblind BUTTON, .mdl-form__buttons BUTTON {
          color: white;
          background-color: #545454;
          /*+border-radius: 5px;*/
          -moz-border-radius: 2px;
          -webkit-border-radius: 2px;
          -khtml-border-radius: 2px;
          border-radius: 2px;
        }
        
        /* =================================== BUTTON FARBE - HOVER */
        
        /* BUTTON HOVER FARBE */
        BUTTON.mdl-button:hover {
          background-color: #5ddd90;
        }
        and this is the html file that Openhab uses
        
        
        1 Reply Last reply Reply Quote 0
        • C Offline
          clakkentt @sdetweil
          last edited by

          @sdetweil

          It’s interesting. I changed the header color in the .css file and after a reboot it shows up correctly when I render the page from openhab

          house sensors.png

          However in MM the cog wheel and House Sensors still shows in red. So that color must be set somewhere in the MMM-Openhab config files
          I’ll take another look

          1 Reply Last reply Reply Quote 0
          • C Offline
            clakkentt @sdetweil
            last edited by

            @sdetweil

            There is a css file in MM, but I still can’t figure out how to make it “work”

            
            .MMM-Openhab {
            	width: 400px;
            	height: 700px;
            	margin-right: 0px;
            	margin-left: 0px;
            	margin-top: 0px;
            }
            
            .MMM-Openhab .header {
              color: red;               /* Header color. Default is red. */
            }
            
            .MMM-Openhab .ifr {
             	width: 400px;
            	height: 680px;
            }
            
            I changed the red to different colors both in hex and by their name and restarted MM but the header is still red.
            
            Is there something, apart from restarting MM, that needs to be done to have the module accept the new color?
            
            S 1 Reply Last reply Reply Quote 0
            • S Offline
              sdetweil @clakkentt
              last edited by

              @clakkentt its called .module_header

              use the developers window elements tab

              see the second link in my signature below

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              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