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

Custom CSS

Scheduled Pinned Locked Moved Troubleshooting
8 Posts 3 Posters 1.2k 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.
  • S Offline
    sdetweil @Mykle1
    last edited by sdetweil Apr 30, 2020, 2:37 PM Apr 30, 2020, 2:36 PM

    @Mykle1 qwouldn’t both those also need

    position: absolute
    

    as the default is

    position:relative?
    

    Sam

    How to add modules

    learning how to use browser developers window for css changes

    M R 2 Replies Last reply Apr 30, 2020, 2:38 PM Reply Quote 0
    • M Offline
      Mykle1 Project Sponsor Module Developer @sdetweil
      last edited by Apr 30, 2020, 2:38 PM

      @sdetweil

      I don’t know. I’m still guessing at this stuff. :-)

      Create a working config
      How to add modules

      S 1 Reply Last reply Apr 30, 2020, 2:46 PM Reply Quote 0
      • R Offline
        rxlDavid @sdetweil
        last edited by Apr 30, 2020, 2:45 PM

        @sdetweil where do I need to change that?

        S 1 Reply Last reply Apr 30, 2020, 2:51 PM Reply Quote 0
        • S Offline
          sdetweil @Mykle1
          last edited by Apr 30, 2020, 2:46 PM

          @Mykle1 magicMirror has a bunch of regions, containers of content, with defined positions.

          the browser doesn’t KNOW anything about MM design, its just html and css. just like a normal page

          so if u add content in a ‘position’, MM inserts the modules content (returned from getDom()) into the specific physical region… you would EXPECT the content to be positioned there… so relative to the container.

          if the user said top_right, and for whatever reason, the module developer wanted it to be top_left, by the time the module startup gets called, its too late, MM will put whatever content into the config.js ‘position’ container

          now, you have to tell the browser, no, not THERE… but HERE… position me where I tell you, in absolute coordinates… if u don’t SAY absolute, the your adjustments (x/y, width/height) are relative to the container the content is in

          this will lead to some crazy results…

          module x is in the uppoer right, but you firced YOUR module to the upper right, and well, you will get what you get… some overlay, some intermixed…

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          M 1 Reply Last reply Apr 30, 2020, 2:48 PM Reply Quote 0
          • M Offline
            Mykle1 Project Sponsor Module Developer @sdetweil
            last edited by Apr 30, 2020, 2:48 PM

            @sdetweil

            Thanks for the info. The entry I posted has always worked for me. Go figure.

            Create a working config
            How to add modules

            1 Reply Last reply Reply Quote 0
            • S Offline
              sdetweil @rxlDavid
              last edited by Apr 30, 2020, 2:51 PM

              @rxlDavid your proposed css class

              .MMM-Mail{
                position:absolute;
                left : 100px;
                top: 500px;
              }
              

              u also had syntax errors, spaces between number and px,
              each standalone item ends with ; not comma ,

              u can open the developers window, f12 or ctrl-shift-i on the keyboard) (and can open a browser on the page from your desktop and do the debug there), ’
              select the elements tab, and navigate thru the position area to find you module content, and click on an element and the dev window will show you the css class hierarchy (bottom at top of page). etc…

              u can fix the css file, and then refresh the page to examine the differences… repeat til you get what you want

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • 1 / 1
              1 / 1
              • First post
                7/8
                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