<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><p><strong>In this guide we will cover:</strong></p><p><strong>- Adding CSS</strong></p><p><strong>- How to customise the look of your Self service portal using CSS</strong></p><p><strong>- Customisation Examples</strong></p><p><br></p><p><br></p><p>Various options are available to allow you to customise your end user portal. These can be set and adjusted easily in the UI. This includes changing elements such as your portal title, colour and logo. However, custom CSS can be created and applied to your end user portal to achieve further customisation that is not available in the UI. In this guide we will cover how to use CSS to customise your portal. </p><p><br></p><p>For information on customising the look of the end user portal using settings available in the UI checkout <a target="_blank" rel="noopener noreferrer" data-fr-linked="true" href="https://usehalo.com/haloitsm/guides/1070/" data-pasted="true">Self-Service Portal Customisation</a>.</p><p><br></p><p><strong><span style="font-size: 14pt;">Adding CSS</span></strong></p><p>To add CSS to your portal head to Configuration > Self Service Portal > Custom CSS (button). </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImMwNGE5YWI2LWM1ZDQtNDE4YS1hNWNjLTg4NTExODhmYzhhZCJ9.Q7V0IDK2jyXKMlU0cpFu0YeUH3NRPVJinfg8sNqq4uc" class="fr-fic fr-fil fr-dib" width="759" style="width: 761px; height: 354.217px;" height="354"></p><p><strong><span style="font-size: 10pt;">Fig 1. Add Custom CSS</span></strong></p><p><br></p><p>Here, you can call on a CSS selector and add declarations to it, these declarations are then applied as styling to any html elements that match that CSS selector.</p><p><br></p><p>The HTML elements in the Halo portal are fixed, but each one is associated with its own CSS selector. To style a particular element, you apply your styling rules to the relevant selector. </p><p><br></p><p><strong><span style="font-size: 14pt;">Finding a Selector</span></strong></p><p>To find which selector an element uses you can right click on the element you would like to customise and 'inspect' it. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjNlMWM4NWY3LTQyN2MtNGI2Yi05ZmFiLTJmYjc5YjZjODFiZSJ9.7CvJkKEVRwWnl3kzmK3x1mJfsJ1kh366yShJGjN7CuI" class="fr-fic fr-fil fr-dib" width="1196" style="width: 1198px; height: 632.758px;" height="633"></p><p><strong><span style="font-size: 10pt;">Fig 2. Inspect an Element</span></strong></p><p><br></p><p>In the figure 2 example a button in the portal is being inspected. </p><p><br></p><p>Doing this will bring up the console containing the html for this element.</p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImE3ZDU5Y2RhLTU5ZmItNGE0OC1hMGY2LTdlZmIxN2IyNGY5MSJ9.XewhBYA_Bv4rjWT7vKqaahvEQQV1XN4Yl4-JCThzp5E" class="fr-fic fr-fil fr-dib" style="width: 1515px; height: 572.919px;" width="1513" height="573"></p><p><strong><span style="font-size: 10pt;">Fig 3. Console showing html for element</span></strong></p><p><br></p><p>Here, you will be able to see the class attributed to the container (div) the element is in, the class tells us which selector styling will be coming from. In the figure x example the selector 'card dashbtn noborder' is being used to style the shape of the button. When using this spaces will need to be replaced with '.'. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjBlOTgzYjllLWJiNTYtNGY4ZC04ODRiLWVkMjBhZjZhNzMyZSJ9.VoDD0y3SKpiMfx9UWEZ2Y9VrcZUGGG0-RRYCsMDKlCU" class="fr-fic fr-fil fr-dib" width="1233" style="width: 1235px; height: 534.054px;" height="534"></p><p><strong><span style="font-size: 10pt;">Fig 4. Element Class</span></strong></p><p><br></p><p>Hovering over a div in the console will highlight the element of the page it controls. It will also show the CSS selector used to style it. </p><p><br></p><p>Once you have found a selector you can apply styling rules to it to customise it. In the figure 5 example I have creating styling rules that will change the background colour of the buttons on the portal homepage. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImM5ZDBhYWM0LTY0OTAtNDAxOS05YjZhLWU4ZGJlNGE3ZDI5ZiJ9.LKDJDTdnu0q6LetbgVX0Crct81Ru-GmaOf1_sWU4UEo" class="fr-fic fr-fil fr-dib" width="570" style="width: 572px; height: 572px;" height="572"></p><p><strong><span style="font-size: 10pt;">Fig 5. CSS to style portal button background colour</span></strong></p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6Ijc1OWFhYzZhLWRhMzgtNDg0Zi1iZWQyLTZhNjc0Y2Q5MTVjZSJ9.Dg5P-1ScxZTceAAV2H0eh7cnTCr5hE5ozG7cxmQ4E2U" class="fr-fic fr-fil fr-dib" width="1291" style="width: 1293px; height: 499.893px;" height="500"></p><p><strong><span style="font-size: 10pt;">Fig 6. CSS applied to change button colours</span></strong></p><p><br></p><p><strong><span style="font-size: 14pt;">Customisation Examples</span></strong></p><p>In this section we will run through how to customise some common elements in the portal using CSS.</p><p><br></p><p><strong><span style="font-size: 12pt;">Customise Portal Title</span></strong></p><p>The portal title is customised using the following selector:</p><ul><li>.search-title</li></ul><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjdmMWE3NWNlLThmMjQtNDZlYS1hZTMxLWMwNDhhODk4ZDZkNSJ9.zka0O8vG5fs6kY2my1EpWje4E9JHeFFjA7guMDrZ9hQ" class="fr-fic fr-fil fr-dib" width="1143" style="width: 1145px; height: 450.541px;" height="451"></p><p><strong><span style="font-size: 10pt;">Fig 7. Portal Title</span></strong></p><p><br></p><p>Adding styling rules to this selector will change how the Portal title text will look. </p><p><br></p><p>In the figure x example CSS is applied to change the font size, increase the font weight and increase the distance between the title and the search bar. The following CSS was used:</p><p data-pasted="true"><em>.portal .search-title {</em></p><p><em> font-size: 2.0rem;</em></p><p><em> font-weight: 700;</em></p><p><em> font-family: 'Poppins', sans-serif;</em></p><p><em> margin-bottom:70px;</em></p><p><em>}</em></p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImE4MTRmOTExLWExZDUtNDE5NC04OTliLTg4NzI3YWY2MTBjNiJ9.wFyVkMXo9G6uthXfuIT2eY4s8BsY9RWMcndRT7AyCcY" class="fr-fic fr-fil fr-dib" width="1318" style="width: 1320px; height: 527.134px;" height="527"></p><p><strong><span style="font-size: 10pt;">Fig 8. Portal Title after styling applied</span></strong></p><p><br></p><p><strong><span style="font-size: 12pt;">Customise Search Bar</span></strong></p><p data-pasted="true">The portal search bar is customised using the following selector:</p><ul><li>.searchbox </li></ul><p><br></p><p>This will apply to all search bars in the portal. </p><p><br></p><p>In the figure x example CSS is applied to change the size of the search box and align this centrally. The following CSS was used:</p><p data-pasted="true"><em>.searchbox {</em></p><p><em> height: 60px;</em></p><p><em> width:400px;</em></p><p style="margin-left: 20px;"><em> margin: 0 auto;</em></p><p><em> border-radius: 15px !important;</em></p><p><em>}</em></p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImI0N2M4ODNjLWY3MTYtNDJhMi05NTg3LWM2ZmRiN2NiYzU4YyJ9.VkEm5agmMvVXWYBu9tZmf6KZay-jL97ulW19jZ2dpKE" class="fr-fic fr-fil fr-dib" width="1260" style="width: 1262px; height: 479.95px;" height="480"></p><p><strong><span style="font-size: 10pt;">Fig 9. Portal Search bar after styling applied</span></strong></p><p><br></p><p><strong><span style="font-size: 12pt;">Customise Homepage Buttons</span></strong></p><p data-pasted="true">The portal homepage buttons are customised using the following selector:</p><ul><li>button.card.dashbtn.noborder</li></ul><p><br></p><p>This will apply to all the buttons on the homepage. </p><p><br></p><p data-pasted="true">In the figure 10 example CSS is applied to change the shape of the buttons to circles. The following CSS was used:</p><p data-pasted="true"><em>button.card.dashbtn.noborder {</em></p><p><em> width: 300px;</em></p><p><em> height: 300px;</em></p><p><em> border-radius: 50%;</em></p><p><em> border: 2px solid #C7DBF2;</em></p><p><em> display: flex;</em></p><p><em> align-items: center;</em></p><p><em> justify-content: center;</em></p><p><em>}</em></p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImYyMTk3ZTI0LTI0ZDMtNGExMi05MzNmLTQzMjI3MzU1YjE1ZCJ9.7-tUOvF6ON9nHudjtxKXzRdpxaSv1ey2Vpl783opnNc" class="fr-fic fr-fil fr-dib" width="1018" style="width: 1020px; height: 589.3px;" height="589"></p><p><strong><span style="font-size: 10pt;">Fig 10. Portal Buttons after styling being applied </span></strong></p><p><br></p><p><br></p>
