Read the statement by Michael Teeuw here.
New Calendar Icon dont´t change color.
-
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 :(
-
@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. -
@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
-
You’re welcome, mate! :-)