Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.15.0 is available! For more information about this release, check out this topic.

    default calendar - individual icon colors?

    Troubleshooting
    3
    4
    3150
    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
      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
      • KirAsh4
        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.

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

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

          1 Reply Last reply Reply Quote 0
          • pugsly
            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.

            1 Reply Last reply Reply Quote 0
            • 1 / 1
            • First post
              Last post
            Enjoying MagicMirror? Please consider a donation!
            MagicMirror created by Michael Teeuw.
            Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy