MagicMirror² v2.12.0 is available! For more information about this release, check out this topic.

Sachin's Mirror



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



  • @Wilco89
    Thanks. Am an old male - need EXPLICIT instructions 🙂



  • @amanzimdwini
    Css should like this:

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



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


  • Moderator

    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>
      <div>
        <div>...</div>      
            < --some random tag that uses the class 'bright' in here-- >
          </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!



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



  • @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 😞 )


  • Moderator

    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  


  • @amanzimdwini

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

    Should work. (Don’t forget the space)



  • @KirAsh4

    THANKS! (major lightbulb).
    Happy 4th to you and @Wilco89


Log in to reply