Regions

KirAsh4

In case one wants to know where the various regions are. Missing are the fullscreen_below and fullscreen_above as those cover the whole screen, one under everything else and the other above.

top_bar and bottom_bar are light gray
top_left and bottom_left are red
top_center and bottom_center are blue
top_right and bottom_right are green
upper_third is yellow
middle_center is cyan
lower_third is magenta

All these regions will resize as needed.

Peter

Is it possible to set the bottom bar to a fixed size (so no resizing)?
Depending on the amount of lines in the bottom bar news feed, my modules in bottom left and bottom right jump one line higher or lower.
Peter

broberg

@Peter It’s all doable with css.

.region.bottom {
height: 200px;
}

This you add in your custom.css file (outside of body{})

Peter

@broberg , unfortunately it did not work: now the bottom bar and bottom left en bottom right overlap.
I changed the value and tried .regio bottom_bar.
Any more ideas?
Peter

doubleT

@Peter said in Regions:

.regio bottom_bar.

Can you copy and paste your exact code? It’s important that you address it with “.region.bottom” (no space, and note the dots)

I posted about addressing elements in CSS before, see here.

Peter

@doubleT sorry for the misunderstanding.
First I copied and pasted your code; it gave an overlap (bottom bar and bottom left and bottom right).
Then I tried more things like changing it in . bottom_bar (did not help to solve the problem.).
And I tried some other values in your code.
Restarted the RPI every time in between the changes.
But still the same problem.
Peter

doubleT

@Peter said in Regions:

. bottom_bar

That’s what I ment with exact code. Because this will do nothing, it should be

.bottom.bar

Because the element you want to address has both classes, there’s no space in between.
But I see where it went wrong: “bottom_bar” is how you assign a module to a region in the config.js. But that’s not how you address it in css.

Can you show us your problem with either a screenshot or a photo? If I understand right, you have

Newsfeed in bottom_bar (css: .region.bottom.bar .container .module)
a module in bottom_left (css: .region.bottom.bar .region.bottom.left)
something in bottom_right (css: .region.bottom.bar .region.bottom.right)
Important: “.region.bottom.bar .container” will address ALL of them because of the structure.

Usually, the bottom_bar should claim its place as needed and push the other two up as necessary. So that would be normal (and is what you described).

I’d try

.region.bottom.bar .container .module.newsfeed {
    height: ???px; /* height of the module with maximum lines possible */
}

Peter

@doubleT , you made my day!
It works perfectly.
Indeed I have a newsfeed (several from different sources) in the bottom_bar, Moviemodule in bottom_left and random (travel) pictures in bottom_right region.
With your help the modules stay on the same line!
Thanks!
Peter

doubleT

You’re welcome.
Btw. depending on how you control your Pi and Mirror, you don’t need to restart your whole Pi. In this case, just refreshing the browser should work, or restarting the Mirror process, if it doesn’t.

WayneRigley

Hi all, well after countless trying ive given up and now asking for help. my MM is working perfect and the only troubling issue in my top_right section, i have a few things in there under the config but i would like to extend the left border of my top_right a little more left if thats possible. i have too much open space from the center to the right side. i will not be resizing fonts using the shift+ +/- any longer so that wont be an issue is manually adjusted. thanks all in advance and have a look here what im refering to
https://photos.app.goo.gl/EUWdJRQwAjKJksx46

Fifin404

Hi all, is there any way to change outer border around modules? Make it smaller?

Fozi

Im main.css you can change the margin, heightand width under ‚body’ as you need. Here are my values I adjusted. The default values are commented.

body {
  /* margin: 60px; */
  margin: 5px; 
  position: absolute;
  /*height: calc(100% - 120px);
  width: calc(100% - 120px);*/
  height: calc(100% - 10px);
  width: calc(100% - 10px);

Fifin404

Thank you, that is what I looking for.

Mykle1

@Fozi said in Regions:

Im main.css you can change

Encouraging people to modify their main.css is really not a good idea, especially for those that are new to MM and/or linux.

Please direct your help towards the custom.css file which is intended for just such modifications.

Peace

-A concerned citizen-

drwatson

Good point, @Mykle1

Can you then suggest the equivalent change to make the proper way without modifying the main.css?

cskenney

@drwatson Copy the exact same code that @Fozi noted above and put it in the custom.css file.

Below is what I put in my custom.css file.

body {
  margin: 5px;
  position: absolute;
  height: calc(100% - 10px);
  width: calc(100% - 10px);
}

BKeyport

This post is deleted!

Fozi

@Mykle1 ouh damned…your concerns are absolutely justified. Haven’t hought of that. Thanks for pointing me to that.:thumbs_up_light_skin_tone:

Fifin404

Yes I added code to custom.css not main.css. Thanks for all

Mykle1

@drwatson @Fozi

Can you then suggest the equivalent change to make the proper way without modifying the main.css?

Well, any changes that you consider making in the main.css can be made in the custom.css file without changing the main.css file. The custom.css file will override what is in the main.css file. This way you’re not altering any core files and your modifications will be accepted. When it’s time to upgrade to a newer version of MM the upgrade won’t abort because of changes you’ve made to the core files and your custom.css changes will survive the upgrade. :-)

I’m still learning things every day and I enjoy the process. That’s the whole point for me.

Peace!