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

Changing the length of the line under the header

Scheduled Pinned Locked Moved Custom CSS
19 Posts 8 Posters 11.4k Views 8 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.
  • M Offline
    Mykle1 Project Sponsor Module Developer @cruunnerr
    last edited by Jan 7, 2018, 9:04 PM

    @cruunnerr

    Or don’t use a header at all. My personal preference. :-)

    Create a working config
    How to add modules

    C 1 Reply Last reply Jan 7, 2018, 9:40 PM Reply Quote 1
    • C Offline
      cruunnerr @Mykle1
      last edited by Jan 7, 2018, 9:40 PM

      @Mykle1 said in Changing the length of the line under the header:

      @cruunnerr

      Or don’t use a header at all. My personal preference. :-)

      Was just hoping there is an amazing trick to use the custom.css for exactly my problem XD

      Maybe i simply shouldn’t install every module i find ^^

      M 1 Reply Last reply Jan 7, 2018, 9:54 PM Reply Quote 1
      • M Offline
        Mykle1 Project Sponsor Module Developer @cruunnerr
        last edited by Jan 7, 2018, 9:54 PM

        @cruunnerr said in Changing the length of the line under the header:

        Maybe i simply shouldn’t install every module i find ^^

        That’s exactly my point. Headers take up space. 3 or 4 headers take up the space of a small module.

        Create a working config
        How to add modules

        1 Reply Last reply Reply Quote 1
        • D Offline
          doubleT Module Developer
          last edited by doubleT Jan 7, 2018, 10:19 PM Jan 7, 2018, 10:18 PM

          @cruunnerr said in Changing the length of the line under the header:

          Was just hoping there is an amazing trick to use the custom.css for exactly my problem XD

          There are a lot of amazing tricks. You can do this in custom.css:

          header {
              border-bottom: none; /* instead of 1px solid #666; to remove all lines from all the headers */
              width: 50%;          /* add this to change the width of all module headers */
          }
          .middle header {
              /* addressing the header like this will only influence headers within the middle region */
          }
          #module_3_calendar header {
              /* only addresses the calendar header (find out the modules id before) */
          }
          .shoppinglist header {
              /* or use the class, which should be the module's name */
          }
          
          1 Reply Last reply Reply Quote 5
          • C Offline
            cruunnerr
            last edited by cruunnerr Jan 8, 2018, 4:57 PM Jan 8, 2018, 4:46 PM

            That looks great !!!
            Will try that later. Thank u very much dude :P

            edit:

            .left header {
                border-bottom: none;
            }
            

            THAT WORKS EXACTLY LIKE I WANT! Great :)

            1 Reply Last reply Reply Quote 1
            • M Offline
              MadScientist
              last edited by Jan 17, 2018, 5:58 PM

              I have the same problem with the MMM-temp-ds18b20 module. I would like to remove the header and the underlying line but can’t get it to work. I am really lost as I have no idea how the css stuff works. Can you post your custom.css file and not just the very lines you changed? Is there a good guide for dummies (!!!)?

              1 Reply Last reply Reply Quote 0
              • D Offline
                doubleT Module Developer
                last edited by doubleT Jan 17, 2018, 8:39 PM Jan 17, 2018, 6:01 PM

                In the config.js, when setting up the modules, leave the header fields empty. No line is shown when the header is empty.
                EDIT:
                header: "", that is …

                M 1 Reply Last reply Jan 14, 2020, 5:28 PM Reply Quote 0
                • M Offline
                  MadScientist
                  last edited by Jan 17, 2018, 6:05 PM

                  I tried that already. But instead of no header I get “undefined” as a header.

                  1 Reply Last reply Reply Quote 0
                  • D Offline
                    doubleT Module Developer
                    last edited by doubleT Jan 17, 2018, 8:40 PM Jan 17, 2018, 6:35 PM

                    What I ment with hempty header was an empty string value for the header:

                        header: "", 
                    
                    1 Reply Last reply Reply Quote 1
                    • M Offline
                      MadScientist
                      last edited by MadScientist Jan 18, 2018, 9:14 AM Jan 18, 2018, 9:06 AM

                      Ok, tried that but it said "undefined with the underline. I had previously removed the label for the senor. So setting

                      header: "",
                      

                      and

                      label: "",
                      

                      AND changing from x-stack to y-stack

                      displayMode: 'y-stack',
                      

                      did the trick. Thanks for your help.

                      Is there a good place to learn about CSS? I tried figuring it out on my own but I just don’t understand how it’s done.

                      N 1 Reply Last reply Jan 19, 2018, 3:16 AM Reply Quote 0
                      • 1
                      • 2
                      • 1 / 2
                      • 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