is custom.css only for default modules?

cluelesscarter

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;
}

sdetweil

@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

ShuraimHassan

@sdetweil How can I use Bootstrap on 3rd Party Modules??

sdetweil

@ShuraimHassan what is bootstrap?

ShuraimHassan

@sdetweil What do you mean? Are you not Front end or Full stack Developer??

sdetweil

@ShuraimHassan no…

ShuraimHassan

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

sdetweil

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

sdetweil

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

ShuraimHassan

@sdetweil could you show me an Example that how Can I do this? Thanks in Advance