Custom CSS

[rxlDavid]

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…

[Mykle1]

@rxlDavid

Use these. Adjust to your liking:

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

[sdetweil]

@Mykle1 qwouldn’t both those also need

position: absolute

as the default is

position:relative?

[Mykle1]

@sdetweil

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

[rxlDavid]

@sdetweil where do I need to change that?

[sdetweil]

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

[Mykle1]

@sdetweil

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

[sdetweil]

@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