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.

    New Calendar Icon dont´t change color.

    Scheduled Pinned Locked Moved Custom CSS
    4 Posts 2 Posters 3.0k 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.
    • X Offline
      xeroxu
      last edited by

      Hello, I use the default calendar Module with Google. Now I want to put in a new Symbol in a special color but it will no work. The other Symbols are colored in the css ith fa.fa.

      Here my config

      {
      			module: "calendar",
      			header: "Appuntamenti",
      			position: "top_left",
      			maximumEntries: 8,
      			config: {
      				colored: true,
              timeformat: 'absolute',
      		 		urgency: 0,
      				getRelative: 0,
      				calendars: [
      {
      						symbol: "trash-o ",
      						url: 'https://calendar.google.com/calendar/ical/basic.ics'
      						
      				},
      	
      
      {
      						symbol: "calendar-check-o ",
      						url: 'https://calendar.google.com/calendar/ical/basic.ics'
      						
      				}
      				]
      			}
      		},
      		{
                    
      			module: "calendar",
      			header: "Compleanni",
      			position: "bottom_left",
      		        config: {
                                      timeformat: 'absolute',
      				urgency: 0,
      				getRelative: 0,				
      				calendars: [
                                              {
                                                      symbol: "birthday-cake ",
                                                      url: 'https://calendar.google.com/calendar/ical/basic.ics'
                                      }
                                      ]
                              }
                      },
      
      

      birthday-cake and calendar-check-o are colored and now I need a yellow trashcan.

      heree the css code

      /*****************************************************
       * Magic Mirror                                      *
       * Custom CSS                                        *
       *                                                   *
       * By Michael Teeuw http://michaelteeuw.nl           *
       * MIT Licensed.                                     *
       *                                                   *
       * Add any custom CSS below.                         *
       * Changes to this files will be ignored by GIT. *
       *****************************************************/
      
      body {
      }
      
      .brightb {
      color: #55acee;
      }
      .currentweather .wi-sunrise {
      color: #ffd700;
      }
      .currentweather .wi-sunset {
      color: #ffa500;
      }
      .currentweather .wi-day-sunny {
      color: #ffff00;
      }
      .currentweather .wi-night-showers {
      color: #55acee;
      }
      .currentweather .wi-degrees {
      color: #415;
      }
      .currentweather .wi-rain {
      color: #55acee;
      }
      .currentweather .wi-showers {
      color: #55acee;
      }
      .currentweather .wi-night-showers {
      color: #55acee;
      }
      .currentweather .wi-night-alt-cloudy-windy {
      color: #aaa;
      }
      .currentweather .wi-night-cloudy {
      color: #aaa;
      }
      .currentweather .wi-cloudy {
      color: #aaa;
      }
      .currentweather .wi-day-cloudy {
      color: #aaa;
      }
      .currentweather .wi-cloudy {
      color: #aaa;
      }
      .currentweather .wi-cloudy-windy {
      color: #aaa;
      }
      .currentweather .wi-showers {
      color: #55acee;
      }
      .currentweather .wi-thunderstorm {
      color: #ff00ff;
      }
      .currentweather .wi-snow {
      color: #fff;
      }
      .currentweather .wi-fog {
      color: #999;
      }
      .currentweather .wi-night-clear {
      color: #fff;
      }
      .currentweather .wi-night-rain {
      color: #55acee;
      }
      .currentweather .wi-night-thunderstorm {
      color: #ff00ff;
      }
      .currentweather .wi-night-snow {
      color: #fff;
      }
      
      .currentweather .humidityIcon {
      color: #55acee;
      }
      
      .weatherforecast .wi-sunrise {
      color: #ffd700;
      }
      .weatherforecast .wi-sunset {
      color: #ffa500;
      }
      .weatherforecast .wi-day-sunny {
      color: #ffff00;
      }
      .weatherforecast .wi-night-showers {
      color: #55acee;
      }
      .weatherforecast .wi-degrees {
      color: #415;
      }
      .weatherforecast .wi-rain {
      color: #55acee;
      }
      .weatherforecast .wi-showers {
      color: #55acee;
      }
      .weatherforecast .wi-night-showers {
      color: #55acee;
      }
      .weatherforecast .wi-night-alt-cloudy-windy {
      color: #aaa;
      }
      .weatherforecast .wi-night-cloudy {
      color: #aaa;
      }
      .weatherforecast .wi-cloudy {
      color: #aaa;
      }
      .weatherforecast .wi-day-cloudy {
      color: #aaa;
      }
      .weatherforecast .wi-cloudy {
      color: #aaa;
      }
      .weatherforecast .wi-cloudy-windy {
      color: #aaa;
      }
      .weatherforecast .wi-showers {
      color: #55acee;
      }
      .weatherforecast .wi-thunderstorm {
      color: #ff00ff;
      }
      .weatherforecast .wi-snow {
      color: #fff;
      }
      .weatherforecast .wi-fog {
      color: #999;
      }
      .weatherforecast .wi-night-clear {
      color: #fff;
      }
      .weatherforecast .wi-night-rain {
      color: #55acee;
      }
      .weatherforecast .wi-night-thunderstorm {
      color: #ff00ff;
      }
      .currentweather .wi-night-snow {
      color: #fff;
      }
      
      .fa.fa-calendar {
        color: #ffff00; /* Yellow */
      }
      .fa.fa-birthday-cake {
        color: #FF69B4; /* Red */
      }
      .fa.fa-calendar-check-o {
        color: #55acee; /* Magenta */
      }
      
      .fa.fa-calendar-bell {
        color: #ffa500; /* Magenta */
      }
      
      .fa.fa-calendar-trash-o {
        color: #FFFFFF; /* Yellow */
      }
      
      .fa.fa-calendar-trash {
        color: #FFFF00; /* Magenta */
      }
      
      
      }
      
      

      hope i dont have a to great mistake :(

      Mykle1M 1 Reply Last reply Reply Quote -1
      • Mykle1M Offline
        Mykle1 Project Sponsor Module Developer @xeroxu
        last edited by

        @xeroxu said in New Calendar Icon dont´t change color.:

        hope i dont have a to great mistake :(

        Two things here.

        Your custom.css entry should be

        .calendar .fa.fa-trash-o {
          color: yellow; /* Yellow */
        }
        

        And you had the color code color: #FFFFFF; /* Yellow */
        #FFFFFF is for white, not yellow. You would have to find the code for the yellow that you want.

        Create a working config
        How to add modules

        X 1 Reply Last reply Reply Quote 1
        • X Offline
          xeroxu @Mykle1
          last edited by

          @Mykle1 Thank you very much , this worked it out, not that i dont know the right hex code for yellow but i have 2 trashcans trash-o and trash , but i din´t know that I can change the Color by putting in the Name like “yellow” is yellow . Now my Problem is fixed again with your help.THX

          Mykle1M 1 Reply Last reply Reply Quote 1
          • Mykle1M Offline
            Mykle1 Project Sponsor Module Developer @xeroxu
            last edited by

            @xeroxu

            You’re welcome, mate! :-)

            Create a working config
            How to add modules

            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