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

[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

[ember1205]

@sdetweil

I found and fixed it (sort of). I had added content to my custom.css file to create a blurred background image as I was experimenting with some display options. I commented that content out (or so I thought) and placed all of these controls “after” that section in the custom.css file.

Through a variety of changes that I was making to try and track this down, I noticed through viewing the Developer options with a real browser and looking at the elements that whatever section came first after my blurred background section wasn’t being picked up. As I rolled the changes down to the bottom, I was seeing different sections stop working.

Seems to be all fixed now, and is clearly not a bug in the product but was a bug in my custom.css content. After deleting the content, all is displaying properly.

[sdetweil]

@ember1205 so, this custom.css works

 body {
 	
 }


.clock .date {
	color: green;
}
.calendar .title { 
color : blue;
}

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

with

 module: "calendar",
config: { 
   tableClass:"fribble"
}

[sdetweil]

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

the Developer options with a real browser

electron is a real browser, so you can do this ON the mirror,
or from your desktop if the config parms allow remote system access.

I always forget that I can use local browser to view developer window

[ember1205]

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

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

the Developer options with a real browser

electron is a real browser, so you can do this ON the mirror,
or from your desktop if the config parms allow remote system access.

I always forget that I can use local browser to view developer window

Now that you mention it, I have used the developer options directly on the appliance and should have remembered that. Thanks for the reminder!