<![CDATA[is custom.css only for default modules?]]>Hey - n00b question,

I’ve tried doing calling modules such as MMM-MoonPhase to position them exactly and create custom backgrounds for that specific module through custom.css but I can’t get it working… Should I be editing only the modules CSS file?

The position and the background are probably separate issues to tackle right?

.module.MMM-MoonPhase {
  position: absolute;
  left : 400px;
  top : 100px;
 background: #545454;
}
]]>https://forum.magicmirror.builders/topic/13610/is-custom-css-only-for-default-modulesRSS for NodeSun, 08 Mar 2026 20:47:25 GMTSun, 06 Sep 2020 13:30:40 GMT60<![CDATA[Reply to is custom.css only for default modules? on Tue, 13 Oct 2020 20:31:41 GMT]]>@ShuraimHassan said in is custom.css only for default modules?:

could you show me an Example that how Can I do this?

do what? make a module, add a css style to an element?

I don’t know ‘responsive’. currently main.css is in pixels for 1920x1080.

I have a version I converted to vh/vw.

3rd party. mm supplies font_awesome.
(see the fonts folder)
other than that every module can use whatever they want. no restrictions.

]]>https://forum.magicmirror.builders/post/83296https://forum.magicmirror.builders/post/83296Tue, 13 Oct 2020 20:31:41 GMT<![CDATA[Reply to is custom.css only for default modules? on Tue, 13 Oct 2020 18:40:28 GMT]]>@ShuraimHassan see this
https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works?_=1602611995137

]]>https://forum.magicmirror.builders/post/83289https://forum.magicmirror.builders/post/83289Tue, 13 Oct 2020 18:40:28 GMT<![CDATA[Reply to is custom.css only for default modules? on Tue, 13 Oct 2020 17:57:58 GMT]]>Actually I want to resize of all 3rd party components and Make Responsive of all types of Devices as like Mobile , Tablet , Laptop , PC ETC. . .

]]>https://forum.magicmirror.builders/post/83288https://forum.magicmirror.builders/post/83288Tue, 13 Oct 2020 17:57:58 GMT<![CDATA[Reply to is custom.css only for default modules? on Tue, 13 Oct 2020 17:55:31 GMT]]>@sdetweil could you show me an Example that how Can I do this? Thanks in Advance

]]>https://forum.magicmirror.builders/post/83287https://forum.magicmirror.builders/post/83287Tue, 13 Oct 2020 17:55:31 GMT<![CDATA[Reply to is custom.css only for default modules? on Mon, 12 Oct 2020 20:09:28 GMT]]>@ShuraimHassan each module provides a block of html in a div wrapper.
the MM runtime positions the block of content where u configured it. (see index.html for the layout)

you can also use javascript api calls to create the content that is returned to MM on the getDom() routine.

i would say probably >95% of the MM implementations are output only … (as its a ‘mirror’ hanging on the wall, probably 95% of the other 5% are voice based

as many are behind shaded glass, the cool color front ends don’t display well, and aren’t particularly helpful to this kind of environment… …

]]>https://forum.magicmirror.builders/post/83249https://forum.magicmirror.builders/post/83249Mon, 12 Oct 2020 20:09:28 GMT<![CDATA[Reply to is custom.css only for default modules? on Mon, 12 Oct 2020 20:03:24 GMT]]>@ShuraimHassan but like anything else, u install it

https://getbootstrap.com/

and for those modules that expose their icon usage, you either change the config or use css to override.

each module gets to do its own thing, so u have to fiddle with each one separately…

most use font-awesome icons…

]]>https://forum.magicmirror.builders/post/83248https://forum.magicmirror.builders/post/83248Mon, 12 Oct 2020 20:03:24 GMT<![CDATA[Reply to is custom.css only for default modules? on Mon, 12 Oct 2020 20:01:53 GMT]]>@sdetweil Bootstrap is a potent front-end framework used to create modern websites and web apps. It’s open-source and free to use, yet features numerous HTML and CSS templates for UI interface elements such as buttons and forms. Bootstrap also supports JavaScript extensions.

]]>https://forum.magicmirror.builders/post/83247https://forum.magicmirror.builders/post/83247Mon, 12 Oct 2020 20:01:53 GMT<![CDATA[Reply to is custom.css only for default modules? on Mon, 12 Oct 2020 20:00:01 GMT]]>@ShuraimHassan no…

]]>https://forum.magicmirror.builders/post/83246https://forum.magicmirror.builders/post/83246Mon, 12 Oct 2020 20:00:01 GMT<![CDATA[Reply to is custom.css only for default modules? on Mon, 12 Oct 2020 19:59:58 GMT]]>@sdetweil What do you mean? Are you not Front end or Full stack Developer??

]]>https://forum.magicmirror.builders/post/83245https://forum.magicmirror.builders/post/83245Mon, 12 Oct 2020 19:59:58 GMT<![CDATA[Reply to is custom.css only for default modules? on Mon, 12 Oct 2020 19:57:46 GMT]]>@ShuraimHassan what is bootstrap?

]]>https://forum.magicmirror.builders/post/83244https://forum.magicmirror.builders/post/83244Mon, 12 Oct 2020 19:57:46 GMT<![CDATA[Reply to is custom.css only for default modules? on Mon, 12 Oct 2020 19:57:16 GMT]]>@sdetweil How can I use Bootstrap on 3rd Party Modules??

]]>https://forum.magicmirror.builders/post/83243https://forum.magicmirror.builders/post/83243Mon, 12 Oct 2020 19:57:16 GMT<![CDATA[Reply to is custom.css only for default modules? on Sun, 06 Sep 2020 13:46:57 GMT]]>@cluelesscarter only edit the custom.css

custom.css is for everything. last stylesheet loaded so it can override anything before it

remove the .module

should start with the full module name

]]>https://forum.magicmirror.builders/post/81386https://forum.magicmirror.builders/post/81386Sun, 06 Sep 2020 13:46:57 GMT