Browse Guides

Application Colour and Theme
Reading mode
Copy Link
Link Copied!
Print
Feedback
This guide has multiple versions available:
<style>p { margin: 0; }span.fr-emoticon.fr-emoticon-img { background-repeat: no-repeat !important; font-size: inherit; height: 1em; width: 1em; min-height: 20px; min-width: 20px; display: inline-block; margin: -0.1em 0.1em 0.1em; line-height: 1; vertical-align: middle; } span.fr-emoticon { font-weight: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; display: inline; line-height: 0; } blockquote { border-left: solid 2px #5e35b1; color: #5e35b1; margin-left:0; padding-left:5px;}blockquote blockquote{ border-color: #00bcd4; color: #00bcd4;}blockquote blockquote blockquote{ border-color: #43a047; color: #43a047;} table.grid{ border-collapse: collapse;} table.grid td, table.grid th { border: 1px solid #ddd;} .fr-fic.fr-dib{ display: block; margin: 5px auto;}.fr-fic.fr-dib.fr-fir{ text-align: right; margin: 5px 0 5px auto;}.fr-fic.fr-dib.fr-fil{ text-align: left; margin: 5px auto 5px 0;}.fr-fic.fr-dii{ float: none; margin: 5px auto;}.fr-fic.fr-dii.fr-fil{ float: left; margin: 5px auto;}.fr-fic.fr-dii.fr-fir{ float: right; margin: 5px auto;}img.fr-dib.fr-fir { margin-right: 0; text-align: right;}img.fr-dib.fr-fil { margin-left: 0; text-align: left;}img.fr-dib { margin: 5px auto; display: block; float: none;}img.fr-bordered { box-sizing: content-box; border: solid 5px #CCC;}img.fr-shadow { box-shadow: 10px 10px 5px 0px #cccccc;}img.fr-rounded { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;}</style><style> p { margin: 0; } span.fr-emoticon.fr-emoticon-img { background-repeat: no-repeat !important; font-size: inherit; height: 1em; width: 1em; min-height: 20px; min-width: 20px; display: inline-block; margin: -0.1em 0.1em 0.1em; line-height: 1; vertical-align: middle; } span.fr-emoticon { font-weight: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; display: inline; line-height: 0; } blockquote { border-left: solid 2px #5e35b1; color: #5e35b1; margin-left: 0; padding-left: 5px; } blockquote blockquote { border-color: #00bcd4; color: #00bcd4; } blockquote blockquote blockquote { border-color: #43a047; color: #43a047; } table.grid { border-collapse: collapse; } table.grid td, table.grid th { border: 1px solid #ddd; } .fr-fic.fr-dib { display: block; margin: 5px auto; } .fr-fic.fr-dib.fr-fir { text-align: right; margin: 5px 0 5px auto; } .fr-fic.fr-dib.fr-fil { text-align: left; margin: 5px auto 5px 0; } </style><style> p { margin: 0; } span.fr-emoticon.fr-emoticon-img { background-repeat: no-repeat !important; font-size: inherit; height: 1em; width: 1em; min-height: 20px; min-width: 20px; display: inline-block; margin: -0.1em 0.1em 0.1em; line-height: 1; vertical-align: middle; } span.fr-emoticon { font-weight: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; display: inline; line-height: 0; } blockquote { border-left: solid 2px #5e35b1; color: #5e35b1; margin-left: 0; padding-left: 5px; } blockquote blockquote { border-color: #00bcd4; color: #00bcd4; } blockquote blockquote blockquote { border-color: #43a047; color: #43a047; } table.grid { border-collapse: collapse; } table.grid td, table.grid th { border: 1px solid #ddd; } .fr-fic.fr-dib { display: block; margin: 5px auto; } .fr-fic.fr-dib.fr-fir { text-align: right; margin: 5px 0 5px auto; } .fr-fic.fr-dib.fr-fil { text-align: left; margin: 5px auto 5px 0; } </style><p><strong>In this guide we will cover:&nbsp;</strong></p><p><strong>- Agent Settings for Application colour and theme&nbsp;</strong></p><p><strong>- Global Settings for Application colour and theme</strong></p><p><br></p><p><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true"><iframe width="640" height="360" src="https://www.youtube.com/embed/Ko8tgqOdvpU?wmode=opaque" frameborder="0" allowfullscreen="" class="fr-draggable"><span class="fr-mk" style="display: none;">&nbsp;</span><span class="fr-mk" style="display: none;">&nbsp;</span><span class="fr-mk" style="display: none;">&nbsp;</span><span class="fr-mk" style="display: none;">&nbsp;</span><span class="fr-mk" style="display: none;">&nbsp;</span><span class="fr-mk" style="display: none;">&nbsp;</span><span class="fr-mk" style="display: none;">&nbsp;</span><span class="fr-mk" style="display: none;">&nbsp;</span><span class="fr-mk" style="display: none;">&nbsp;</span><span class="fr-mk" style="display: none;">&nbsp;</span><span class="fr-mk" style="display: none;">&nbsp;</span><span class="fr-mk" style="display: none;">&nbsp;</span></iframe>&nbsp;</span></p><p><br></p><p><br></p><p>You can customise the colour, logo and page size for your Halo. This can be done globally throughout the system, or you can allow each agent to also change their colour. This gives you a Halo look all of your own!</p><p><u><br></u></p><p><strong><span style="font-size: 14pt;">Agent Settings for Application colour and theme&nbsp;</span></strong></p><p>Click on your profile picture in the top right (or initials icon if a picture has not yet been set) and click &quot;My Account&quot; to bring up your agent settings.</p><p>&nbsp;</p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjMxMGNlYzI3LWRmODgtNDE4Yy1hYjY1LTA2ZmQxMjdmOTYwMSJ9.FcxBFOoriyIzYw_qjHvMY4FCvGPRbESDAsZz1YkYXFU" class="fr-fic fr-fil fr-dib" width="1067" style="width: 1069px; height: 412.321px;" height="412"></p><p><br></p><p data-pasted="true">Navigate to the Preferences tab, and expand the section &quot;Appearance settings&quot;. Now click &quot;Edit&quot; in the top left to change any preferences.&nbsp;</p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImI5N2ViMmY2LWI2NGUtNDkwNi05OTEzLWZmMjMzMmU1Y2VhMSJ9.Ry7VIMaIDrd3S0miaRyoCxqx7WBaXhAZhFNP76g96vw" class="fr-fic fr-fil fr-dib" width="608" style="width: 610px; height: 670.032px;" height="670"></p><p><br></p><p><strong>Application Theme&nbsp;</strong></p><p>This can be used to set a light or dark theme, this can be for aesthetic or for visual reasons, as well as high contrast mode.</p><p><br></p><p><strong>Application Colour&nbsp;</strong></p><p>This is the colour of your Halo Web App.</p><p><br></p><p><strong>Profile Colour&nbsp;</strong></p><p>This is the colour that backs your initials when you have no profile picture set.</p><p><br></p><p>You can change your profile picture by clicking on the initials/picture at the top of this window.</p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjFlYjMwMTc1LWQxMGUtNGE2MS05ZjU3LTFiNmQ5ZThlODRlYSJ9.orOTp4iGuTvDZO5ciJvQnzSbNBslVh7yj5wLdDHLfTg" class="fr-fic fr-fil fr-dib" width="685" height="457"></p><p><br></p><p><strong><span style="font-size: 14pt;">Global Settings</span></strong></p><p>Head to Configuration &gt; Advanced Settings and scroll to the appearance tab to be presented with the following settings. These are the global colour and page size settings.</p><p><br></p><p>Input any hex colour you wish here to modify your Halo instance&#39;s colour. Below this you can also change the colour and display of the Navigation Menu.</p><p><br></p><p><strong><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjU4ZGI3MzBjLWZmYWEtNDk3ZC04ZjU3LTU1ZjBmOGI4NWZkYyJ9.pKyZmt5V_blw3EKZ5VFt8Ib5a6GB5qhclnexE-RykjU" class="fr-fic fr-fil fr-dib" width="1069" style="width: 1071px; height: 520.946px;" height="521"></strong><br></p><p><br></p>
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.