MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.24.0 is available! For more information about this release, check out this topic.

    Not getting custom.css with Docker

    Troubleshooting
    2
    2
    384
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      codac last edited by

      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

      S 1 Reply Last reply Reply Quote 0
      • S
        sdetweil @codac last edited by

        @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?

        Sam

        Create a working config
        How to add modules

        1 Reply Last reply Reply Quote 0
        • 1 / 1
        • First post
          Last post
        Enjoying MagicMirror? Please consider a donation!
        MagicMirror created by Michael Teeuw.
        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
        This forum is using NodeBB as its core | Contributors
        Contact | Privacy Policy