middle_left, middle_center, middle_right

[A Former User]

@evroom
So, do you want to align some elements(text or somethings) to the right in middle_center?

.region.middle.center {
  text-align:right;
}

Try this…

[evroom]

Actually, I want to divide the middle section in 60% and 40%.

I have my monitor rotated (portrait mode), so dividing in more parts does not make sense in terms of readability, but I guess persons with the monitor in landscape mode might want 25% - 50% - 25% (as an example).

So, therefore I changed the middle center to 60%, which results in a middle section of 60% on the right-hand-side.
And an empty middle section of 40% on the left-hand-side.
The modules in the positions top_right and bottom_right do fill parts of on the right-hand-side, but I do not have control of the (top)-alignment.
A center_left and center_right would help here.
I hope it a bit clear. Not that easy to explain.

I was looking for something like this:

.region.left.center {
  width: 60%;
}
.region.middle.center {
  width: 0%;
}
.region.right.center {
  width: 40%;
}

[A Former User]

@evroom
You can escape MM’s region boundary using

position:absolute;

or

position:relative;

But you should have some knowledge or experience about CSS.

[evroom]

@Sean,

Thanks.
Just starting to understand a little bit about CSS, so better to try different options.
One being:

Multiple modules with the same position will be ordered based on the order in the configuration file.

I will order my modules in the config.js, as there are now placed randomly, and then see if it fits my expectations.

[greedyvegan]

I added a module that has a black background, and its background is covering other modules… the z-index isn’t working from custom css and I can’t change its transparency.
(I’ve tried changing the other module’s z-index to no avail)

can I change the position from “middle_center” to “middle_center_below”?

(

thanks

[sdetweil]

@greedyvegan no we don’t have a position like that
and starting w ver 2.29 we check the positions against what is defined in index.html

where are you putting the z-index? in css, on what element

see the second link in my sig below for using the dev window elements tab

also set your module background the some non black color so you can see it

[greedyvegan]

@sdetweil said in

where are you putting the z-index? in css, on what element

• .MMM-Globe {;z-index:-1;
  background-color: transparent !important;}

see the second link in my sig below for using the dev window elements tab

also set your module background the some non black color so you can see it

• it is

[greedyvegan]

“fullscreen_below” fixed it, thanks

[sdetweil]

@greedyvegan cool

but this was an error

 {;z

that leading ;