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.
    • R Offline
      rxlDavid
      last edited by

      I tried to do my one CSS and move the Modules in custom positions:
      I edited my css to the following:

      .MMM-Mail{
        left : 100 px,
        top: 500 px
      }
      

      But this doesn’t work, it changes nothing…

      Mykle1M 1 Reply Last reply Reply Quote 0
      • Mykle1M Offline
        Mykle1 Project Sponsor Module Developer @rxlDavid
        last edited by

        @rxlDavid

        Use these. Adjust to your liking:

        .MMM-Mail {
          margin-right: 0px;
          margin-left: 0px;
          margin-top: 0px;
          margin-bottom: 0px;
        }
        

        Create a working config
        How to add modules

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

          @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

          Mykle1M R 2 Replies Last reply Reply Quote 0
          • Mykle1M Offline
            Mykle1 Project Sponsor Module Developer @sdetweil
            last edited by

            @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 Reply Quote 0
            • R Offline
              rxlDavid @sdetweil
              last edited by

              @sdetweil where do I need to change that?

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

                @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

                Mykle1M 1 Reply Last reply Reply Quote 0
                • Mykle1M Offline
                  Mykle1 Project Sponsor Module Developer @sdetweil
                  last edited by

                  @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 Away
                    sdetweil @rxlDavid
                    last edited by

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