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.

    default calendar - individual icon colors?

    Scheduled Pinned Locked Moved Troubleshooting
    5 Posts 3 Posters 3.8k Views 3 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.
    • S Offline
      Shockwave
      last edited by

      I’m loading 2 calendars, one with the US Holidays and another with friend’s birthdays and anniversaries. I’ve figured out how to change the color of all of the icons which adds a nice bit of color, but I was wondering if it was possible to change the color of the birthday cake icon independently of the calendar-check-o icon.

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

        Each symbol is wrapped in CSS span tags allowing you to set your own styles to them. If you look at the actual HTML, you’ll see something similar to this:

        <tr class="normal">
          <td class="symbol"><span class="fa fa-birthday-cake">...</span></td>
          <td class="title bright">Stacey Donaldson</td>
          <td class="time light">Today</td>
        </tr>
        <tr class="normal">
          <td class="symbol"><span class="fa fa-calendar"></span></td>
          <td class="title bright">AJ Visit</td>
          <td class="time light">Jul 3rd</td>
        </tr>
        <tr class="normal">
          <td class="symbol"><span class="fa fa-calendar-check-o "></span>
          </td><td class="title bright">Independence Day</td>
          <td class="time light">Jul 4th</td>
        </tr>
        

        Of interest is the line that specifies the symbol class. Look at the actual symbol being used. Notice how each one is slightly different:

        <span class="fa fa-birthday-cake">...</span>
        <span class="fa fa-calendar">...</span>
        <span class="fa fa-calendar-check-o ">...</span>
        

        Incidentally, those correspond to the symbols I specified in my config file. You can manipulate those. In ~MagicMirror/css/custom.css add the following:

        .fa.fa-calendar {
          color: #ffff00; /* Yellow */
        }
        .fa.fa-birthday-cake {
          color: #ff0000; /* Red */
        }
        .fa.fa-calendar-check-o {
          color: #ff00ff; /* Magenta */
        }
        

        Reload.

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

        S 1 Reply Last reply Reply Quote 0
        • S Offline
          Shockwave @KirAsh4
          last edited by

          @KirAsh4
          Thank you for the help! It looks great!

          1 Reply Last reply Reply Quote 0
          • pugslyP Offline
            pugsly
            last edited by

            I had this working, and now the icons are just gray, and no matter what I set them to it doesn’t change. I am not sure what would have changed.

            pugslyP 1 Reply Last reply Reply Quote 0
            • pugslyP Offline
              pugsly @pugsly
              last edited by

              @pugsly Figured it out…

              .fas.fa-fw.fa-calendar {
              color: #ffffff; /* white /
              }
              .fas.fa-fw.fa-birthday-cake {
              color: #00ffff; /
              cyan /
              }
              .fas.fa-fw.fa-gift {
              color: #ffff00; /
              Yellow /
              }
              .fas.fa-fw.fa-institution {
              color: #ff0000; /
              Red /
              }
              .fas.fa-fw.fa.fa-building-o {
              color: #00ff00; /
              Lime */

              1 Reply Last reply Reply Quote 1
              • 1 / 1
              • 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