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.

    Mirror not using my custom.css

    Scheduled Pinned Locked Moved Custom CSS
    8 Posts 3 Posters 1.3k Views 4 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.
    • J Offline
      justdreambig
      last edited by justdreambig

      So I have been working on this for a while and tried to google all the stuff and it got me really far but I am stuck on what i like to call the final yard…

      I am trying to change the font weight on .mmm-homeassistant-sensors . The module is running correctly but I can’t seem to get the mirror to see my custom changes.

      What I am working with:
      Synolgy NAS - Docker
      Image - bastilimbach/docker-magicmirror

      Here is what I have done so far: (Thank you to the forums for this)

      1. created a custom.css file and mounted the file with docker compose
      2. Checked the custom.css with docker exec cat and it returns what is in my custom.css file so I know it is avaiable to my mirror
      3. rebooted and rebuilt the container many times

      I inspeced the module with Chrome and it only shows main.css as the source so The only thing I can think of is my code is wrong. I tried reading the CSS 101 - Getting started with CSS and understanding how CSS works but man my head is spinning. Below is my code

      .mmm-homeassistant-sensors {
          font-weight:bold;
      
        }
      

      Any help is appreciated… Thanks

      homeassistantsensors.jpg

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

        @justdreambig the module name is MMM-homeassistant-senaors

        case matters

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        J 1 Reply Last reply Reply Quote 0
        • J Offline
          justdreambig @sdetweil
          last edited by

          @sdetweil Thanks for your reply… I made the change and it didn’t work.

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

            @justdreambig ok, the open the developers window ctrl-shift-i , select the console tab and look thru the contents for a red error loading custom.css, unknown file type

            means didn’t find it in the correct location

            u can also examine the content element, select the elements tab, and the pointer top left of the dev window. navigate to the specific content element in the mm window, and click.

            the css tree is shown on right. if your css is used but not effective it will have a strike thru

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            J 1 Reply Last reply Reply Quote 0
            • J Offline
              justdreambig @sdetweil
              last edited by

              @sdetweil Oh man great directions… I made some tweaks to my code and I can now see that the browser is using the custom.css and it is working.

              Thanks for teaching me something new.

              S 1 Reply Last reply Reply Quote 1
              • S Offline
                sdetweil @justdreambig
                last edited by

                @justdreambig see this for more

                https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1662487961519

                Sam

                How to add modules

                learning how to use browser developers window for css changes

                J 1 Reply Last reply Reply Quote 0
                • J Offline
                  justdreambig @sdetweil
                  last edited by

                  @sdetweil I will check it out… Thanks!

                  karsten13K 1 Reply Last reply Reply Quote 0
                  • karsten13K Online
                    karsten13 @justdreambig
                    last edited by

                    @justdreambig

                    Image - bastilimbach/docker-magicmirror

                    This docker image is not maintained anymore so you are using an old version of mm (the image was last updated 15 month ago).

                    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