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! :)