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

Header and Title Module Color Change

Scheduled Pinned Locked Moved Troubleshooting
3 Posts 0 Posters 4.8k Views 2 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.
  • H Offline
    homerj99
    last edited by paviro Jul 8, 2016, 9:14 AM Jul 7, 2016, 3:10 PM

    Newbie, so be kind.
    Love the Mirror project and just have a question regarding font color in the modules.
    If I want to change the header color in the Calendar module, say to Red, how would I do it?
    Would it be a change in the config file or the module.

    module: 'calendar',
    header: 'US Holidays',
    position: 'top_left',
    

    Or If I want to change the color of the news module Title, say to red, how and where would I make that change?

    title: "New York Times",
    url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml"
    

    I do realize that calendar does use a CSS and color of the symbol, title and time can be changed using the css but not certain how to change the Header/Title time

    H 1 Reply Last reply Jul 7, 2016, 3:28 PM Reply Quote 0
    • ? Offline
      A Former User
      last edited by A Former User Jul 7, 2016, 3:28 PM Jul 7, 2016, 3:24 PM

      There is a custom.css file or this:

      $ sudo nano ~/MagicMirror/css/custom.css
      

      Add following lines:

      header {
          color:red;
      }
      

      Now the header of every module is red.

      If you only want the calendar module, add:

      .calendar header {
          color:red;
      }
      
      1 Reply Last reply Reply Quote 2
      • H Offline
        homerj99 @homerj99
        last edited by homerj99 Jul 7, 2016, 4:12 PM Jul 7, 2016, 3:28 PM

        Brilliant, thanks for pointing that out, greatly appreciated.
        Works as you said

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