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.

    Modules size

    Scheduled Pinned Locked Moved Troubleshooting
    10 Posts 5 Posters 15.9k Views 4 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.
    • T Offline
      trividar
      last edited by

      Hi

      I would like to make all modules on the left site on my monitor bigger. How can i do this?
      THX for help0_1470847814254_1

      1 Reply Last reply Reply Quote 0
      • KirAsh4K Offline
        KirAsh4 Moderator
        last edited by

        You can search the forums for 'custom.css' and see how others are changing their styling. Each module uses a common set of styles, and by using targeted CSS rules, you can specifically set which module you want to change.

        A Life? Cool! Where can I download one of those from?

        1 Reply Last reply Reply Quote 0
        • strawberry 3.141S Offline
          strawberry 3.141 Project Sponsor Module Developer
          last edited by

          To close up this topic the solution he needed was

          .MMM-swisstransport {
              width: 400px;
          }
          

          Please create a github issue if you need help, so I can keep track

          lucallmonL 1 Reply Last reply Reply Quote 1
          • lucallmonL Offline
            lucallmon @strawberry 3.141
            last edited by

            @strawberry-3.141 said in Modules size:

            To close up this topic the solution he needed was

            .MMM-swisstransport {
                width: 400px;
            }
            

            Where was this found? The answer still wasn’t clear. I’d like to shrink the size of my calendar.

            strawberry 3.141S 1 Reply Last reply Reply Quote 0
            • strawberry 3.141S Offline
              strawberry 3.141 Project Sponsor Module Developer @lucallmon
              last edited by

              @lucallmon every module is inside a div container with the module name as class. in your case the selector would be .calendar { /* do the magic*/}

              Please create a github issue if you need help, so I can keep track

              1 Reply Last reply Reply Quote 0
              • lucallmonL Offline
                lucallmon
                last edited by

                I found where it needed to go. Every time I change a module, it starts small on load, then every other module on the same side just resizes it. So, I resize all the modules and it just goes back to the same size… too big. Thoughts?

                cowboysdudeC 1 Reply Last reply Reply Quote 0
                • cowboysdudeC Offline
                  cowboysdude Module Developer @lucallmon
                  last edited by cowboysdude

                  @lucallmon said in Modules size:

                  I found where it needed to go. Every time I change a module, it starts small on load, then every other module on the same side just resizes it. So, I resize all the modules and it just goes back to the same size… too big. Thoughts?

                  It needs to go in your custom.css file… When I do it I have no problems :)

                  0_1486218038870_width.png

                  I have the .clock in my custom.css file a width of 100 and this is the result and no other module is effected or no other module overrides my setting.

                  Are you sure you’re entering this in your custom.css file? If you are trying to edit the module itself when there’s an update you’ll lose all the changes you made… if you use your custom.css file you won’t :)

                  Of course I’ll be taking that back out because it’s ugly LOL but I’m using my dev on my computer to show you.

                  lucallmonL 1 Reply Last reply Reply Quote 0
                  • lucallmonL Offline
                    lucallmon @cowboysdude
                    last edited by

                    @cowboysdude could you post a copy of your custom.css file so I can see what you are talking about? Right now, my ‘body’ in the file is blank.

                    1 Reply Last reply Reply Quote 0
                    • cowboysdudeC Offline
                      cowboysdude Module Developer
                      last edited by

                      The bottom is the entire custom.css file that matches the pic I posted… I used .clock because that is the module name…

                      if I were going to use the other module shown it would be…

                      .MMM-NFLweather  {
                          width: 100px;
                      }
                      
                      /*****************************************************
                       * Magic Mirror                                      *
                       * Custom CSS                                        *
                       *                                                   *
                       * By Michael Teeuw http://michaelteeuw.nl           *
                       * MIT Licensed.                                     *
                       *                                                   *
                       * Add any custom CSS below.                         *
                       * Changes to this files will be ignored by GIT. *
                       *****************************************************/
                      
                       body {
                       	cursor: help
                       }
                      .clock {
                          width: 100px;
                      }
                      
                      
                      lucallmonL 1 Reply Last reply Reply Quote 0
                      • lucallmonL Offline
                        lucallmon @cowboysdude
                        last edited by yawns

                        @cowboysdude thanks for the help. This is actually what worked for me:

                         body {
                        	cursor: help
                         }
                         
                         .region.top.left {
                        	width: 375px
                        }
                        
                        1 Reply Last reply Reply Quote 2
                        • 1 / 1
                        • First post
                          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