Updating did nothing but gave fatal error warning.

[Richard238]

Then did

pm2 start all

and now have a black screen on the Pi, and ‘Unable to connect’ on the desktop browser. :-(

[sdetweil]

@Richard238 not pm2 start all

pm2 status

will show u the defined apps

pm2 start ??

where ?? is the name of the number of the app
(usually 0)

pm2 stop all just is a shortcut

pm2 --help shows u all the things it can do.

but the black screen could be because of the module rebuild failure

pm2 logs – lines=100 might show more info

and then there’s this
https://forum.magicmirror.builders/topic/15778/fix-for-black-screen-in-2-16-and-later

my upgrade tries to handle the ones we know about

[Richard238]

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

MMM-MysqlQuery

MMM-MysqlQuery seems to be the issue, I’ve commented it out of config .js,
Will that be ok if I try pm2 start again?

[sdetweil]

@Richard238 yes

[Richard238]

OK that’s brought MM back to life, but my custom CSS seems to have been ignored.

That, and I need new weather modules?!

[sdetweil]

@Richard238 you need to change to the new combined weather module…(announced 2 releases ago)

supposedly change the module name field to weather and change the appid field name to apiKey
custom.css should still be there… I save and restore

[Richard238]

custom.css is still there, but the coloured icons I had beside calendar entries are no longer showing.

[Richard238]

@sdetweil Weather module changes worked.
They needs adjusting, but it is now showing something so it’s a good start I can work from.

[sdetweil]

@Richard238 colored icons

maybe see this
https://forum.magicmirror.builders/topic/16591/mmm-homeassistant-sensors-no-icons-after-mm-upgrade-to-2-19-0

electron is enforcing reported server side (CORS) restrictions is didn’t before , people protecting their content

[Richard238]

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 */
}

[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

[Richard238]

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

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

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

[sdetweil]

@Richard238 the trailing space?

[Richard238]

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;
	},

[sdetweil]

@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

[Richard238]

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

.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*/
}

[sdetweil]

@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

[Richard238]

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

Changed css

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

Still no icon though :-/