Not getting custom.css with Docker

[codac]

I’m successfully running bastilimbach’ docker image of magicmirror.
The config is running, the modules are running.

What I cannot achieve to get running is the custom.css file.

I have tried several mounting options:
Folder:

-v /volume1/docker/magicmirror/css:/opt/magic_mirror/css \

File:

-v /volume1/docker/magicmirror/css/custom.css:/opt/magic_mirror/css/custom.css \

Folder to File:

-v /volume1/docker/magicmirror/css:/opt/magic_mirror/css/custom.css \

In all cases the custom.css file wont get used by MagicMirror.
In the Dev-Tools I get the following errors:

Refused to apply style from 'http://192.168.0.23:8036/css/custom.css/' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.               192.168.0.23/:1

and

Error on loading stylesheet: css/custom.css               loader.js:215

If I call the URL http://192.168.0.23:8036/css/main.css, i can see the content of the main.css. If I call the URL http://192.168.0.23:8036/css/custom.css I get an error “Cannot GET /css/custom.css/”

In the /opt/magic_mirror/css/ folder I have the main.css and the custom.css file stored.

The code of my custom.css is:

/*****************************************************
 * Magic Mirror                                      *
 * Custom CSS                                        *
 *                                                   *
 * By Michael Teeuw http://michaelteeuw.nl           *
 * MIT Licensed.                                     *
 *                                                   *
 * Add any custom CSS below.                         *
 * Changes to this files will be ignored by GIT. *
 *****************************************************/

body {
 margin: 10px;
 height: calc(100% - 10px);
 width: calc(100% - 10px);
}

@font-face {
  font-family: SFPro;
  font-style: normal;
  font-weight: normal;
  font-size: 50%;
  letter-spacing: -2px;
  src:
    url("apple_font.woff2") format("woff2"),
    url("apple_font.woff") format("woff");
}

.MMM-Fuel {
    font-family: SFPro;
}

.MMM-Fuel .sortBy {
    margin-left: 0px;
}

.MMM-Fuel .table {
    border-spacing: 0px 0;
}

.MMM-Fuel .centered {
    padding-right: 10px;
    padding-left: 10px;
}

.MMM-Traffic {
    font-family: SFPro;
    line-height: 0;
}

.MMM-Tankerkoenig {
    font-family: SFPro;
}

.MMM-Formula1 {
    font-family: SFPro;
}

.MMM-google-route {
    font-family: SFPro;
    font-size: 100%;
    max-width: 325px;
    line-height: 0;
}

.MMM-google-route table td.small {
    font-size: 100%;
}

.MMM-google-route #title {
    line-height: 1.5em;
}

.MMM-RTSPStream .innerWrapper {
    border: 0px;
    padding-bottom: 10px;
}

.MMM-RMV {
    font-family: SFPro;
}

.MMM-COVID19-AMPEL {
    font-family: SFPro;
}

.MMM-DWD-WarnWeather {
    font-family: SFPro;
}

.MMM-DWD-WarnWeather .warning {
    float: right;
}

.MMM-DWD-WarnWeather .status {
    text-align: right;
}

.MMM-WiFiPassword {
    font-family: SFPro;
    float: right;
    text-align: right;
}

.calendar {
    font-family: SFPro;
    max-width: 475px;
}

.calendar .normal {
    text-align: left;
}

.MMM-soccer .table {
    font-family: SFPro;
    font-size: 64%;
    font-weight: 100;
}

.MMM-soccer .name{
    color: #999;
    font-weight: lighter;
}

.MMM-soccer .centered{
    color: #999;
}

.MMM-soccer .centered {
    color: #fff;
}

.MMM-soccer .icon {
    width: 16px;
    height: 16px;
}

.alert {
    font-family: SFPro;
    max-width: 325px;
}

.clock {
    font-family: SFPro;

}

.compliments {
    font-family: SFPro;
}

.compliments .xlarge {
    font-size: 50px;
    letter-spacing: 0px;
}

.currentweather {
    font-family: SFPro;
}

.newsfeed {
    font-family: SFPro;
}

.updatenotification {
    font-family: SFPro;
    max-width: 325px;
}

.weather {
    font-family: SFPro;
}

.weatherforecast {
    font-family: SFPro;
    display: table;
    margin-left: auto; 
    margin-right: 0;
}

Any idea how to fix this?
@bastilimbach

[sdetweil]

@codac I’m gonna throw a wild guess…

1 check the permissions on the custom.css as compared to main.css

ls -laF in the folder where they are

there are 3 bits each for user, same group as user, and all others

Write, Read, and eXecute
777 is everything for all
600 is read/write for user and nothing for anybody else.

and last crazy guess, is there an accidental space in the name?

[wongfookchoy]

I have the exact same issue too. Custom.css does not seem to work. Checked all permissions in the folder and file itself and they have the same permission settings. Looks like there is some limitation when using Synology Container Manager (Docker).

[sdetweil]

@wongfookchoy if you exec into the container can you see the file and it’s permissions?

[wongfookchoy]

@sdetweil

Hi sir, this is the permission and files in the css folder. I hope I got what you need to know as I am still a junior in this.

[sdetweil]

@wongfookchoy which docker container are you using?

nm

that image is no longer maintained

please go to the doc And follow this link

[wongfookchoy]

@sdetweil Hi, just wanted to update that the new image that is in MM page reference for Docker installation works well now and I can configure the custom css. Thanks.
Sorry took sometime to revert as was busy.