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

                        @Richard238 see the exact class used on the element, we use the ACTUAL info, not whatever ‘config’ says

                        oh, using on MY machine, using the default calendar config …

                        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
                        • 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