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.

    Sachin's Mirror

    Scheduled Pinned Locked Moved Show your Mirror
    30 Posts 5 Posters 27.4k Views 7 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.
    • KirAsh4K Offline
      KirAsh4 Moderator
      last edited by

      Nothing’s ever “wasted”. You learned a lot during that time … educational enrichment. :)

      A Life? Cool! Where can I download one of those from?

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

        @KirAsh4
        Now I have question that is probably painfully obvious to anyone but me (I’m an old physicist and drive around in SQL all day long – don’t ask; I have no idea about hardcoding CSS.)

        IF I want to change the font of, say, the compliments,
        THEN I poke around and see that part of compliments.js

            var compliment = document.createTextNode(complimentText);
            var wrapper = document.createElement("div");
            wrapper.className = "thin xlarge bright";
        

        Cool: I could redefine, say, xlarge in my custom.css. But that seems a silly hack, and I’d mess up everything else that also uses xlarge. Not good. Much better to change the color of compliments only. How do I do that? Say I want

        compliments
        .color: #3CF
        .font-size: 80px
        .line-height: 80px
        .font.family: "Ariel"
        

        I suspect that this is very obvious how to change my custom.css, but you guys all seem helpful :)
        Hey: I already figured out how to push things around on the screen to where I want them to be. Next, I have to stretch everything, since the fonts seem a bit compressed. Lots of fun. Ultimately I’ll write my own modules, I hope.

        Thanks in advance!

        Wilco89W 2 Replies Last reply Reply Quote 0
        • Wilco89W Offline
          Wilco89 @amanzimdwini
          last edited by

          @amanzimdwini, open Magic Mirror in a browser yourip:8080,

          Right click (inspect element) and look for the right class name (that is the one to use).

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

            @Wilco89
            Thanks. Am an old male - need EXPLICIT instructions :)

            1 Reply Last reply Reply Quote 0
            • Wilco89W Offline
              Wilco89 @amanzimdwini
              last edited by Wilco89

              @amanzimdwini
              Css should like this:

              .compliments{
              color: #3CF,
              Etc: 80px,
              etc: 80px,
              fontfamily: Ariel,}

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

                @Wilco89
                WOAH - I was really close. (and I was just guessing!). (looking at inspect elements gave me a headache)
                Thanks! I;ll try it right now

                1 Reply Last reply Reply Quote 0
                • KirAsh4K Offline
                  KirAsh4 Moderator
                  last edited by KirAsh4

                  You can be very specific which tag you are trying to change, even if it’s one that is used everywhere. For example, let’s say I want to change the CSS for 'bright'. Just about all the modules use that tag, so if I change it, it’s going to affect all of them. But what if I want to only affect the calendar module? You can use the DOM tree to your advantage. If you look at the elements tree you should see something similar to this:

                  <div class="region top left">
                    <div class="container">
                      <div id="module_1_clock" class="module clock clock">...</div>   <== this pertains to the clock only
                      <div id="module_2_calendar" class="module calendar calendar">   <== this pertains to the calendar only
                        <div class="module-content">
                          < --some random tag that uses the class 'bright' in here-- >
                        </div>
                      </div>
                    </div>
                  </div>
                  

                  Now I can see that the 'bright' tag that I want to change, has several parent tags above it. Since I only want to affect the calendar one, I can then create a CSS rule that says:

                  .module.calendar .bright {
                    color: #ff0000;
                  }
                  

                  This says, to specifically look for the element that has the "module calendar" class, then within that, look for anything that uses the class "bright".

                  Now only my calendar is affected (and shows red text). Now just for grins, remove the first part, and just make it

                  .bright {
                    color: #ff0000;
                  }
                  

                  And you’ll notice all of your text is now red. By adding the specific parent class or ID, you can be very specific which class you’re targeting.

                  Happy hacking!

                  A Life? Cool! Where can I download one of those from?

                  Wilco89W A 2 Replies Last reply Reply Quote 0
                  • Wilco89W Offline
                    Wilco89 @KirAsh4
                    last edited by

                    @KirAsh4 thnx, i’m on my phone so really hard to type Long text.

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

                      @KirAsh4 @Wilco89
                      I really appreciate the help (and it works!)

                      While I’m at it: just so that I understand: since compliments.js references thin xlarge bright I could have changed any of those three? They were referenced, so I can overwrite them? Ie in my custom.css:

                      .module.compliments.bright {
                        color: #ff0000;
                      }
                      

                      or

                      .module.compliments.xlarge{
                        color: #ff0000;
                      }
                      

                      would/should both in effect do the same thing?

                      Or can I just change EVERYTHING in compliments to be color: #ff0000? ie

                      .module.compliments{
                        color: #ff0000;
                      }
                      

                      (which I tried, and it did not work :( )

                      Wilco89W 1 Reply Last reply Reply Quote 0
                      • KirAsh4K Offline
                        KirAsh4 Moderator
                        last edited by

                        You’re missing the required space. You’re dealing with two separate tags, with multiple CSS rules applied. So when creating a new rule, you have to do the same:

                        .module.compliments .xlarge  <--- notice the space
                        

                        Without the space, it’s looking for a single tag that has all three rules applied, so it’s looking for class="module compliments xlarge". When you add the space, it’s now looking for two separate tags, a parent tag that has a class with both "module compliments" as rules, and then a child tag that has a class with "xlarge" for a rule.

                        Does that make sense?

                        A Life? Cool! Where can I download one of those from?

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