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.

    CSS Help

    Scheduled Pinned Locked Moved Custom CSS
    18 Posts 3 Posters 3.3k 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.
    • BKeyportB Offline
      BKeyport Module Developer
      last edited by

      I’m wanting to get my Top Bar to display modules side-by-side.

      Using devtools, I found that it’s the “container” div, within the top bar div that is blocking it from happening.

      e9bdb76e-c84f-41fd-9583-6fd3e9e4d751-image.png

      Changing that display: block to display:inline-flex does it for me, without effects to modules outside the top bar.

      I can’t figure out how to get to that container in css code, without the use of Devtools. Can someone help?

      here’s what I want to do - This:
      73102098-9d75-4f28-9237-85f2dbdcfd9d-image.png

      to this (minus the debug text, obviously):
      332368df-250e-4cd1-b02b-526975f6e9f6-image.png
      Thanks.

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

      S BKeyportB 2 Replies Last reply Reply Quote 0
      • S Away
        sdetweil @BKeyport
        last edited by

        @BKeyport

            .region.bar.top  div  {
                display:  inline-flex !important;
            }
        

        element override wins over class
        need the !important

        Sam

        How to add modules

        learning how to use browser developers window for css changes

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

          @BKeyport if you override top bar, then EVERYTHING in top gets whacked…

          if you do top _center then only top center gets whacked…

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          BKeyportB 1 Reply Last reply Reply Quote 0
          • BKeyportB Offline
            BKeyport Module Developer @sdetweil
            last edited by

            @sdetweil Yeah, Problem is, I’m using the top bar for that. Top Center is used for other things…

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

            S 1 Reply Last reply Reply Quote 0
            • S Away
              sdetweil @BKeyport
              last edited by sdetweil

              @BKeyport problem is that css selectors are ALL matching

              so that says EVERY div under .region.top.bar

              I tried div: first-child, and altho it SAID the new style was used, it didn’t DO it

              maybe easier in js code (jQuery) vs css

              u can try out the jQuery clauses in the dev window console at the >

              I do this in mmm config to change the styles dynamically.

              I also do the css of my module in newbustimes, using float… starting on line 140 on the modulename.js

              makes multiple instances line up sideways

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              BKeyportB 1 Reply Last reply Reply Quote 0
              • BKeyportB Offline
                BKeyport Module Developer @sdetweil
                last edited by

                @sdetweil Yeah. Having access to the container div would be nice so to restrict it to the true top bar.

                Having all the top locations embedded under each other like that really stinks sometimes.

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

                1 Reply Last reply Reply Quote 0
                • BKeyportB Offline
                  BKeyport Module Developer @BKeyport
                  last edited by

                  As predicted, putting it in broke everything. It’s specifically got to fall into that container under top.bar. :/

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

                  S 1 Reply Last reply Reply Quote 0
                  • S Away
                    sdetweil @BKeyport
                    last edited by

                    @BKeyport so you could use code to fiddle w the styles.

                    https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

                    you want it on .container under region top bar

                    not on top bar itself… else everything will be affected

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    BKeyportB 1 Reply Last reply Reply Quote 0
                    • BKeyportB Offline
                      BKeyport Module Developer @sdetweil
                      last edited by

                      @sdetweil Exactly, I can’t seem to get far enough in custom.css

                      .region.top.bar.container don’t work, etc. The problem seems to be the style is hardcoded, perhaps, but I have no idea where.

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

                      S 1 Reply Last reply Reply Quote 0
                      • S Away
                        sdetweil @BKeyport
                        last edited by

                        @BKeyport when there is no space between classes it means has all

                        but this is split over 2 tags
                        div .region.top.bar
                        div .container

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        BKeyportB 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