MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Error on loading .css

    Scheduled Pinned Locked Moved Custom CSS
    9 Posts 3 Posters 454 Views 3 Watching
    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.
    • S Offline
      sdetweil @bdeelman
      last edited by sdetweil

      @bdeelman can you look on the docker host

      ls magicmirror/mounts/css  -laF
      

      i see this

      -rwxrwxrwx  1 1000  1000     0 Jan 16 08:38 custom.css*
      -rwxrwxrwx  1 1000  1000   757 Jul  6 02:00 custom.css.sample*
      -rwxr-xr-x  1 1000  1000   161 Jul  6 02:00 font-awesome.css*
      -rwxrwxrwx  1 1000  1000  3985 Jul  6 02:00 main.css*
      -rwxr-xr-x  1 1000  1000 26965 Jul  6 02:00 roboto.css*
      

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      1 Reply Last reply Reply Quote 0
      • karsten13K Offline
        karsten13 @bdeelman
        last edited by

        @bdeelman

        show us your setup. How did you start the container? If with the provided setup goto the magicmirror/run dir and show the output of docker compose config and output of cat .env, if with a docker run ... command show the full command.

        I suspect you are using an outdated setup which mounts the whole css dir instead only custom.css file, I changed this a few months ago …

        S bdeelmanB 2 Replies Last reply Reply Quote 0
        • S Offline
          sdetweil @karsten13
          last edited by

          @karsten13 said in Error on loading .css:

          I suspect you are using an outdated setup which mounts the whole css dir instead only custom.css file, I changed this a few months ago …

          I’m sorry, I don’t understand your words here
          we should expose the folder for users that want/need to load other font libraries

          this is my docker compose config output

          magicmirror:
              container_name: mm
              environment:
                HOST_HOSTNAME: ds-data
                MM_CUSTOMCSS_FILE: css/custom.css
                MM_MODULES_DIR: modules
                MM_OVERRIDE_CSS: "true"
                MM_OVERRIDE_DEFAULT_MODULES: "true"
                MM_SCENARIO: server
                MM_SHOW_CURSOR: "false"
              image: karsten13/magicmirror:latest
              networks:
                default: null
              ports:
                - mode: ingress
                  target: 8080
                  published: "8080"
                  protocol: tcp
                - mode: ingress
                  target: 9000
                  published: "9000"
                  protocol: tcp
              restart: unless-stopped
              volumes:
                - type: bind
                  source: /var/services/homes/sam/magicmirror/mounts/config
                  target: /opt/magic_mirror/config
                  bind:
                    create_host_path: true
                - type: bind
                  source: /var/services/homes/sam/magicmirror/mounts/modules
                  target: /opt/magic_mirror/modules
                  bind:
                    create_host_path: true
                - type: bind
                  source: /var/services/homes/sam/magicmirror/mounts/css
                  target: /opt/magic_mirror/css
                  bind:
                    create_host_path: true
          

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          karsten13K 1 Reply Last reply Reply Quote 0
          • karsten13K Offline
            karsten13 @sdetweil
            last edited by

            @sdetweil

            I changed the setup for css to

                  - type: bind
                    source: /var/services/homes/sam/magicmirror/mounts/css/custom.css
                    target: /opt/magic_mirror/css/custom.css
                    bind:
                      create_host_path: true
            

            It was a design mistake in the beginning to mount the whole folder instead the single file.

            This is maybe not backward compatibel for all old setups.

            1 Reply Last reply Reply Quote 0
            • bdeelmanB Offline
              bdeelman @karsten13
              last edited by sdetweil

              Hi,

              Thanks for your reply.

              I use portainer and Watchtower to automatic upgrade the Docker image. This is the stack I use:

              version: '3'
              
              services:
                magicmirror:
                  container_name: magicmirror-1
                  image: karsten13/magicmirror:latest
                  cap_add:
                    - NET_ADMIN
                    - NET_RAW
                  network_mode: deellan 
                  ports:
                    - "4885:8080"
                  volumes:
                    - /volume2/docker/magicmirror-1/config:/opt/magic_mirror/config
                    - /volume2/docker/magicmirror-1/modules:/opt/magic_mirror/modules
                    - /volume2/docker/magicmirror-1/css:/opt/magic_mirror/css
                  restart: unless-stopped
                  command: 
                    - npm
                    - run
                    - server
              
              karsten13K 1 Reply Last reply Reply Quote 0
              • karsten13K Offline
                karsten13 @bdeelman
                last edited by

                @bdeelman said in Error on loading .css:

                • /volume2/docker/magicmirror-1/css:/opt/magic_mirror/css

                then try it with changing the above line to

                - /volume2/docker/magicmirror-1/css/custom.css:/opt/magic_mirror/css/custom.css
                
                bdeelmanB 1 Reply Last reply Reply Quote 0
                • bdeelmanB Offline
                  bdeelman @karsten13
                  last edited by

                  @karsten13

                  That did the trick! Thanks.

                  KR,
                  Bert

                  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 Sam, technical setup by Karsten.
                  This forum is using NodeBB as its core | Contributors
                  Contact | Privacy Policy