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 13.0k 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.
    • S Offline
      sdetweil @Richard238
      last edited by

      @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

        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 Reply Quote 0
        • S Offline
          sdetweil @Richard238
          last edited by

          @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

            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 Reply Quote 0
            • S Offline
              sdetweil @Richard238
              last edited by

              @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

                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 Reply Quote 0
                • S Offline
                  sdetweil @Richard238
                  last edited by sdetweil

                  @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
                  • R Offline
                    Richard238
                    last edited by

                    Goodness, that’s complicated! Well, it kinda makes sense but, I’ll read it again when not so tired.

                    Sadly, still nothing. (Commented second one out in case it was the cause, but no luck there.)

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

                    Also tried a known working fa icon from the weather module, but again, nothing.

                    S 1 Reply Last reply Reply Quote 0
                    • S Offline
                      sdetweil @Richard238
                      last edited by sdetweil

                      @Richard238 it worked with the change (oops)

                      note that the selector is NOT -o

                      I used your text in the message, not the ACTUAL class on the element… my bad…

                      thats why we LOOK IT UP!..

                      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

                        Even though the icon is fa-calendar-check-o
                        https://fontawesome.com/v4/icon/calendar-check-o

                        we omit the -o ?

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