Calendar Doesn't Honor custom.css for Background

ember1205

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

sdetweil

@ember1205

hm…

.calendar .title {
    color: blue;
}

works for me
from the readme

| `titleClass`          | Add a class to the title's cell.
| `timeClass`           | Add a class to the time's cell.

one not documented is the ‘symbolClass’

sdetweil

@ember1205 part of the other problem is calendar doesn’t have a cohesive background element… it has table rows of elements…

but there is a tableClass setting, which you can use in config.js to force a particular class
but you HAVE to do this, else no special class is applied