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.

    Docker and custom.css

    Scheduled Pinned Locked Moved Custom CSS
    11 Posts 2 Posters 4.4k Views 2 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.
    • T Offline
      technofab
      last edited by

      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.

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

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

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • T Offline
          technofab
          last edited by

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

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

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

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            1 Reply Last reply Reply Quote 0
            • T Offline
              technofab
              last edited by

              This post is deleted!
              S 1 Reply Last reply Reply Quote 0
              • S Away
                sdetweil @technofab
                last edited by

                @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

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                1 Reply Last reply Reply Quote 1
                • T Offline
                  technofab
                  last edited by

                  Thanks and merry Christmas

                  1 Reply Last reply Reply Quote 0
                  • T Offline
                    technofab
                    last edited by

                    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?

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

                      @technofab

                      well, two things

                      1. do not use ‘.module’ in front of the module name
                      2. 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'
                        }
                      

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

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

                        @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

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        T 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • 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