Custom Branding in MeshCentral

[DaanSelen]

Hello All,

I would like to ask more details about Customization in MeshCentral.

I have been playing around in Config.json and changing things like "welcomePicture": "mainwelcome.png" to custom image names. But I have been confused on where MeshCentral looks for that referenced images? Like which path?

Also:

I see here that it uses a 'welcome.png', but this file is nowhere to be found on the entire filesystem of the meshcentral server. So I would like to request some details in how meshcentral does this and how to work with this? Any requirements/formats?

A link to a detailed explanation would also be helpful, thanks!

[si458]

basically calling welcome.png in a web browser calls a function in meshcentral
if you specify welcomePicture it loads that image from inside your meshcentral-data folder
ELSE
if you use meshcentral-web customise folder it loads meshcentral-web/public/images/login/back.png
ELSE
it loads the default public/images/login/back.png

the is some customise docs here which is helpful, i know we need to update it tho
https://ylianst.github.io/MeshCentral/meshcentral/customization/

[si458]

For starters, I don't think ur folder structure is right?

You should create meshcentral-web next to meshcentral-data

So is the a reason u have /opt/meshcentral/app/meshcentral-web/... ?

Also, all the different images represent different things like azure login, Google login, 2fa login etc

[DaanSelen]

Hello Simon, thanks for replying.

root@thoth:/opt/meshcentral/app# ls
meshcentral-backups  meshcentral-data  meshcentral-files  meshcentral-web  node_modules  package.json  package-lock.json
root@thoth:/opt/meshcentral/app# pwd
/opt/meshcentral/app

root@thoth:/opt/meshcentral/app# tree -L 1
.
├── meshcentral-backups
├── meshcentral-data
├── meshcentral-files
├── meshcentral-web
├── node_modules
├── package.json
└── package-lock.json

root@thoth:/opt/meshcentral/app/meshcentral-web/public/images# pwd
/opt/meshcentral/app/meshcentral-web/public/images
root@thoth:/opt/meshcentral/app/meshcentral-web/public/images# ls
 3bars-30.png              google-play-140.png            icon-keylock-red.png       icons256-8-1.png          link5.png             mobile-desk-exit.png             report.png
 3dots-24.gif              google-play-280.png            icon-lock.png              icons32.png               link6.png             mobile-desk-keyboard-close.png   right-30.png
 3dots-48.gif              group-256.png                  icon-manage.png            icons50.png               link7.png             mobile-desk-keyboard-open.png    server-200.jpg
 amazon-appstore-140.png   hardware-key-OTP-24.png        icon-monitor1.png          icons64.png               login                 mobile-desk-menu-close.png       server-256.png
 amazon-appstore-280.png   hardware-keypress-120.png      icon-monitor2.png          icon-share2.png           logoback.png          mobile-desk-menu-open.png        servericon120.png
 android-40.png            hardware-key-WebAuthn-24.png   icon-notify.png            icon-share.png            macosagent.png        mobile-desk-mouse-left.pdn       servericon64.png
 android-80.png            icon-addnew.png                icon-play.png              icon-star-notify-10.png   mail12.png            mobile-desk-mouse-left.png       sharing-32.png
 assistant-100.png         icon-background.png            icon-refresh.png           icon-star-notify-16.png   mainwelcome.jpg       mobile-desk-mouse.png            sharing-64.png
 assistant-200.png         icon-background-red.png       'icon-relay - Copy.png'     icon-star-notify-40.png   mapmarker-gps.png     mobile-desk-mouse-right.png      trash.png
 assistant2-100.png        icon-camera.png                icon-relay-notify10.png    icon-star-notify.png      mapmarker-ip.png      mobile-desk-scale-in.png         usbkey70.png
 assistant2-200.png        icon-chat.png                  icon-relay-notify-40.png   icon-url2.png             mapmarker.png         mobile-desk-scale-out.png        user-128.png
 assistant2-400.png        icon-clipboard-in.png          icon-relay-notify.png      icon-url.png              mapmarker-user.png    monitor32.png                    user-256.png
 assistant-400.png         icon-clipboard-out.png         icon-relay-notifyx10.png   images16.png              mapmarker-wifi.png    notify                           user-32.png
 batteries24.png           icon-clipboard.png             icon-relay-notifyx.png     info.png                  mesh-256.png          notify16.png                     user-32x.png
 batteries48.png           icon-collapse.png              icon-relay.png             iplocation.png            MeshComm64b.png       notify24.png                     user-50.png
 c1.png                    icon-expand.png                icon-remove.png            key12.png                 meshicon100.png       notify48.png                     user-64.png
 c2.png                    icon-film.png                  icons100.png               key16.png                 meshicon16.png        padlock12.png                    user-64x.png
 c3.png                    icon-film-red.png              icons16.png                left-30.png               meshicon256.png       phone12.png                      views.png
 checkbox60.png            icon-gear.png                  icons256-1-1.png           leftbar-128.png           meshicon50.png        phone80.png                      webp
 clipboard-128.png         icon-graph.png                 icons256-2-1.png           leftbar-62.jpg            messaging12.png       plugin24.png                     welcome.png
 computers-128.png         icon-help-notify-10.png        icons256-3-1.png           leftbar-64.png            messaging40.png       plugin.png                       winagent.png
 details                   icon-help-notify-16.png        icons256-4-1.png           link1.png                 messenger16.png       ram2.png                         x16.png
 dot.png                   icon-help-notify-40.png        icons256-5-1.png           link2.png                 messenger32.png       ram.png                          x32.png
 gears-128.png             icon-installmesh.png           icons256-6-1.png           link3.png                 messenger-icons.png   rcheckbox60.png
 googledrive-48.png        icon-keylock.png               icons256-7-1.png           link4.png                 messenger.png         report60.png

root@thoth:/opt/meshcentral/app/meshcentral-web/public/images/login# ls
2fa-key-48.png   2fa-mail-96.png       2fa-push-48.png  2fa-sms-96.png  back.png         generic32.png  github64.png  intel32.png      jumpcloud64.png  push-150.png  reddit64.png
2fa-key-96.png   2fa-messaging-48.png  2fa-push-96.png  azure32.png     back.png.backup  generic64.png  google32.png  intel64.png      oidc32.png       push-300.png  twitter32.png
2fa-mail-48.png  2fa-messaging-96.png  2fa-sms-48.png   azure64.png     file48.png       github32.png   google64.png  jumpcloud32.png  oidc64.png       reddit32.png  twitter64.png

I have a default login page, though I must say the default MeshCentral icon on the bottom-left is missing.

[DaanSelen]

Hello Simon,

I'm sorry I did not notice the change because of cache. It does show now.

[si458]

gotta love browsers! in theory the browser should of noticed the change because it was a completly different image that changed? but who knows!

[DaanSelen]

Just to ask, things like background colors etc, are they configurable from the config.json?

[si458]

no, things like that are CSS related, so public/styles/style.css
the is already an open request to allow like a theme switcher, including moving the web ui to bootstrap which will allow for more customisation again!

[DaanSelen]

Okay, clear! Thank you for your time. It is truly appreciated.