• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Centering Photos on MMM-ImagesPhotos

Scheduled Pinned Locked Moved Unsolved Troubleshooting
11 Posts 3 Posters 2.5k Views 3 Watching
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.
  • P Offline
    plainbroke @kit444
    last edited by Feb 13, 2022, 6:37 PM

    @kit444

    I use this in the custom.css to center mine:

    .MMM-ImagesPhotos {
    Horizontal-align: center;
    Vertical-align: middle;
    }

    My Config.js :
    {
    module: “MMM-ImagesPhotos”,
    position: “middle_center”,
    config: {
    opacity: 0.9,
    animationSpeed: 500,
    updateInterval: 10000,
    backgroundColor: “black”,
    width: “800px”,
    height: “800px”,
    fill: false
    }
    },

    Works for the screen I use. it did’nt untill I set the width and height though.

    Just my 2 cents. Mileage may vary for you though.

    Slow learner. But trying anyways.

    K S 2 Replies Last reply Feb 14, 2022, 11:21 PM Reply Quote 0
    • K Offline
      kit444 @plainbroke
      last edited by Feb 14, 2022, 11:21 PM

      @plainbroke Unfortunately if I use the middle_center position, the photos will block out the other modules on the page. I need to use the fullscreen_below region. I tried to add the Horizontal-align to my css, but it didn’t recognize that parameter.

      S 1 Reply Last reply Feb 14, 2022, 11:37 PM Reply Quote 0
      • S Offline
        sdetweil @plainbroke
        last edited by sdetweil Feb 14, 2022, 11:39 PM Feb 14, 2022, 11:36 PM

        @plainbroke weird. the code reads the screen height and width and adjusts the position and size to keep the same aspect ratio.

        also, the background is already black

        only on my version. the original does it differently

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • S Offline
          sdetweil @kit444
          last edited by Feb 14, 2022, 11:37 PM

          @kit444 you could add a css z-index:-1

          but that is what background does.

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          K 1 Reply Last reply Feb 15, 2022, 6:30 PM Reply Quote 0
          • K Offline
            kit444 @sdetweil
            last edited by Feb 15, 2022, 6:30 PM

            @sdetweil I could use that code to position the middle_center region behind the other regions?

            S 1 Reply Last reply Feb 15, 2022, 6:39 PM Reply Quote 0
            • S Offline
              sdetweil @kit444
              last edited by sdetweil Feb 15, 2022, 8:12 PM Feb 15, 2022, 6:39 PM

              @kit444 z-index:-?? just pushes it farther away, other modules would then be on top z-index:0;

              fullscreen-above is z-index:1;

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              K 1 Reply Last reply Feb 15, 2022, 10:45 PM Reply Quote 0
              • K Offline
                kit444 @sdetweil
                last edited by Feb 15, 2022, 10:45 PM

                @sdetweil I’m still not having any luck. I tried adding z-index: -1 to the region.middle_center in the custom css. It still placed the photos over some of the modules. I tried adding a z-index: 0 or 1 to another region to see if I could re-layer the regions. No difference. I added z-index: -1 to the middle_center region in the main. css. It centered the photos under all the other regions, but left a black bar in the middle of each. Lastly I tried to add an align-items and align-content to the main css under the fullscreen region. Neither worked.

                S 1 Reply Last reply Feb 16, 2022, 1:33 AM Reply Quote 0
                • S Offline
                  sdetweil @kit444
                  last edited by sdetweil Feb 16, 2022, 4:36 AM Feb 16, 2022, 1:33 AM

                  @kit444 rather than try and try and try

                  see
                  https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1644962684132

                  one thing to do to learn the regions is to set each to a different background color.

                  the regions overlap…

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • 1
                  • 2
                  • 1 / 2
                  1 / 2
                  • First post
                    8/11
                    Last post
                  Enjoying MagicMirror? Please consider a donation!
                  MagicMirror created by Michael Teeuw.
                  Forum managed by Sam, technical setup by Karsten.
                  This forum is using NodeBB as its core | Contributors
                  Contact | Privacy Policy