• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.1k 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 Sep 6, 2022, 5:31 PM Sep 6, 2022, 5:30 PM

    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 Sep 6, 2022, 5:38 PM Reply Quote 0
    • S Away
      sdetweil @justdreambig
      last edited by Sep 6, 2022, 5:38 PM

      @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 Sep 6, 2022, 5:41 PM Reply Quote 0
      • J Offline
        justdreambig @sdetweil
        last edited by Sep 6, 2022, 5:41 PM

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

        S 1 Reply Last reply Sep 6, 2022, 5:48 PM Reply Quote 0
        • S Away
          sdetweil @justdreambig
          last edited by sdetweil Sep 6, 2022, 5:51 PM Sep 6, 2022, 5:48 PM

          @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 Sep 6, 2022, 6:06 PM Reply Quote 0
          • J Offline
            justdreambig @sdetweil
            last edited by Sep 6, 2022, 6:06 PM

            @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 Sep 6, 2022, 6:13 PM Reply Quote 1
            • S Away
              sdetweil @justdreambig
              last edited by Sep 6, 2022, 6:13 PM

              @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 Sep 6, 2022, 6:15 PM Reply Quote 0
              • J Offline
                justdreambig @sdetweil
                last edited by Sep 6, 2022, 6:15 PM

                @sdetweil I will check it out… Thanks!

                K 1 Reply Last reply Sep 7, 2022, 10:49 PM Reply Quote 0
                • K Offline
                  karsten13 @justdreambig
                  last edited by Sep 7, 2022, 10:49 PM

                  @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
                  1 / 1
                  • First post
                    4/8
                    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