Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    Margin removal, background region and top bar.

    Custom CSS
    2
    4
    987
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • B
      Brandenborg last edited by

      I’m running MagicMirror on the raspberry touch screen and the margins end up being to large.
      As it’s a screen and not a mirror I additional use a module for background slideshow in the region full screen below.
      For the margins to the edges I’ve tried using:

      body {
      margin: 0px;
      height: 100%;
      width: 100%;
      }

      in the custom css. And while works fairly well for the normal modules, the background module somehow gets offset to the left.

      Additionally I’m using the top bar region for a navbar. I tried adjusting the size of this using “.region.top.bar” in custom css and setting height as 10 and 20px, however this doesn’t seem to change anything.

      Thanks in advance for any advice

      broberg 1 Reply Last reply Reply Quote 0
      • broberg
        broberg Project Sponsor @Brandenborg last edited by

        @Brandenborg First off,

        What background module are you using? and in what region have you placed that module?

        Restricting the top bars height doesn’t help much if the content inside it are larger.
        (you can try visualising this by adding overflow: hidden; to the .region.top.bar and see what happens to the content of the top bar)

        you could also add background-color: red; to the regions you are having problems with to see exactly where they start and end.

        1 Reply Last reply Reply Quote 1
        • B
          Brandenborg last edited by

          Hi @broberg. Thanks for replying.
          I’m using MMM-Flickr and have assigned that to the region fullscreen_below. Got this configured to fit perfectly prior to playing with css.
          However I’ll probably look for a different one where I can download and select specific images instead.

          I’ve put MMM-page-selector (no visible content) and MMM-navbar in the top bar region. The latter looks quite small but the distance between it and the clock in top left is quite big. I’ll try the overflow and coloring to see what I can find out from that

          1 Reply Last reply Reply Quote 0
          • B
            Brandenborg last edited by Brandenborg

            So seem to have gotten a little further regards to the top bar.
            Adding the position: absolute in body seems to have somewhat helped.
            The overflow hidden actually made top.left and top.right disappear.

             body {
            	position: absolute;
            	margin: 2;
            	height: 100%;
            	width: 99%; 
             }
             .region.top.bar {
            	 height: 40px;
            	 float: left;
             }
            

            My top.right module seems to be positioned a bit higher than my top.left module… But that might just be the look of the module itself.
            Still need to figure out how to left align the navbar and what is happening with the background_below region…

            Edit: Figured out the background as well after some research.
            The fullscreen section is actually defined to be offset by -60px due to the body margins being defined as 60px. So had to simply add a similar section in my custom.css changing the offset to what I put in the body margin.

            .region.fullscreen {
            	 position: absolute;
            	 top: -2px;
            	 left: -2px;
            	 right: -2px;
            	 bottom: -2px;
             }
            
            1 Reply Last reply Reply Quote 1
            • 1 / 1
            • First post
              Last post
            Enjoying MagicMirror? Please consider a donation!
            MagicMirror created by Michael Teeuw.
            Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy