• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

Updating did nothing but gave fatal error warning.

Scheduled Pinned Locked Moved Solved Troubleshooting
41 Posts 4 Posters 9.3k 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.
  • R Offline
    Richard238
    last edited by Apr 8, 2022, 3:29 PM

    .calendar .fa.fa-calendar-check-o {
      color: #00d255 /* 55=Green FF=Blue*/
    }
    
    .calendar  .fa.fa-trash-o  {
      color: #C97F7F; /* Brown */
    }
    

    Makes no difference, the icons still don’t show.

    K 1 Reply Last reply Apr 8, 2022, 8:05 PM Reply Quote 0
    • K Online
      karsten13 @Richard238
      last edited by Apr 8, 2022, 8:05 PM

      @Richard238

      what did you define in the symbol: section in the config.js?

      May these icons are outdated, you can search here for icons, only free icons will work.

      1 Reply Last reply Reply Quote 0
      • R Offline
        Richard238
        last edited by Richard238 Apr 9, 2022, 10:48 AM Apr 9, 2022, 9:31 AM

        I have these, both of which were working perfectly well prior to this update

        symbol: 'calendar-check-o ',
        symbol: 'trash-o ',
        

        And having configured the new weather module, those icons are responding to custom css just fine.

        No idea why calendar icons won’t work.

        S 1 Reply Last reply Apr 9, 2022, 12:39 PM Reply Quote 0
        • S Offline
          sdetweil @Richard238
          last edited by Apr 9, 2022, 12:39 PM

          @Richard238 the trailing space?

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • R Offline
            Richard238
            last edited by Apr 9, 2022, 3:25 PM

            This worked perfectly prior to the most recent update.

            Deleted said space, still no icons.
            Appropriate code below for reference:

            .calendar .fa.fa-calendar-check-o {
              color: #00d255 /* 55=Green FF=Blue*/
            }
            
            .calendar  .fa.fa-trash-o  {
              color: #C97F7F; /* Brown */
            }
            
            
            			module: 'calendar',
            			header: 'Calendar',
            			position: 'top_left',
            			config: {
                                maximumEntries: 6, // Total Maximum Entries
                                maximumNumberOfDays: 365,
                                displaySymbol: true,
                                defaultSymbol: "calendar", // Fontawesome Symbol see http://fontawesome.io/cheatsheet/
                                displayRepeatingCountTitle: false,
                                defaultRepeatingCountTitle: "",
                                maxTitleLength: 30,
                                fetchInterval: 5 * 60 * 1000, // Update every 5 minutes.
                                animationSpeed: 2000,
                                fade: true,
                                showEnd: false,
                                urgency: 0,
                                timeFormat: "absolute",
                                dateFormat: "ddd Do MMMM",
                                getRelative: 0,
                                fadePoint: 0.50, // Start on 1/4th of the list.
                                hidePrivate: false,
                                calendars: [
            					{
            						symbol: 'calendar-check-o',
            						url: 'https://calendar.google.com/calendar################
            					}
            				],
            			}
            		},
            		{
            			module: 'calendar',
            			header: 'Binday',
            			position: 'bottom_left',
            			config: {
                                maximumEntries: 4, // Total Maximum Entries
                                maximumNumberOfDays: 365,
                                displaySymbol: true,
                                defaultSymbol: "calendar", // Fontawesome Symbol see http://fontawesome.io/cheatsheet/
                                displayRepeatingCountTitle: false,
                                defaultRepeatingCountTitle: "",
                                maxTitleLength: 30,
                                fetchInterval: 5 * 60 * 1000, // Update every 5 minutes.
                                animationSpeed: 2000,
                                fade: true,
                                showEnd: false,
                                urgency: 0,
                                timeFormat: "absolute",
                                dateFormat: "ddd Do MMMM",
                                getRelative: 0,
                                fadePoint: 0.50, // Start on 1/4th of the list.
                                hidePrivate: false,
                                calendars: [
                                {
            						symbol: 'trash-o',
            						url: 'https://calendar.google.com/calendar#######################
            					}
            				],
                            titleReplace: {
                            //	"'s birthday": "",
                            //	"Recycling": "Bins",
                                "Red Bin": "Red & Black Bins",
                                "Green Bin": "Green & Black Bins" 
                            },
                            // Override start method.
                            start: function () {
                                Log.log("Starting module: " + this.name);                   
                                for (var c in this.config.calendars) {
                                    var calendar = this.config.calendars[c];
                                    calendar.url = calendar.url.replace("webcal://", "http://");
                                    this.addCalendar(calendar.url, calendar.user, calendar.pass);
                                }
            
                                this.calendarData = {};
                                this.loaded = false;
            	},
            
            S 1 Reply Last reply Apr 9, 2022, 3:54 PM Reply Quote 0
            • S Offline
              sdetweil @Richard238
              last edited by Apr 9, 2022, 3:54 PM

              @Richard238 said in Updating did nothing but gave fatal error warning.:

              .calendar .fa.fa-calendar-check-o {
              color: #00d255 /* 55=Green FF=Blue*/
              }

              yep, the class name changed

              see
              https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1649371486164

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • R Offline
                Richard238
                last edited by Apr 9, 2022, 4:08 PM

                Bit familiar with the F12 console, but it’s not easy to select the exact spot.

                3a7bcf68-c2f6-4f9c-a6a1-94cb7176cd69-image.png

                .calendar .fa.fa-calendar-check-o {
                  color: #00d255 /* 55=Green FF=Blue*/
                }
                

                Change it to this?

                .calendar.module.calendar  .fa.fa-calendar-check-o {
                  color: #00d255 /* 55=Green FF=Blue*/
                }
                

                Or?

                .module.calendar  .fa.fa-calendar-check-o {
                  color: #00d255 /* 55=Green FF=Blue*/
                }
                
                S 1 Reply Last reply Apr 9, 2022, 4:11 PM Reply Quote 0
                • S Offline
                  sdetweil @Richard238
                  last edited by Apr 9, 2022, 4:11 PM

                  @Richard238 in main.css comment out cursor:none
                  /* cursor:none */

                  reload the MM page

                  select the elements tab
                  select the arrow top left of the developers page

                  navigate the mouse to the check icon in the calendar display
                  click on the icon

                  int he elements page is the html of the element selected
                  and its class name is shown

                  use that …

                  thats what I did, copied your css, didn’t work (as u said)
                  found the element , and its new class name
                  changed the css
                  refreshed the page and it worked.

                  I want YOU to do it, so next time you know how/why

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • R Offline
                    Richard238
                    last edited by Apr 9, 2022, 5:07 PM

                    I guess ‘elements’ is from another browser type, I’m in Firefox where it’s called Inspector.

                    But anyway, I clicked where the calendar icon ought to be, where its name shows on the cursor hover, and got this

                    ac62edd3-78dc-48db-b911-c2766dc08a09-image.png

                    7f1f7fdc-59f7-40e6-a8a2-53622e5b1c8f-image.png

                    Changed css

                    .calendar .fas fa-fw fa-calendar-check-o {
                      color: #00d255 /* 55=Green FF=Blue*/
                    }
                    
                    

                    Still no icon though :-/

                    S 1 Reply Last reply Apr 9, 2022, 5:27 PM Reply Quote 0
                    • S Offline
                      sdetweil @Richard238
                      last edited by sdetweil Apr 9, 2022, 9:26 PM Apr 9, 2022, 5:27 PM

                      @Richard238 said in Updating did nothing but gave fatal error warning.:

                      .calendar .fas fa-fw fa-calendar-check-o {
                      color: #00d255 /* 55=Green FF=Blue*/
                      }

                      css selectors are the problem
                      https://www.w3schools.com/cssref/css_selectors.asp

                      so, your definition says

                      for the CLASS calendar

                      find ALL elements that match (.fas fa-fw fa-calendar-check)
                      and set their color (foreground text color style ) to …

                      so, lets examine the

                      .fas fa-fw fa-calendar-check
                      

                      in the element this is ALL inside the class= attribute

                      class="fas fa-fw fa-calendar-check"
                      

                      so to SELECT based on CLASS the names need dots in front

                      name = tagname (<p, <img, <table …
                      .name = class name ( .calendar
                      #name = id of element ( id=“fred” #fred

                      no space between selectors means ALL

                      Selects all elements with both name1 and name2 set within its class attribute

                      space between selectors means ALL AND directly child/parent

                      Selects all elements with name2 that is a descendant of an element with name1

                      and there are other types > < ~ … which mean this ??? in children elements, etc,

                      what your string says is
                      under the calendar CLASS (.calendar)
                      for CLASS of fas (.fas)
                      AND
                      element of fa-fw (<fa-fw)
                      AND
                      element of fa-calendar-check (<fa-calendar-check)

                      but you dont have the two ‘elements’ cause they are used in the class attribute

                      in your case you only need ONE (not all)

                      and its a CLASS (so leading .)

                      .calendar .fa-calendar-check{
                      ....
                      }
                      

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      1 Reply Last reply Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 5
                      • 3 / 5
                      3 / 5
                      • First post
                        28/41
                        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