move branding to customization

Signed-off-by: si458 <simonsmith5521@gmail.com>
This commit is contained in:
Simon Smith 2024-01-08 11:14:30 +00:00 committed by GitHub
parent b490d6bc15
commit 6c4a4e6966
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 103 additions and 128 deletions

View File

@ -0,0 +1,101 @@
# Customization
## Branding & Terms of use
Whitelabeling your MeshCentral installation to personalize it to your companies brand, as well as having your own terms of use is one of the first things many people do after installation.
<div class="video-wrapper">
<iframe width="320" height="180" src="https://www.youtube.com/embed/xUZ1w9RSKpQ" frameborder="0" allowfullscreen></iframe>
</div>
### Branding
You can put you own logo on the top of the web page. To get started, get the file “logoback.png” from the folder “node_modules/meshcentral/public/images” and copy it to your “meshcentral-data” folder. In this example, we will change the name of the file “logoback.png” to “title-mycompany.png”. Then use any image editor to change the image and place your logo.
![](images/2022-05-19-00-38-51.png)
Once done, edit the config.json file and set one or all of the following values:
```json
"domains": {
"": {
"Title": "",
"Title2": "",
"TitlePicture": "title-sample.png",
"loginPicture": "logintitle-sample.png",
"welcomeText": "This is sample text",
"welcomePicture": "mainwelcome-04.jpg",
"welcomePictureFullScreen": true,
"siteStyle": "1",
"nightMode": "1",
"meshMessengerTitle": "Mesh Chat",
"meshMessengerPicture": "chatimage.png",
"footer": "This is a HTML string displayed at the bottom of the web page when a user is logged in.",
"loginfooter": "This is a HTML string displayed at the bottom of the web page when a user is not logged in."
},
```
This will set the title and sub-title text to empty and set the background image to the new title picture file. You can now restart the serve and take a look at the web page. Both the desktop and mobile sites will change.
![](images/2022-05-19-00-39-35.png)
![](images/2022-05-19-00-39-42.png)
The title image must a PNG image of size 450 x 66.
You can also customize the server icon in the “My Server” tab. By default, its a picture of a desktop with a padlock.
![](images/2022-05-19-00-40-00.png)
If, for example, MeshCentral is running on a Raspberry Pi. You may want to put a different picture at this location. Just put a “server.jpg” file that is 200 x 200 pixels in the “meshcentral-data” folder. The time MeshCentral page is loaded, you will see the new image.
![](images/2022-05-19-00-40-13.png)
This is great to personalize the look of the server within the web site.
### Agent Branding
You can customize the Agent to add your own logo, change the title bar, install text, the service name, or even colors!
!!!note
The Customization must be done FIRST and BEFORE you deploy your agents!
Once the agents have been deployed, any customization made afterwards, will not sync!
This is because the setup files are customized on the fly, then when you install the agents, the exe and .msh file with the customizations in are copied over to the required folder
![](images/2022-08-24-06-42-40.png)
```json
"domains": {
"": {
"agentCustomization": {
"displayName": "MeshCentral Agent",
"description": "Mesh Agent background service",
"companyName": "Mesh Agent Company",
"serviceName": "Mesh Agent Service",
"installText": "Text string to show in the agent installation dialog box",
"image": "mylogo.png",
"fileName": "meshagent",
"foregroundColor": "#FFA500",
"backgroundColor": "#EE82EE"
}
}
}
```
![agent icon](images/agentico.png)
!!!note
You will need to reinstall the agent for agent customizations to take effect.
### Terms of use
You can change the terms of use of the web site by adding a “terms.txt” file in the “meshcentral-data” folder. The file can include HTML markup. Once set, the server does not need to be restarted, the updated terms.txt file will get used the next time its requested.
For example, placing this in “terms.txt”
```
<br />
This is a <b>test file</b>.
```
Will show this on the terms of use web page.

View File

