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.

    Module Border Removal Issue

    Scheduled Pinned Locked Moved Solved Custom CSS
    14 Posts 3 Posters 3.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.
    • M Offline
      matt216
      last edited by

      Thanks for your help.
      For more context there are two different commute/traffic modules (I’m testing out the accuracy of the two side-by-side) - MMM-MyCommute and then MMM-Traffic.

      I have set border-bottom: none addressing header to address the page as a whole, yes. I do not want any of the modules to display the separating line between them.

      The module MMM-MyCommute is the one with the border-bottom showing. Thanks for the dev tools tip - I can see the page loading:

      .MMM-MyCommute .row {
        position: relative;
        padding: 1px;
        border-bottom: solid 1px #222;
        min-height: 35px;
        min-width: 390px;
      }
      

      However if I put the following in custom.css it doesn’t change anything…

      .MMM-MyCommute .row     {
              border_bottom: 0;
      }
      
      

      Thanks again

      S 1 Reply Last reply Reply Quote 0
      • S Offline
        sdetweil @matt216
        last edited by sdetweil

        @matt216 its

        none	Specifies no border. This is default
        

        border-bottom:none;

        you should be able to provide that in the dev window,

        top right window type border-bottom and none
        hit enter

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • M Offline
          matt216
          last edited by matt216

          Got it!

          I had border_bottom in the custom.css whereas I need border-bottom … classic typo.

          Interesting I need the line specifically calling out that class. The header address which sorts the rest of the page doesn’t seem to apply to the MMM-MyCommute module.

          Thanks for recommending browser dev tools - helped me identify the class.

          Matt

          S 1 Reply Last reply Reply Quote 1
          • S Offline
            sdetweil @matt216
            last edited by

            @matt216 said in Module Border Removal Issue:

            Thanks for recommending browser dev tools - helped me identify the class.

            yes, and it really eliminates the ‘try this, nope, try this, nope… loop’

            AND if u set the style in that upper right window that does what you want,
            you can swipe select them all and copy /paste them into your css entry

            (whose name would be listed at the bottom of the middle panel)

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            M 1 Reply Last reply Reply Quote 0
            • M Offline
              matt216 @sdetweil
              last edited by

              @sdetweil said in Module Border Removal Issue:

              yes, and it really eliminates the ‘try this, nope, try this, nope… loop’

              Doesn’t it! Waiting for pm2 restart mm each time was driving me nuts!

              S 1 Reply Last reply Reply Quote 0
              • S Offline
                sdetweil @matt216
                last edited by sdetweil

                @matt216 said in Module Border Removal Issue:

                Waiting for pm2 restart mm each time was driving me nuts

                you don’t have to do a full restart,

                change custom.css and hit f5 in the dev window, or ctrl-r on the MM side

                so the cycle

                start MM, npm start dev
                or ctrl-shift-i if already running

                use the elements tab to locate the html entry, which will expand the css class tree on the right
                select the element u want to change (select pointer to left of elements page

                edit the styles, upper right to get the effect u want

                select/copy
                alt-spacebar, n to minimise MM window

                use your editor to add/change entry custom.css
                using class name found in dev window
                paste

                save
                click on taskbar mm entry to resurface page
                ctrl-r or f5 to refresh page, reloading custom.css

                check results…

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                ankonaskiff17A 1 Reply Last reply Reply Quote 0
                • ankonaskiff17A Offline
                  ankonaskiff17 @sdetweil
                  last edited by

                  @sdetweil This a follow-on question regarding developer tools while MM running. If you have a module that is updating at a rapid pace it gets to be a real challenge trying to drill down to the lines you want to look at because at each cycle it will close all the expanded subsections. Is there a way to stop that other than setting a large update value?
                  Seems like it was either stock ticker or news ticker were culprits as rest of modules like calendar you can update every 12 hours or so.

                  S 1 Reply Last reply Reply Quote 0
                  • S Offline
                    sdetweil @ankonaskiff17
                    last edited by

                    @ankonaskiff17 no, they recreate the output every time, so you have to slow them down…

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