Move middle_center below other regions?

smartroad

Does anyone know if it is possible to reorganise the rendering order of regions (z position)? I have a module that displays an image of the Earth (MMM-Globe) and would like it to be behind the left and right regions, currently it puts the image above them.

I have tried fullscreen_below but that just shows the image in the top left corner. Or is there a way to get that to show in the middle?

No idea what to search for in DuckGoogBing as I am sure I am using the wrong terms :(

Any assistance would be gratefully received!

sdetweil

@smartroad you can add an entry to custom.css to set you module content in a lower z-position

smartroad

@sdetweil Thanks for the reply. Been playing with CSS (and searching for what to do). I’ve tried

.region.middle.center {
z-index: -1;
}

If I change z-index to anything other than 0 the contents dissapear. I’m not that conversant with CSS and am probably miss understanding the sites I have been reading as to how it works

sdetweil

@smartroad well, you probably didn’t want to push ALL of middle center back… but maybe…

.modulename .module-content { 
    z-index: -1;
}

replace modulename with the actual module name

smartroad

@sdetweil got there in the end!

ended up having to also add position to make the z-index work and also add both to the other modules I wanted it behind (but with a higher z-height).

Ended up with:

.module.weather.weather{
position: relative;
z-index: 1;
background-color: rgba(0,0,0,0.5);
padding: 10px;
border-radius:15px;
}

.module.MMM-Globe.MMM-Globe .module-content{
position: relative;
z-index: -50;
}

.module.calendar .module-content{
position: relative;
z-index: 1;
  background-color: rgba(0,0,0,0.5);
  padding: 10px;
border-radius:15px;
}

I also added in a semitransparent background to make the text stand out against the image.

Many thanks for your help and pointers :D

sdetweil

@smartroad you don’t need .module too

smartroad

@sdetweil :thumbs_up_light_skin_tone: thanks :D

sdetweil

@smartroad https://forum.magicmirror.builders/topic/17773/calendar/8?_=1683543891403

that is a copy/paste of a module’s content from the developers window.

note that the class=" module and modulename" both occur only on the same element, so using just .modulename will select the same content as using both

when there is no space between the selector clause class names, this means BOTH must occur on the same element, and in this case there is only one of those to select.

and just as food for thought, it takes a little more cpu cycles to look up TWO things together than just one.