@ -1198,133 +1198,6 @@ And taking authentication to the next step is removing the login page entirely.
<iframe width="320" height="180" src="https://www.youtube.com/embed/-WKY8Wy0Huk" frameborder="0" allowfullscreen></iframe>
</div>
## Branding & Terms of use
Whitelabeling your MeshCentral installation to personalize it to your companies brand, as well as having your own terms of use is one of the first things many people do after installation.
<div class="video-wrapper">
<iframe width="320" height="180" src="https://www.youtube.com/embed/xUZ1w9RSKpQ" frameborder="0" allowfullscreen></iframe>
</div>
### Branding
You can put you own logo on the top of the web page. To get started, get the file “logoback.png” from the folder “node_modules/meshcentral/public/images” and copy it to your “meshcentral-data” folder. In this example, we will change the name of the file “logoback.png” to “title-mycompany.png”. Then use any image editor to change the image and place your logo.
![](images/2022-05-19-00-38-51.png)
Once done, edit the config.json file and set one or all of the following values:
```json
"domains": {
"": {
"Title": "",
"Title2": "",
"TitlePicture": "title-sample.png",
"loginPicture": "logintitle-sample.png",
"welcomeText": "This is sample text",
"welcomePicture": "mainwelcome-04.jpg",
"welcomePictureFullScreen": true,
"siteStyle": "1",
"nightMode": "1",
"meshMessengerTitle": "Mesh Chat",
"meshMessengerPicture": "chatimage.png",
"footer": "This is a HTML string displayed at the bottom of the web page when a user is logged in.",
"loginfooter": "This is a HTML string displayed at the bottom of the web page when a user is not logged in."
},
```
This will set the title and sub-title text to empty and set the background image to the new title picture file. You can now restart the serve and take a look at the web page. Both the desktop and mobile sites will change.
![](images/2022-05-19-00-39-35.png)
![](images/2022-05-19-00-39-42.png)
The title image must a PNG image of size 450 x 66.
You can also customize the server icon in the “My Server” tab. By default, its a picture of a desktop with a padlock.
![](images/2022-05-19-00-40-00.png)
If, for example, MeshCentral is running on a Raspberry Pi. You may want to put a different picture at this location. Just put a “server.jpg” file that is 200 x 200 pixels in the “meshcentral-data” folder. The time MeshCentral page is loaded, you will see the new image.
![](images/2022-05-19-00-40-13.png)
This is great to personalize the look of the server within the web site.
### Agent Branding
You can also customize the Agent to add your own logo.
![](images/2022-08-24-06-42-40.png)
```json
"agentCustomization": {
"displayName": {
"type": "string",
"default": "MeshCentral Agent",
"description": "The name of the agent as displayed to the user."
},
"description": {
"type": "string",
"default": "Mesh Agent background service",
"description": "The description of the agent as displayed to the user."
},
"companyName": {
"type": "string",
"default": "Mesh Agent",
"description": "This will be used as the path to install the agent, by default this is 'Mesh Agent' in Windows and 'meshagent' in other OS's."
},
"serviceName": {
"type": "string",
"default": "Mesh Agent",
"description": "The name of the background service, by default this is 'Mesh Agent' in Windows and 'meshagent' in other OS's but should be set to an all lower case, no space string."
},
"installText": {
"type": "string",
"default": null,
"description": "Text string to show in the agent installation dialog box."
},
"image": {
"type": "string",
"default": null,
"description": "The filename of a image file in .png format located in meshcentral-data to display in the MeshCentral Agent installation dialog, image should be square and from 64x64 to 200x200."
},
"fileName": {
"type": "string",
"default": "meshagent",
"description": "The agent filename."
},
"foregroundColor": {
"type": "string",
"default": null,
"description": "Foreground text color, valid values are RBG in format 0,0,0 to 255,255,255 or format #000000 to #FFFFFF."
},
"backgroundColor": {
"type": "string",
"default": null,
"description": "Background color, valid values are RBG in format 0,0,0 to 255,255,255 or format #000000 to #FFFFFF."
}
}
```
![agent icon](images/agentico.png)
!!!note
You will need to reinstall the agent for agent customizations to take effect.
### Terms of use
You can change the terms of use of the web site by adding a “terms.txt” file in the “meshcentral-data” folder. The file can include HTML markup. Once set, the server does not need to be restarted, the updated terms.txt file will get used the next time its requested.
For example, placing this in “terms.txt”
```
<br />
This is a <b>test file</b>.
```
Will show this on the terms of use web page.
## Server Backup & Restore
Its very important that the server be backed up regularly and that a backup be kept offsite. Luckily, performing a full backup of the MeshCentral server is generally easy to do. For all installations make sure to back up the following two folders and all sub-folders.

View File

@ -21,6 +21,7 @@ nav:
- 'FAQ': 'meshcentral/faq.md'
- 'Tips n Tricks': 'meshcentral/tipsntricks.md'
- 'Messaging': 'messaging/index.md'
- 'Customization': 'meshcentral/customization.md'
- Design and Architecture:
- design/index.md
@ -43,7 +44,7 @@ nav:
site_description: "A remote monitoring and management tool"
site_author: "Ylianst"
site_url: "https://git.meshcentral.com/"
site_url: "https://ylianst.github.io/MeshCentral/"
dev_addr: "0.0.0.0:8010"