Branding the Self Service Portal - edmozley/freeitsm GitHub Wiki

Branding the self-service portal

The portal is the only part of FreeITSM most of your colleagues ever see. From 2.5.0 it can be made to look like yours rather than like the admin side.

Everything here is under System → Self-service portal, and every setting is optional — leave it alone and the portal looks exactly as it did.

A logo of its own

Upload a PNG or JPG up to 2MB. The current one is shown beside the picker with a Remove button; removing it falls back to the main logo under System → Branding.

A separate portal logo earns its keep in two situations: the service desk trades under another name, or the main logo was drawn for a dark app header and looks wrong on a lighter page.

SVG is not accepted. An SVG is XML and can carry script, and this image is served to everyone who visits the portal. That is one deliberate exception to sharpness in exchange for not serving executable content to your colleagues.

Where the logo goes

In the top bar (the default) — beside the portal name, small and always on screen.
At the top of the page — once, larger, on the page background, where it has room to read as branding rather than as an icon.

Put it on the page and the bar shows the portal name alone. Repeating the same logo twice on one screen is clutter, and falling back to the FreeITSM mark would put our branding next to yours.

An uploaded logo keeps its own colours. The bundled FreeITSM mark is forced to white, because it is a single-colour logo drawn to sit on any header colour — yours is not, and flattening it would defeat the point of uploading it.

Colours

Two, independent of the analyst side:

Header colour — the bar across the top.
Table header colour — the headings inside lists.

Both take a six-digit hex value, or leave them empty to follow the theme. A live preview sits beside the settings so you can see the result before saving.

A background pattern

Five choices, or none:


Dots, Grid, Diagonal	Quiet texture. Barely there by design.
Flow	A single sweep of fine curved lines across the lower half of the page.
Mesh	Three overlapping ribbons of fine lines — the showier one.

All are drawn faintly enough to sit behind a page of text without competing with it, and they are generated images rather than photographs, so they cost nothing to load and stay sharp at any size.

If a pattern ever looks stronger than it should, hard-refresh (Ctrl-F5). The browser caches the stylesheet, and a change to how faint they are does not reach you until it reloads.