Login Screen Designer

Login Screen Designer

Make the screens people see before they sign in look like your organisation — without writing any HTML or CSS, and without the risks that would come with it.

System → Branding.

For developers: Login Screen Designer — Developer Guide.

Three screens

Each is designed separately, because they are seen by different people:

Screen	Who sees it	Address
Analyst login	your service desk staff	auth/login.php
Self-service login	the people raising tickets	self-service/login.php
Landing page	an analyst who has just signed in	index.php

Pick the screen at the top of the designer; everything below applies to that one. Settings are kept separately, so the customer-facing portal can look nothing like the internal one.

What you can change

Layout — where the sign-in form sits (left, centre, right) and how the panel looks (solid, glass, flat). The landing page has no form, so it has neither of those.

Background — a gradient between two colours in one of five directions, a flat colour, an uploaded image, or the theme's own background. A background image can be dimmed so the form stays readable on top of a busy photograph.

Logo — your uploaded logo, at a size you choose, placed above the form, in the top-left, across the top-centre, or hidden.

The size is two settings, and both are maxima: a maximum width and a maximum height. The logo is drawn as large as it can be without exceeding either, and it always keeps its own proportions — you are describing the box it has to fit inside, not stretching it to fill one.

Which of the two you reach for depends on the shape of your logo, and this is worth knowing because the wrong one is frustrating. A wide logo — a wordmark, say — is held back by its width, and the height setting will never come into it. A square or tall logo is the opposite case: ask for 250px wide and you get something 250px tall, which is most of a sign-in card. For that one, set the maximum height and leave the width alone.

Maximum height starts at no limit, which is how the screens behaved before the setting existed, so nothing moves until you ask it to.

Words — a heading, up to two tagline lines under it, and an accent colour used for the sign-in button and links. On the portal sign-in, Tagline 2 takes the place of "Sign in to view your tickets"; leave it empty to keep that line. The landing page has room for one tagline only, so Tagline 2 is not offered there.

Banner strip — a line of text across the top or the bottom, with its own background and text colours. Useful for "Authorised users only", a support number, or a maintenance notice.

Footer strip — a line of text at the bottom, for a company name or a policy reminder.

The live preview

Preview opens the real screen in a second tab. Change anything in the designer and that tab updates immediately — no saving, no refreshing. It is the actual page, not a mock-up, so what you see is exactly what people will get.

The preview also works in the panel beside the controls, scaled down to fit.

Presets

A set of ready-made looks to start from. Pick one, then change whatever you like — a preset just fills the controls in, so nothing is locked afterwards.

🔑 If you lock yourself out

It is genuinely possible to make the login screen unusable: white text on a white background, or a logo scaled over the sign-in form. And once you have, nobody can sign in to undo it — including you.

So there is always a way back:

?nobranding=1

Add it to the address of any of the three screens and you get the plain, unstyled version. For example: https://yourdesk.example/auth/login.php?nobranding=1

Sign in that way, go to System → Branding, and fix it.

This is not a secret and it is not a security hole — it changes appearance only. It does not skip the password, it does not skip multi-factor authentication, and it gives nobody any access they did not already have.

The designer also warns you when a colour combination is too low-contrast to read before you get that far.

What you cannot do, and why

There is no "custom CSS" box and no "custom HTML" box, and there deliberately never will be.

The login page is the one page anybody on the internet can look at without an account, and the one page where every single user types their password. If an administrator could put arbitrary code on it — or if anybody who ever compromised an administrator account could — that code would run for every user, on the password form, before anyone had signed in. It is the highest-value place in the whole application to put something malicious.

So the designer only ever accepts values: a colour is a colour, a position is one of a list, a size is a number in a range, and your text is text. FreeITSM turns those into the styling. You never write any, which means nothing you type can become code.

If there is a look you want and cannot get, the answer is another proper control — please ask for one — rather than an escape hatch that would undo the guarantee for everybody.

Related pages

• Login Screen Designer — Developer Guide
• Landing Page — the page an analyst sees after signing in
• Theming and Dark Mode — the look of the app once signed in
• Self-Service Portal — the portal itself
• Security