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-WunderGround24Hours: How to set transparent background?

    Scheduled Pinned Locked Moved Troubleshooting
    9 Posts 4 Posters 4.1k Views 4 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.
    • U Offline
      Unknown
      last edited by

      Hi,

      I want to use mm2 as digital picture frame with background images from MMM-RandomPhoto. Everything look/works fine but mm module https://github.com/thobach/MMM-WunderGround24Hours shows black background. How can I make it transparent like the other modules?

      Thx

      1 Reply Last reply Reply Quote 0
      • D Offline
        doubleT Module Developer
        last edited by

        That module has a css file (public/css/main.css) that sets the background color to black:

        body, html {
        	background: #000;
        

        #000 is shortened hexadecimal code for black. The line should read

        	background: none;
        

        But: don’t write this in the modules own css file. That’s not the clean solution and brings trouble when the module is updated in the future.

        You probably already edited the custom.css file, right? Try adding:

        body, html {
        	background: none;
        

        What I find odd is that you said it’s just that module but that code would apply to the whole screen.

        U 1 Reply Last reply Reply Quote 0
        • U Offline
          Unknown @doubleT
          last edited by

          @doubleT: Thx. “background: none;” is working in the main.css file. I deleted the whole “background: #000;” entry which was not working…

          I don’t understand why my /home/pi/MagicMirror/css/custom.css is not working :-(

          
          /*****************************************************
           * 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. *
           *****************************************************/
          
           body, html {
                  background: none;
           }
          
          
          
          Mykle1M 1 Reply Last reply Reply Quote 0
          • Mykle1M Offline
            Mykle1 Project Sponsor Module Developer @Unknown
            last edited by

            @Unknown

            html {
              background: none;
            }
            

            Create a working config
            How to add modules

            1 Reply Last reply Reply Quote 0
            • U Offline
              Unknown
              last edited by

              @Mykle1 said in MMM-WunderGround24Hours: How to set transparent background?:

              html {
              background: none;
              }

              still not working with modifikation in custom.css… If I change it in Main.css in the module it self it works fine.

              pi@MagicMirror2:/home/pi/MagicMirror/css# cat custom.css
              
              /*****************************************************
               * 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 {
                background: none;
              }
              
              pi@MagicMirror2:/home/pi/MagicMirror/modules/MMM-WunderGround24Hours/public/css# head main.css
              body, html {
                      background: #000;
                      padding: 0px;
                      margin: 0px;
                      width:100%;
                      height: 100%;
              
                      letter-spacing: -2px;
                      color: #fff;
                      font-size: 75px;
              
              
              1 Reply Last reply Reply Quote 0
              • D Offline
                doubleT Module Developer
                last edited by doubleT

                The module’s css file is the last one to be called so its values override that of the custom.css. I should have mentioned that. You can try

                body, html {
                	background: none !important;
                }
                

                Changing settings of items not within the module is bad practice imho and shouldn’t be done (read: setting the main background when the module’s css should only do stuff within the module itself), but customizing within the module is also bad practice. And lastly, using !important is also not best practice, but in this case, I think we need to use it.

                Edit: Disregard that. I just saw that it’s an iframe.
                You have to change the module’s main.css. Usually, you cannot set css values in the content of the iframe (though I’m not 100% sure in this case, where it’s both within the same domain) without some jQuery and I guess you don’t want to build a module just to style another module. ;)

                1 Reply Last reply Reply Quote 0
                • U Offline
                  Unknown
                  last edited by

                  Ah, now I understand. Many Thanks!

                  1 Reply Last reply Reply Quote 0
                  • T Offline
                    thobach
                    last edited by

                    Please note this module was migrated to use the Dark Sky API and is now available as “MMM-DarkSky24Hours” under https://github.com/thobach/MMM-DarkSky24Hours.

                    1 Reply Last reply Reply Quote 0
                    • T Offline
                      thobach
                      last edited by

                      Please note this module was migrated to use the Dark Sky API and is now available as “MMM-DarkSky24Hours” under https://github.com/thobach/MMM-DarkSky24Hours.

                      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