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

      Colour, with a u! I’m British using British English! ;-)

      OK, CSS. It’s only using favicon codes, not images on a URL

       #module_3_calendar .fa.fa-calendar-check-o {
        color: #00d255 /* 55=Green FF=Blue*/
      }
      
       #module_4_calendar  .fa.fa-trash-o  {
        color: #C97F7F; /* Brown */
      }
      
      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.:

        #module_3_calendar

        u are using ID(#) to select

        probably changed locations in the config.js

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

        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

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

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