Move middle_center below other regions?

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.