Branding

Logos, Icons

../../../_images/branding.png

You can customize the appearance of the software by uploading a logo (400 x 125 pixel PNG) and/or an icon (256 x 256 pixel PNG).

If you don’t have your images in the right format or size, they will be automatically converted, but may be distorted. We recommend using transparent backgrounds for best appearance.

Make sure to rebuild your MSI after uploading.

Renaming Shortcuts

If you are looking for a way to change the name of the Helpdesk Button shortcut we recommend the method in our documentation on installations this method is used in our deployment scripts.

Pin to Taskbar

../../../_images/branding2.png

One of the ways to launch the software is via a shortcut that can be pinned to the taskbar. The icon for this shortcut is also configurable in the same way as the standard icon/logo. Take note: this icon is rendered significantly smaller than the standard icon while pinned. Using something easily recognizable such as our HELP logo is recommended.

../../../_images/taskbar.png

GUI Layout and Colors

The layout and colors in the GUI can be modified by customizing the CSS. The CSS which controls most of the look and feel of the GUI is located at “C:\Program Files (x86)\Tier2Tickets\resources\style.css” in most cases.

The classes and variables in that file can be overridden by your own settings by putting them in a file named “custom.css” and uploading it the same way as a custom script.

Global Color Modification

This section is for if you’d like to modify colors globally (like if you don’t like our general greens, reds, or teal!) As an example, here is a custom.css file which would change colors globally. In this case, making the GUI completely lime-green and pink and terrible:

@const color_01: #de69ac;
@const color_02: #e591c1;
@const color_03: #d8d8d8;
@const color_04: #14a8a8;
@const color_05: #f2804d;
@const color_06: #ffb38e;
@const color_07: #0dfd0d;
@const color_08: #848484;
@const color_09: #00f000;

Original Color Key for reference:

color_01: #219653; hdb_green - success in general, .banner--good
color_02: #1A6E3E; hdb_greendark
color_03: #272727; hdb_black - headings
color_04: #EB5757; hdb_red - errors and warnings
color_05: #0d7fb2; hdb_teal - checkmark and radio buttons selected, next buttons, banner-question
color_06: #004C71; hdb_tealdark
color_07: #F2F2F2; hdb_grey - Checkmark and radiobuttons unselected
color_08: #7b7b7b; hdb_greydark - text
color_09: #ffffff; hdb_white */

Specific Element Modification

If you would like to modify specific items, here are a few labelled to help you ID them. In general, you will be changing background-color. Be sure to override our inline settings with !important. The following would make the success banner red instead of green.

.banner--good {background-color: #EB5757 !important;}

Here are the other main elements you may want to change colors of:

.banner--good
.banner--bad
.banner--question
.button-primary (this is the teal button)
.button-secondary (This is the generally white button)
.thinking (this is the cover overlay to the background when app is thinking)