Change heading color



  • Hello,
    I have changed the color of all the regular text on my mirror by using the color argument. What would I need to add to my custom.css to assign a color to all the headers? I’m looking for a simple solution if possible.

    body {
           margin:0px;
           height:100%;
           width: 100%;
           zoom: 110%;
           **color : white ;**
           position : absolute;
    }
    

    Thanks


  • Module Developer

    @d3r said in Change heading color:

    I’m looking for a simple solution if possible.

    I don’t know if you consider this a simple solution, but you could add an entry for each module using the following.

    body {
           margin:0px;
           height:100%;
           width: 100%;
           zoom: 110%;
           **color : white ;**
           position : absolute;
    }
    
    .MMM-Fortune .header {
      color: white;  /* any HEX color will do  */
    }
    

    .MMM-Fortune being the name of your module. One for each module’s header. I wouldn’t know how to do it universally, but you’re only talking about 10? modules. Copy and paste into your custom.css file a few times, change the name for each module, done.



  • @Mykle1 Why bother with individual modules? If you do it for every module, isn’t it the same as simply styling header in general?

    I don’t know if we agree on the term “header”. For me, the following changes the color of the text of every module-headline to green:

    #custom.css
    header {
        color: green;
    }
    

    (Note: .header does not!)


  • Module Developer

    @Anhalter42 said in Change heading color:

    Why bother with individual modules? If you do it for every module, isn’t it the same as simply styling header in general?

    I was just offering what I knew how to do. Thanks for pointing out what I didn’t know how to do. I did say, " I wouldn’t know how to do it universally" in the post you responded to. Yup, I did.



  • Thank you for both your help.
    @Anhalter42 said in Change heading color:

    header {
    color: green;
    }

    That’s exactly what I was looking for.


Log in to reply
 

Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.