MyFavMirrors/MeshCentral
1
0
Fork 0
mirror of https://github.com/Ylianst/MeshCentral.git synced 2025-03-03 23:30:06 -05:00
Code Issues Packages Projects Releases Wiki Activity
MeshCentral/meshcentral/customization/index.html

1718 lines
42 KiB
HTML
Raw Normal View History

Deployed 9b60271 with MkDocs version: 1.6.1
2025-01-02 01:22:39 +00:00
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="A remote monitoring and management tool">
<meta name="author" content="Ylianst">
<link rel="canonical" href="https://ylianst.github.io/MeshCentral/meshcentral/customization/">
<link rel="prev" href="../../messaging/">
<link rel="next" href="../openidConnectStrategy/">
<link rel="icon" href="../../images/favicon.ico">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.5.49">
<title>Customization - MeshCentral Documentation</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.6f8fc17f.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.06af60db.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<link rel="stylesheet" href="../../stylesheets/extra.css">
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="white" data-md-color-accent="indigo">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#customization" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../.." title="MeshCentral Documentation" class="md-header__button md-logo" aria-label="MeshCentral Documentation" data-md-component="logo">
<img src="../../images/favicon.ico" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
MeshCentral Documentation
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Customization
</span>
</div>
</div>
</div>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/Ylianst/MeshCentral" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg>
</div>
<div class="md-source__repository">
Ylianst/MeshCentral
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../.." class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../../install/" class="md-tabs__link">
Install
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="../" class="md-tabs__link">
MeshCentral2
</a>
</li>
<li class="md-tabs__item">
<a href="../../design/" class="md-tabs__link">
Design and Architecture
</a>
</li>
<li class="md-tabs__item">
<a href="../../meshcmd/" class="md-tabs__link">
MeshCmd
</a>
</li>
<li class="md-tabs__item">
<a href="../../meshctrl/" class="md-tabs__link">
MeshCtrl
</a>
</li>
<li class="md-tabs__item">
<a href="../../meshrouter/" class="md-tabs__link">
Mesh Router
</a>
</li>
<li class="md-tabs__item">
<a href="../../intelamt/" class="md-tabs__link">
Intel AMT
</a>
</li>
<li class="md-tabs__item">
<a href="../../how-to-contribute/" class="md-tabs__link">
How to Contribute
</a>
</li>
<li class="md-tabs__item">
<a href="../../other/adfs_sso_guide/" class="md-tabs__link">
Other
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../.." title="MeshCentral Documentation" class="md-nav__button md-logo" aria-label="MeshCentral Documentation" data-md-component="logo">
<img src="../../images/favicon.ico" alt="logo">
</a>
MeshCentral Documentation
</label>
<div class="md-nav__source">
<a href="https://github.com/Ylianst/MeshCentral" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81"/></svg>
</div>
<div class="md-source__repository">
Ylianst/MeshCentral
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../.." class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2" >
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
<span class="md-ellipsis">
Install
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Install
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../install/" class="md-nav__link">
<span class="md-ellipsis">
Quick Start Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../install/install2/" class="md-nav__link">
<span class="md-ellipsis">
Full Install Guide
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" checked>
<label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="">
<span class="md-ellipsis">
MeshCentral2
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
MeshCentral2
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../" class="md-nav__link">
<span class="md-ellipsis">
MeshCentral2 Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../config/" class="md-nav__link">
<span class="md-ellipsis">
All Configuration Options
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../agents/" class="md-nav__link">
<span class="md-ellipsis">
Agent Information
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../assistant/" class="md-nav__link">
<span class="md-ellipsis">
Assistant
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../codesigning/" class="md-nav__link">
<span class="md-ellipsis">
Code Signing
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../debugging/" class="md-nav__link">
<span class="md-ellipsis">
Debugging
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../devicetabs/" class="md-nav__link">
<span class="md-ellipsis">
Device Tabs
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../plugins/" class="md-nav__link">
<span class="md-ellipsis">
Plugins
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../SSLnletsencrypt/" class="md-nav__link">
<span class="md-ellipsis">
SSL
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../security/" class="md-nav__link">
<span class="md-ellipsis">
Security
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../tokens/" class="md-nav__link">
<span class="md-ellipsis">
Tokens
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../faq/" class="md-nav__link">
<span class="md-ellipsis">
FAQ
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../tipsntricks/" class="md-nav__link">
<span class="md-ellipsis">
Tips n Tricks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../messaging/" class="md-nav__link">
<span class="md-ellipsis">
Messaging
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Customization
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Customization
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#web-branding" class="md-nav__link">
<span class="md-ellipsis">
Web Branding
</span>
</a>
<nav class="md-nav" aria-label="Web Branding">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#customizing-web-icons" class="md-nav__link">
<span class="md-ellipsis">
Customizing Web Icons
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#customizing-agent-invitation" class="md-nav__link">
<span class="md-ellipsis">
Customizing Agent Invitation
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#agent-branding" class="md-nav__link">
<span class="md-ellipsis">
Agent Branding
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#terms-of-use" class="md-nav__link">
<span class="md-ellipsis">
Terms of use
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../openidConnectStrategy/" class="md-nav__link">
<span class="md-ellipsis">
openidConnectStrategy
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_4" >
<label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="0">
<span class="md-ellipsis">
Design and Architecture
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_4">
<span class="md-nav__icon md-icon"></span>
Design and Architecture
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../design/" class="md-nav__link">
<span class="md-ellipsis">
Design and Architecture
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_5" >
<label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
<span class="md-ellipsis">
MeshCmd
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
MeshCmd
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../meshcmd/" class="md-nav__link">
<span class="md-ellipsis">
MeshCmd
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_6" >
<label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
<span class="md-ellipsis">
MeshCtrl
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_6">
<span class="md-nav__icon md-icon"></span>
MeshCtrl
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../meshctrl/" class="md-nav__link">
<span class="md-ellipsis">
MeshCtrl
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_7" >
<label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
<span class="md-ellipsis">
Mesh Router
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_7">
<span class="md-nav__icon md-icon"></span>
Mesh Router
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../meshrouter/" class="md-nav__link">
<span class="md-ellipsis">
MeshCentral Router
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_8" >
<label class="md-nav__link" for="__nav_8" id="__nav_8_label" tabindex="0">
<span class="md-ellipsis">
Intel AMT
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_8">
<span class="md-nav__icon md-icon"></span>
Intel AMT
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../intelamt/" class="md-nav__link">
<span class="md-ellipsis">
Intel AMT
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_9" >
<label class="md-nav__link" for="__nav_9" id="__nav_9_label" tabindex="0">
<span class="md-ellipsis">
How to Contribute
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_9_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_9">
<span class="md-nav__icon md-icon"></span>
How to Contribute
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../how-to-contribute/" class="md-nav__link">
<span class="md-ellipsis">
Contribute to MeshCentral
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_10" >
<label class="md-nav__link" for="__nav_10" id="__nav_10_label" tabindex="0">
<span class="md-ellipsis">
Other
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_10_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_10">
<span class="md-nav__icon md-icon"></span>
Other
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../other/adfs_sso_guide/" class="md-nav__link">
<span class="md-ellipsis">
ADFS SSO Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../other/meshcentral_satellite/" class="md-nav__link">
<span class="md-ellipsis">
MeshCentral Satellite
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#web-branding" class="md-nav__link">
<span class="md-ellipsis">
Web Branding
</span>
</a>
<nav class="md-nav" aria-label="Web Branding">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#customizing-web-icons" class="md-nav__link">
<span class="md-ellipsis">
Customizing Web Icons
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#customizing-agent-invitation" class="md-nav__link">
<span class="md-ellipsis">
Customizing Agent Invitation
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#agent-branding" class="md-nav__link">
<span class="md-ellipsis">
Agent Branding
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#terms-of-use" class="md-nav__link">
<span class="md-ellipsis">
Terms of use
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="customization">Customization<a class="headerlink" href="#customization" title="Permanent link">&para;</a></h1>
<p>Whitelabeling your MeshCentral installation to personalize it to your company's brand, as well as having your own terms of use is one of the first things many people do after installation.</p>
<div class="video-wrapper">
<iframe width="320" height="180" src="https://www.youtube.com/embed/xUZ1w9RSKpQ" frameborder="0" allowfullscreen></iframe>
</div>
<h2 id="web-branding">Web Branding<a class="headerlink" href="#web-branding" title="Permanent link">&para;</a></h2>
<p>You can put your 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.</p>
<p><img alt="" src="../images/2022-05-19-00-38-51.png" /></p>
<p>Once done, edit the config.json file and set one or all of the following values:</p>
<div class="highlight"><pre><span></span><code><span class="nt">&quot;domains&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;Title&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;Title2&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;TitlePicture&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;title-sample.png&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;loginPicture&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;logintitle-sample.png&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;welcomeText&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;This is sample text&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;welcomePicture&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;mainwelcome-04.jpg&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;welcomePictureFullScreen&quot;</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;siteStyle&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;1&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;nightMode&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;1&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;meshMessengerTitle&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Mesh Chat&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;meshMessengerPicture&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;chatimage.png&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;footer&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;This is a HTML string displayed at the bottom of the web page when a user is logged in.&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;loginfooter&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;This is a HTML string displayed at the bottom of the web page when a user is not logged in.&quot;</span>
<span class="w"> </span><span class="p">},</span>
</code></pre></div>
<p>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 server and take a look at the web page. Both the desktop and mobile sites will change.</p>
<p><img alt="" src="../images/2022-05-19-00-39-35.png" /></p>
<p><img alt="" src="../images/2022-05-19-00-39-42.png" /></p>
<p>The title image must a PNG image of size 450 x 66.</p>
<p>You can also customize the server icon in the “My Server” tab. By default, it’s a picture of a desktop with a padlock.</p>
<p><img alt="" src="../images/2022-05-19-00-40-00.png" /></p>
<p>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.</p>
<p><img alt="" src="../images/2022-05-19-00-40-13.png" /></p>
<p>This is great to personalize the look of the server within the web site.</p>
<h3 id="customizing-web-icons">Customizing Web Icons<a class="headerlink" href="#customizing-web-icons" title="Permanent link">&para;</a></h3>
<p>MeshCentral lets you change the icons for different devices shown in the Web User Interface. To do this the proper way, you should make a new folder called <code>meshcentral-web</code> in the main directory, where you find other folders like <code>meshcentral-data</code>, <code>meshcentral-backup</code>, <code>meshcentral-files</code>, and <code>node-modules</code>. Inside <code>meshcentral-web</code>, make another folder named <code>public</code> and copy the entire <code>node_modules/meshcentral/public/images</code> folder into this new <code>meshcentral-web/public</code> folder and then edit the files in <code>meshcentral-web/public/images/</code>. This step is suggested because if MeshCentral updates, it might delete any changes in <code>node_modules</code>. But, changes in <code>meshcentral-web</code> will stay safe, and MeshCentral will use these files instead of the originals in <code>node_modules</code>.</p>
<p>To update device icons, you need to edit these files: <code>meshcentral-web/public/images/webp/iconsXX.webp</code> (<code>icons16.webp</code>, <code>icons32.webp</code>, <code>icons50.webp</code>, <code>icons100.webp</code>), and <code>meshcentral-web/public/images/iconsXX.png</code> (<code>icons16.png</code>, <code>icons32.png</code>, <code>icons50.png</code>, <code>icons64.png</code>, <code>icons100.png</code>) and the corresponding <code>meshcentral-web/public/images/icons256-X-1.png</code>. Make sure to keep the resolution of these files as it is. </p>
<p>By following these steps, you can customize any icon in MeshCentral. Just find and change the corresponding image files in the <code>meshcentral-web/public/images</code> folder. Similarly, you can also move other folders from <code>node_modules/meshcentral</code> to <code>meshcentral-web</code> while keeping the original folder structure. This allows you to modify other parts of MeshCentral too, like the <code>.handlebars</code> templates for the web interface. Simply copy files from <code>node_modules/meshcentral/views</code> to <code>meshcentral-web/views</code> and make your changes in <code>meshcentral-web</code>. This lets you match MeshCentral's look to your company's brand or your own style. <br />
<img alt="" src="../images/custom-web-icons.png" /> </p>
<h3 id="customizing-agent-invitation">Customizing Agent Invitation<a class="headerlink" href="#customizing-agent-invitation" title="Permanent link">&para;</a></h3>
<p>Agents can be invited by public link or via email. <a href="../assistant/#agent-invitation">Click Here</a> to see details. </p>
<h2 id="agent-branding">Agent Branding<a class="headerlink" href="#agent-branding" title="Permanent link">&para;</a></h2>
<p>You can customize the Agent to add your own logo, change the title bar, install text, the service name, or even colors!</p>
<div class="admonition note">
<p class="admonition-title">Note</p>
<p>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, so you will need to reinstall the agent for agent customizations to take effect.</p>
</div>
<p><img alt="" src="../images/2022-08-24-06-42-40.png" /></p>
<div class="highlight"><pre><span></span><code><span class="nt">&quot;domains&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;agentCustomization&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;displayName&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;MeshCentral Agent&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;description&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Mesh Agent background service&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;companyName&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Mesh Agent Company&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;serviceName&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Mesh Agent Service&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;installText&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;Text string to show in the agent installation dialog box&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;image&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;mylogo.png&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;fileName&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;meshagent&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;foregroundColor&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;#FFA500&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nt">&quot;backgroundColor&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;#EE82EE&quot;</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p><img alt="agent icon" src="../images/agentico.png" /></p>
<h2 id="terms-of-use">Terms of use<a class="headerlink" href="#terms-of-use" title="Permanent link">&para;</a></h2>
<p>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 it’s requested.</p>
<p>For example, placing this in “terms.txt”</p>
<div class="highlight"><pre><span></span><code>&lt;br /&gt;
This is a &lt;b&gt;test file&lt;/b&gt;.
</code></pre></div>
<p>Will show this on the terms of use web page.</p>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": ["navigation.tabs", "navigation.expand", "navigation.top", "navigation.instant"], "search": "../../assets/javascripts/workers/search.6ce7567c.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
<script src="../../assets/javascripts/bundle.88dd0f4e.min.js"></script>
</body>
</html>
Reference in New Issue Copy Permalink