Portal branding and design

Portal

Go to User Interface > Portal to change the look of the portal to match your organization’s brand.

You can easily edit the colors, fonts, spacing and welcome text.

If you want extra control over the design of the portal, you can use the advanced edit function to change the HTML, Javascript and CSS of the portal.

You can also Portal templates which gives you the greatest degree of control over layout and content.

Adding a logo

You can add your logo at the top left of the portal.

Go to User Interface > Portal.

In the black portal editor menu, expand the LOGO section by clicking the small, right-pointing arrow.

Click Choose file to upload a logo image.

Click the green Preview Changes button at the top to see the logo.

Click Save Changes to apply your logo to the live portal, or click Discard Changes to abandon the change.

Custom welcome text

You should customize the welcome text on the portal so that your users know that this is the official support portal for your organization.

In the black portal editor menu, expand the SITE COPY section by clicking the small, right-pointing arrow.

Enter a title and welcome message.

Note

Consider including alternative contact methods (such as your ticket email accounts or support phone numbers), your support hours, and links to your social media accounts.

Click the Preview Welcome Message button to see the message on the portal.

Click Save Changes to apply your text to the live portal, or click Discard Changes to abandon the change.

Color editing

You can pick custom colors for most of the elements of the portal.

Go to User Interface > Portal.

In the black portal editor menu, expand the section you want by clicking the small, right-pointing arrow.

These are the sections you can edit to change different aspects of the portal colors:

COLORS: Background and main colors

FONT COLORS: Text colors

FORM COLORS: Colors applied to forms

GENERIC COLORS: Colors for social media elements and fading text

SECONDARY COLORS: Button and popup colors

WELCOME COLORS: Colors applied to the welcome text area

After you open a section, click on the square showing the color you want to edit.

The column control at the right lets you pick a basic color. Click within the column to select a color.

You can then refine the color you want with the larger square at left. Click to refine the shade.

Once you have selected the color you want, click choose.

Click Preview Changes at the top to apply the color change to the preview of the portal on the right. Depending on which color you edited, you may find that you need to look at a different section of the portal or use a portal function (like search or submitting a ticket) to see your change.

Click Save Changes to apply your color changes to the live portal, or click Discard Changes to abandon your changes.

Font editing

You can change the style of text used on the portal by editing the FONTS or FONT SIZES sections.

Click Preview Changes at the top to apply the font change to the preview of the portal on the right.

Click Save Changes to apply your font changes to the live portal, or click Discard Changes to abandon your changes.

Adding custom HTML

You can insert a custom header and footer which will be displayed on all the pages of the web interface. You need to enter this as HTML code.

You can also enter code that will be inserted into the <head> element of the portal’s HTML: this allows you to insert CSS or Javascript into the portal.

../_images/portal-custom-heads.png ../_images/portal-custom-footer.png

Published: 23/03/2017

Last updated: 27/10/2017