Global Background styling

[mpoxberry]

This calendar module is great. It has a lot of flexibility which is very nice.

My MagicMirror isn't build at a mirror. Really it's a calendar and weather station. Saves costs a little bit. The calendar displays with a transparent background. It looks like opacity 0.5 or so. I dived down into styles see if I could set a global background color of black (#00000). That way it looks like it is on top of my background not in my background.

I was able to get the background color on the default clock.

I apologize for the poor quality of the pictures.

[eouia]

You want to make whole module background as black? Try to add this into your ~/MagicMirror/css/custom.css

.CALEXT {
  background-color:#000;
}

[mpoxberry]

I'll give that a try. Initially within that class I tired:

.CALEXT .fa-stack-1x { /*color:#000;* background-color:#000000; }

I'll try your suggestion once I get home. Thanks for the quick response.

[eouia]

.CALEXT .fa-stack-1x is selector of font-awesome icon. So, if you do something in that selector, it will affect only to font-awesome icon. use .CALEXT, the top level of module DOM.

[mpoxberry]

I was weary of messing with creating a .CALEXT in fear that it would overwrite the original one, where it may have been (couldn't find it when I looked).

[eouia]

It is why you should do in ~/MagicMirror/css/custom.css. It is independent from exist legacy CSS files of modules and has higher priority. So you might have no worry to add something in ~/MagicMirror/css/custom.css. If something seems going bad, just remove your addition.

[mpoxberry]

That's exactly what I did to get a black background on the default modules. Figured that class was injected into everything with it being at the root. I created backgroundStyle I'll just copy that and add CALEXT to it.

[mpoxberry]

It worked. Thanks!