4. MMM-WunderGround24Hours: How to set transparent background?

MMM-WunderGround24Hours: How to set transparent background?

  • U

    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

    0
  • D
    Module Developer

    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.

    0
    U
     1 Reply
  • U

    @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;
 }
    0 1 Reply
  • Module Developer

    @Unknown

    html {
  background: none;
}
    0
  • U

    @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;
    0
  • D
    Module Developer

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

    0
  • U

    Ah, now I understand. Many Thanks!

    0