MMM-SolarPicture

bugphunk

Hello everyone!

First of all: Thanks for the module! I like it a lot.

I tried to move the picture around by adding a new position in my custom.css but it is not moving at all. The MMM.MoonPhase module moves without a problem, but these paramaters don´t work for the sun (because of the missing *.css file, I guess). I´m no expert at all, therefore a little help would be highly appreciated!

My goal is to push the sun “outside” the screen so that only the upper left corner of the sun is on the bottom right side of the screen.

Thanks in advance and kind regards,
Marco

sdetweil

@bugphunk i do not know, but use the developer window elements tab to discover and set css styles to determine what needs to go in custom.css

see the second link in my signature below

grena

Hello @bugphunk,

I’m not sure I fully understand what you want to do… But to move a module, use the position option. An illustration of the different zones is available here

If you do not get the desired result, you must look for the custom CSS code!

The module displays a simple img in a div… The absence of a CSS file in MMM-SolarPicture should simplify things because everything is managed by MM!

Grena

bugphunk

Thanks for your support. The developer window elements tab might do the trick.

bugphunk

Got it! Thanks again!

rkorell

@bugphunk cool!
It would be nice if you post here, how you did this get done…

Regards,
Ralf

plainbroke

@bugphunk
Ditto on how you got to this point that looks really nice.

bugphunk

Hi folks, I’m no expert at all and it was a lot of trial and error. I used the lower_third position because there aren’t any other modules in that position which were also moving around the screen when changing the position of MMM-Solar-Picture. Also the NASA-watermark is still there in the upper left corner of the shown solar picture. It is just hidden behind the Earth module, so that worked out for me. My config.js on a 1080p screen

{
        module: "MMM-SolarPicture", //IGNORED
        position: "lower_third",
        config: {
                imageType: 'AIA 304',
                updateInterval: 1 * 60 * 60 * 1000, //(1 hour)
                maxMediaWidth: 1200,  
                maxMediaHeight: 1200 
                    }
        },

I added these lines to my custom.css

.MMM-SolarPicture img {
position: absolute;
top: +100px;     
left: +1100px;   
opacity: 1 !important;
}

Good luck with moving around your sun and kind regards