Docker and custom.css

technofab

I’ve a docker installation… where I need to put my custom.css file?
I need to generally downsize the font size a little.

Thanks in advance.

sdetweil

@technofab see the doc(README.md) of the docker container

https://github.com/bastilimbach/docker-MagicMirror

/opt/magic_mirror/css/custom.css	

Mount this file to add your own custom css into the docker container.

Important: You need to create the file before you run the container. Otherwise Docker will create a custom.css folder.

technofab

I did’nt find that path in the container, but I follow the gh container instructions… so? 🤔

sdetweil

@technofab correct, its not IN the container, you need to CREATE a docker mount point at that path

technofab

This post is deleted!

sdetweil

@technofab
docker takes a --volume=source:dest or a --mount src=,dest= to map a local folder/file into the container at a particular file system location

so, as this container wants the custom.css at /opt/magic_mirror/css/custom.css

the parm on docker run would be

--volume=local_path_to_custom_css:/opt/magic_mirror/css/custom.css

notice the : between the source and dest
in a Windows environment where : also appears in driveletter:\path
u must use the --mount type parameter

technofab

Thanks and merry Christmas

technofab

OK I finally put my custom empty file custom.css now: i edit to limit default module calendart in witdh so:

body {
 	
 }

 .module.calendar {
     width:50px;
 }

Stop and restart container but nothing change. What I’m missing?

sdetweil

@technofab

well, two things

do not use ‘.module’ in front of the module name
there is no single style that will set the width…
there are these classes (from the calendar README)

| `symbolClass`         | Add a class to the cell of symbol. default 'symbol'
| `titleClass`          | Add a class to the title's cell.   default 'title'
| `timeClass`           | Add a class to the time's cell. default 'time'
and 
 'tableClass'      which might be usable to contain the overall width, default not specified

in a sample I did this in custom.css

.calendar .title { 
color : blue;
}

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

and in config.js for the calendar module

  config:{ 
     tableClass:'fribble'
  }

sdetweil

@technofab you can also confirm your custom.css is in the right place by doing

docker exec container_id (or name) cat /opt/magic_mirror/css/custom.css

that should match yours