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.

    MagicMirror: Changing font colors

    Scheduled Pinned Locked Moved Custom CSS
    11 Posts 6 Posters 16.9k Views 5 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.
    • A Offline
      AliAS
      last edited by

      I am extremely new to all this (close to zero programming experience, learning quickly though). Wondering if that example is written correctly, specifically the space in between .clock and .time? I tried this example and loaded the mirror and nothing happened. Do i need to reboot or implement a specific command for it to load the custom css script?

      P.s. I’ve already read a lot of great tips and suggestions for troubleshooting to get where I am now and i just wanted to say what a great group of people I see participating in this forum.

      A 1 Reply Last reply Reply Quote 0
      • A Offline
        AliAS @AliAS
        last edited by

        After checking the structure of the main.css file I see that it is indeed correct. Any other reason why it isn’t working would still be helpful though:)

        Mykle1M 1 Reply Last reply Reply Quote 0
        • Mykle1M Offline
          Mykle1 Project Sponsor Module Developer @AliAS
          last edited by

          @AliAS

          The above example does work. It can even be shortened, as such.

          .clock .time {
            color: yellow;  /*#82bae5;  nice, light blue colour */
          }
          
          
          .calendar {
            width: 300px;
          }
          
          html {
          	cursor: default;
          }
          

          Just to confirm. These are being added to your custom.css file (and saved). And that file resides within the css folder.

          Create a working config
          How to add modules

          Y 1 Reply Last reply Reply Quote 2
          • D Offline
            doubleT Module Developer
            last edited by

            Check my answer to that exact same question here, learning css, to learn a bit about addressing elements in css.

            Basically, .module.clock addresses the element with both classes .module and .clock. And .module.clock .time addresses the element with the class .time sitting inside that element with both classes .module and .clock.

            You don’t have to restart the Pi, not even the MM app, for some css changes. A refresh should do it. I don’t know why it shouldn’t work if you got the correct file css/custom.css and copied that exact code from j.e.f.f.

            1 Reply Last reply Reply Quote 1
            • A Offline
              AliAS
              last edited by

              Thanks to both of you for the quick replys. As I said, I’m very new but learning quickly. After seeing Mykel’s post (sorry if I’m spelling that incorrectly as I cannot see the post while typing a reply on my android) I reopened the custom.css file and noticed I made a syntax error. I replaced the colon after yellow with a semicolon and I was good to go.

              part do?

              Mykle1M 1 Reply Last reply Reply Quote 1
              • D Offline
                doubleT Module Developer
                last edited by

                It’s body {}, it addresses the whole html body (everything) and is empty in this case. It’s probably just an example.

                1 Reply Last reply Reply Quote 1
                • A Offline
                  AliAS
                  last edited by

                  Thanks for the clarification DoubleT. Again, im typing from my phone so those brackets are not available, but you did get my reference.

                  1 Reply Last reply Reply Quote 0
                  • Mykle1M Offline
                    Mykle1 Project Sponsor Module Developer @AliAS
                    last edited by

                    @AliAS said in MagicMirror: Changing font colors:

                    I made a syntax error.

                    Yeah, I hate when that happens. :-)

                    Create a working config
                    How to add modules

                    1 Reply Last reply Reply Quote 2
                    • Y Offline
                      ycwyxeeh @Mykle1
                      last edited by

                      This post is deleted!
                      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