Calendar Doesn't Honor custom.css for Background

ember1205

I attempted to add the following to my custom.css:

.module.calendar {
  background-color:rgba(32,32,32,0.6);
  border-radius:8px;
  padding:8px;
}

It did not work as expected, nor as it did for clock, currentweather, or weatherforecast. I had to insert that code into the ~/MagicMirror/modules/default/calendar/calendar.css module as:

.calendar {
  background-color:rgba(32,32,32,0.6);
  border-radius:8px;
  padding:8px;
}

This is the only way it would provide the opaque background that I wanted.

Thoughts?

sdetweil

@ember1205 right. Css for a module is the module name with a leading dot.

Not the world module

ember1205

@sdetweil

In custom.css, this does not work:

.module.calendar {
  background-color:rgba(32,32,32,0.6);
  border-radius:8px;
  padding:8px;
}

Also, in custom.css, this DOES work:

.module.currentweather {
  background-color:rgba(32,32,32,0.6);
  border-radius:8px;
  padding:8px;
}

.module.weatherforecast {
  background-color:rgba(32,32,32,0.6);
  border-radius:8px;
  padding:8px;
}

.module.clock {
  background-color:rgba(32,32,32,0.6);
  border-radius:8px;
  padding:8px;
}

ember1205

@sdetweil What does “not the world module” mean? Just seeing that now, and not following…

sdetweil

@ember1205 like this custom.css

body {
}
.currentweather {
  background-color:rgba(32,32,32,0.6);
  border-radius:8px;
  padding:8px;
}

.weatherforecast {
  background-color:rgba(32,32,32,0.6);
  border-radius:8px;
  padding:8px;
}

.clock {
  background-color:rgba(32,32,32,0.6);
  border-radius:8px;
  padding:8px;
}

you don’t do

.module.clock

sdetweil

@ember1205 and to change the color of the DATE of the digital clock (which uses the date class)

.clock .date {
   color: green;
}

ember1205

@sdetweil

Ok. I will look into making those changes and see if I can get it working the way that I want.

Why does “module.currentweather” work fine, though (along with the others that I mentioned)? CSS has always been a weak spot for me…

sdetweil

@ember1205 said in Calendar Doesn't Honor custom.css for Background:

Why does “module.currentweather” work fine

no idea… css is my weakest skill

ember1205

@sdetweil

Calendar still does not pick up any CSS controls from the main custom.css file. Here is a snippet of what I added:

.calendar {
  background-color:rgba(32,32,32,0.6);
  border-radius:8px;
  padding:8px;
}

I modified the other sections to look like this:

.module.clock {
  background-color:rgba(32,32,32,0.6);
  border-radius:8px;
  padding:8px;
}

.module.currentweather {
  background-color:rgba(32,32,32,0.6);
  border-radius:8px;
  padding:8px;
}

.module.weatherforecast {
  background-color:rgba(32,32,32,0.6);
  border-radius:8px;
  padding:8px;
}

They work fine “either way”. Calendar refuses to pick up the formatting from the custom.css file it seems and I have to put the controls into the calendar.css file in the module’s directory.

sdetweil

@ember1205 hm… custom.css should override everything… it is loaded last