MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.20.0 is available! For more information about this release, check out this topic.

    SOLVED Updating did nothing but gave fatal error warning.

    Troubleshooting
    4
    41
    344
    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
      Richard238 last edited by

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

      karsten13 1 Reply Last reply Reply Quote 0
      • karsten13
        karsten13 @Richard238 last edited by

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

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

            @Richard238 the trailing space?

            Sam

            Create a working config
            How to add modules

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

                Create a working config
                How to add modules

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

                    Create a working config
                    How to add modules

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

                        Create a working config
                        How to add modules

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