@PhilsterM9 Hi again, maybe I’m missing something…
If you followed the install guide when you installed…
When you SSH in to your Pi (or open a terminal on the desktop of the pi) you should end up in a prompt looking like this:

pi@MagicMirror:~ $

Now, type as follows:

pi@MagicMirror:~ $ cd MagicMirror/config/

You should now be in MagicMirror/config/ looking like this:

pi@MagicMirror:~/MagicMirror/config $

To copy a file enter:

pi@MagicMirror:~/MagicMirror/config $ cp config.js.sample config.js

Check if the files where copied with ls both file should be there now:

pi@MagicMirror:~/MagicMirror/config $ ls

Listed like this:

config.js  config.js.sample

Now, if you want you can edit your config file:

pi@MagicMirror:~/MagicMirror/config $ nano config.js

Change whatever you need to change…
But you actually don’t have to change anything just for testing it.
Now restart the MagicMirror with pm2 like this:

pi@MagicMirror:~/MagicMirror/config $ pm2 restart mm

You should se something like this:

Restarts are now immutable, to update environment or conf use --update-env
[PM2] Applying action restartProcessId on app [mm](ids: 0)
[PM2] [mm](0) ✓
┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬──────────┬──────────┐
│ App name │ id │ mode │ pid   │ status │ restart │ uptime │ cpu │ mem      │ watching │
├──────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────┼──────────┼──────────┤
│ mm       │ 0  │ fork │ 26361 │ online │ 32      │ 0s     │ 22% │ 2.3 MB   │ disabled │
└──────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────┴──────────┴──────────┘
 Use `pm2 show ` to get more details about an app
pi@MagicMirror:~/MagicMirror/config $

And your Magic should have started. :)

@PhilsterM9 Hi again, no the config.js.sample should still be left in there.
How does your config.js look now?

@PhilsterM9 Hi!
Put simply, the config.js.sample is a “preconfigured” version of config.js (sort of default settings).
Just do:

cd MagicMirror/config
cp config.js.sample config.js

Now when you copied the sample config you can customize your mirror with:

nano config.js

Make the changes you want…

When done restart the magic mirror with pm2 or basically restart the Pi (computer).
If you followed the guide you can use pm2 like this to restart the MagicMirror (only):

pm2 restart mm

Best regards Snille

@shashank Hi! You should not need to delete the TouchNavigation.css file at all. It shall remain, you just have to add the css things in the MagicMirror/css/custom.css nothing else. The module itself shall remain “untouched”, then later on you will not have update problems. :) Also, I did only change what’s needed to be changed in the custom.css there are still settings in the TouchNavigation.css file that may be needed. Regarding the pictures, I’m not sure, as someone else mentioned I think you may need to create a sub-folder for them. But I never tested to have the pictures “locally”. Sorry.

@tosti007 Thank you! Now it fits perfectly with the MM-Hide-All module. :)

Different look for this module, just wanted to share :)…
Grayscale:

Or in color:

It’s only the pictures that differ from the gray or color ones.
You have to use your own pictures of course. :)

In the config.js:

{
	module: 'MMM-TouchNavigation',
	position: 'bottom_left',
	classes: "default everyone",
	config: {
		picturePlacement: "right",
		minWidth: "40px",
		direction: "column",
		buttons: {
			"Name1": {
				img: "http://www.your-picture.com/name1-Gray.png", 
				width: 60,
				height: 60
			},
			"Name2": {
				img: "http://www.your-picture.com/name2-Gray.png", 
				width: 60,
				height: 60
			},
			"Name3": {
				img: "http://www.your-picture.com/name3-Gray.png", 
				width: 60,
				height: 60
			}
		}
	}
},

In my custom.css:

/* Touch Buttons */
.navigation-button {
    margin: 5px;
    padding: 0px 0px;
    border: 2px solid #FFF; 
    border-radius: 0px;
    border-radius: 50%;
}
.navigation-picture {
    margin: 0px 0px;
    border-radius: 50%;
}
.navigation-menu {
    align-items: flex-start;
}
/* ----- End ----- */

Update: Just noticed that the buttons got “stretched” if something else was displayed in the same region. So I added the “.navigation-menu” part in the css.
If you have the buttons on the right side, use: “flex-end” instead of “flex-start”.

Enjoy! :)

Hi! Yes, restarting works. This usually happens when a module has failed to work (have some error in it). Even though you fix the problem, as long as you have not restarted it seems the port still is “in use”.

By the way, thank you for this GREAT project! :)

Best regards Snille

@strawberry-3.141 I had not, now I did and it works! :)
Thank you!

Hi! I’m using a separate compliments file (for each user). I’ve noticed that when I use non english characters they are not shown correctly.
The complement in the picture should say: “Tänk positivt”.
Now it says:

If I don’t use a compliments file and put the compliments directly in the config, it works fine.

What to do? :)

Best regards Snille

@tosti007 Here you go:
sv.json

{
  "leave": "Ses snart %profile%!",
  "enter": "Hej %profile%, trevligt att ses igen!",
  "title": "Användarprofil"
}

:)