• 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.

Change default module width

Scheduled Pinned Locked Moved Unsolved Troubleshooting
11 Posts 3 Posters 5.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.
  • E Offline
    eqpaisley @BKeyport
    last edited by Nov 27, 2022, 12:03 AM

    @BKeyport Great info, thanks so much. Yeah that’s the module in question. Can 2 modules occupy 1 area ? Like side by side if they are not as wide as the ones below? Wondering how much latitude I have. For now I’ll try the float, thanks .

    B 1 Reply Last reply Nov 27, 2022, 3:21 AM Reply Quote 0
    • B Offline
      BKeyport Module Developer @eqpaisley
      last edited by Nov 27, 2022, 3:21 AM

      @eqpaisley Technically yes. This is my top bar.

      5283c134-5d40-4378-8e79-a20b29ba2145-image.png

      To do this I made the following changes.

      in custom.css:

      /* adjust modules to display side by side */
      .MMM-FlipClock, .MMM-Worldclock, .MMM-Multimonth {
      	display: inline-flex;
      }
      

      in config.js I found that I had to have the modules in the same order and next to each other to function:

      		{
      			module: 'MMM-FlipClock', // https://github.com/MarcLandis/MMM-FlipClock
      			position: 'top_bar',
      			config: {
      				seperator: ":",
      				dateFormat: "dddd - LL",
      				displaySeconds: true,
      			},
      		},
      		{
      			module: "MMM-Worldclock", // https://github.com/bkeyport/MMM-Worldclock
      			position: "top_bar",
      			config: {
      				offsetTimezone: "UTC",
      				style: "bottom",
      				clocks: [
      					{
      						title: "Eastern<br>",
      						timezone: "America/New_York",
      						timeFormat: "hh:mma[<br>]Do",
      					},
      					{
      						title: "Sydney, AU<br>",
      						timezone: "Australia/Sydney",
      						timeFormat: "hh:mma[<br>]Do",
      					},
      					{ 
      						title: "World<br>",
      						timezone: "UTC",
      						timeFormat: "HHmm[<br>]Do",
      					},
      				]
      			},
      		},
      		
      		{
       			module: "MMM-Multimonth", // https://github.com/BKeyport/MMM-Multimonth
      			position: "top_bar",
      			config: {
      				startMonth: -1, // Define when you start from current month (negative is before current, zero is current, positive is in future)
      				monthCount: 3, //  How many months to display
      				monthsVertical: false, // Whether to arrange the months vertically (true) or horizontally (false).
      				//repeatWeekdaysVertical: true, // Whether to repeat the week days in each month in vertical mode. Ignored in horizontal mode.
      				weekNumbers: false, // Whether to display the week numbers in front of each week.
      				highlightWeekend: false,
      				startWeek: 0,
      				otherMonths: true,
      			}
      		},
      

      The "E" in "Javascript" stands for "Easy"

      E 1 Reply Last reply Nov 27, 2022, 12:46 PM Reply Quote 1
      • E Offline
        eqpaisley @BKeyport
        last edited by Nov 27, 2022, 12:46 PM

        @BKeyport oh, wow very cool. I’ll give this a try ty

        1 Reply Last reply Reply Quote 0
        • E Offline
          eqpaisley
          last edited by Nov 27, 2022, 12:55 PM

          I tried this out and it was MOSTLY successful - I can get multiple inline modules on my top bar. But they look pretty wonky. Did you have to do anything in your CSS to get them to be the same height?

          ![alt text](50d576fc-e9d1-441b-a92d-8c8ed2258c9d-image.png image url)

          S B 2 Replies Last reply Nov 27, 2022, 1:19 PM Reply Quote 0
          • S Offline
            sdetweil @eqpaisley
            last edited by Nov 27, 2022, 1:19 PM

            @eqpaisley well their output is different height.

            to get them the same physical height you would have to add more content make the fonts bigger or change the vertical centering of the text.

            all of which I think looks worse!

            floating right works great when u have the same module repeated. I did this for a Rome train schedule a couple years ago

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • B Offline
              BKeyport Module Developer @eqpaisley
              last edited by Nov 27, 2022, 3:44 PM

              @eqpaisley as sam said, they’re different heights… As you can see, I also don’t have a background shade and/or a background on my mirror, so it eliminates most of the wonky right out of the gate.

              The "E" in "Javascript" stands for "Easy"

              E 1 Reply Last reply Nov 27, 2022, 4:50 PM Reply Quote 0
              • E Offline
                eqpaisley @BKeyport
                last edited by Nov 27, 2022, 4:50 PM

                @BKeyport thanks to you and @sdetweil – really appreciate you both patiently helping me with the basics. I think my previous setup looked fine :)

                B 1 Reply Last reply Nov 28, 2022, 5:42 AM Reply Quote 0
                • B Offline
                  BKeyport Module Developer @eqpaisley
                  last edited by Nov 28, 2022, 5:42 AM

                  @eqpaisley There’s plenty of CSS tutorials and tools on the web. Feel free to play. It’s really neat once you get into it. I learn something new every time I look into it. Enjoy!

                  The "E" in "Javascript" stands for "Easy"

                  E 1 Reply Last reply Nov 28, 2022, 11:52 AM Reply Quote 0
                  • E Offline
                    eqpaisley @BKeyport
                    last edited by Nov 28, 2022, 11:52 AM

                    @BKeyport I was able to solve some of the width wonkiness I was having. Figuring out the CSS is definitely a project, as you say, it costs nothing to backup my custom.css, try something new, the restore the old one if I borked it somehow.

                    1 Reply Last reply Reply Quote 0
                    • 1
                    • 2
                    • 1 / 2
                    1 / 2
                    • First post
                      7/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