MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    New Calendar Icon dont´t change color.

    Custom CSS
    2
    4
    2747
    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
      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 😞

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

          Mykle1 1 Reply Last reply Reply Quote 1
          • Mykle1
            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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy