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

Modules size

Scheduled Pinned Locked Moved Troubleshooting
10 Posts 5 Posters 15.7k 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.
  • K Offline
    KirAsh4 Moderator
    last edited by Aug 10, 2016, 5:51 PM

    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
    • S Offline
      strawberry 3.141 Project Sponsor Module Developer
      last edited by Aug 31, 2016, 5:40 PM

      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

      L 1 Reply Last reply Jan 26, 2017, 10:29 AM Reply Quote 1
      • L Offline
        lucallmon @strawberry 3.141
        last edited by Jan 26, 2017, 10:29 AM

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

        S 1 Reply Last reply Jan 26, 2017, 12:18 PM Reply Quote 0
        • S Offline
          strawberry 3.141 Project Sponsor Module Developer @lucallmon
          last edited by Jan 26, 2017, 12:18 PM

          @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
          • L Offline
            lucallmon
            last edited by Feb 4, 2017, 2:10 PM

            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?

            C 1 Reply Last reply Feb 4, 2017, 2:22 PM Reply Quote 0
            • C Offline
              cowboysdude Module Developer @lucallmon
              last edited by cowboysdude Feb 4, 2017, 2:26 PM Feb 4, 2017, 2:22 PM

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

              L 1 Reply Last reply Feb 4, 2017, 10:32 PM Reply Quote 0
              • L Offline
                lucallmon @cowboysdude
                last edited by Feb 4, 2017, 10:32 PM

                @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
                • C Offline
                  cowboysdude Module Developer
                  last edited by Feb 5, 2017, 3:06 AM

                  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;
                  }
                  
                  
                  L 1 Reply Last reply Feb 5, 2017, 12:32 PM Reply Quote 0
                  • L Offline
                    lucallmon @cowboysdude
                    last edited by yawns Feb 5, 2017, 2:53 PM Feb 5, 2017, 12:32 PM

                    @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