Building the sign-in and home pages
The sign-in page, the home page and the footer of every theme are built from blocks you add, arrange and configure. This page walks through the builder, every block type and the settings that matter most.
Before you begin
- You need an administrator role with access to Appearance → Portal Themes.
- Work on your own theme, not a ready-made one. Ready-made (base) themes are read-only; duplicate one first, as described on Themes.
- Decide which address will show the theme. You can preview without binding it anywhere.
How the builder works
Open a theme with Edit. Two tabs hold page layouts:
- Login Page – the sign-in page people see before they sign in.
- After Login – the home page behind the session tabs: what people see before they open anything, and whenever they return to Home.
The footer has its own builder at the bottom of the Base tab (see The footer).
Each builder is a column of blocks, top to bottom. Above them is an add-block row listing the block types that page allows. Each block has a header with a grip (⠿) for dragging, its name, and buttons to move it up or down, duplicate it and remove it. Its settings sit underneath.
Safety nets you can rely on
- Nobody gets locked out. If a sign-in page has no Sign-in form block, the form is added at the end anyway. If a home page has no Apps panel, the list of resources is added anyway.
- The plain page. Adding
?plain=1to any portal address, for example/portal/login?plain=1, shows the page with no theme at all. Use it if Custom CSS ever hides something you need. - Words with markup are cleaned. Text you type is shown as text. The HTML block accepts a short list of safe formatting and removes everything else, including scripts.
Build or change a page
- Open the theme. Go to Appearance → Portal Themes and click Edit on your theme.
- Choose the page. Click the Login Page or After Login tab.
- Add a block. Click a block type in the add-block row. It appears at the bottom of the list.
- Move it into place. Drag it by its grip, or use the up and down arrows. You can drag a block into or out of a column.
- Configure it. Fill in its settings. Click the caret in a block's header to fold it away while you work on others; a folded block can still be dragged.
- Preview. Click Preview page. A pop-up shows the page with your current blocks, saved or not, and refreshes itself while you edit.
- Save. Click Save. Anybody who reaches an address using this theme sees the new page on their next page load.
A page may hold up to 60 blocks, counting the blocks inside columns. Some blocks may appear only once per page (the Sign-in form, the Apps panel, Search, Sort, the Layout switch, the Hero panel, Password expiry); the builder stops you adding a second.
Block types
The table shows every block and where it can be used.
| Block | What it does | Sign-in | Home | Footer |
|---|---|---|---|---|
| Sign-in form | The username and password form, and any sign-in buttons. See below. | Yes | — | — |
| Logo | The theme's logo or mini logo, or a picture you upload in its place. | Yes | Yes | Yes |
| Heading | A title. {user} is replaced by the signed-in person's name on the home page. | Yes | Yes | Yes |
| Text | A paragraph of plain text. Also accepts {user}. | Yes | Yes | Yes |
| HTML | Formatted text written in a rich editor: bold, italic, underline, two heading sizes, lists, quotes, links, a horizontal rule, and a source view. | Yes | Yes | Yes |
| Image | A picture, uploaded or by address, with alternative text and an optional link. | Yes | Yes | Yes |
| Button | A button that links to a web address (https://, mailto: or a path starting /). | Yes | Yes | Yes |
| Spacer / Divider | Empty space, or a horizontal line. | Yes | Yes | Yes |
| Social icons | Small marks linking to your social pages. | Yes | Yes | Yes |
| Contact list | Up to four rows, each a mark, a title and a line, such as a service-desk phone number and email address. | Yes | Yes | Yes |
| Columns | Two to five side-by-side columns that hold other blocks. See below. | Yes | Yes | Yes |
| Announcements | The notice board for Announcements. | Yes | Yes | — |
| Hero panel | The header bar with the logo, session tabs and the user menu. See below. | — | Yes | — |
| Apps panel | The person's resources. See below. | — | Yes | — |
| Search | A box that filters the resources as the person types. | — | Yes | — |
| Sort | A menu to sort resources by name, type, host or recently used. | — | Yes | — |
| Layout switch | Grid and List buttons so each person chooses how resources are shown. Display as icon and text, icon only, or text only. | — | Yes | — |
| Password expiry | Tells the person when their password expires, or "Password never expires". Shows nothing when the date cannot be read. | — | Yes | Yes |
The Sign-in form block
This block draws the form people sign in with. All of its extra settings are off or empty unless you set them, so an unedited form looks plain.
| Setting | What it does | Default |
|---|---|---|
| Title / Subtitle | A heading above the form and an optional line under it. | A standard heading; no subtitle |
| Button text, username label, password label | The words on the form. Each can be written per language. | Standard wording |
| Placeholders | Grey hint text inside the empty username and password boxes. | Empty |
| Badge | A round mark beside the heading: none, lock, user, shield or key. | None |
| Field icons | A person mark in the username box and a padlock in the password box. | Off |
| Password eye | An eye at the end of the password box that shows what was typed. | Off |
| Domain dropdown position | Where the list of sign-in domains appears when more than one Active Directory domain is offered, or hidden. | — |
Hiding the domain list New in 2.0
Set Domain dropdown position to hidden and the theme draws no domain list at all. People type a bare username and it goes to the address's own default domain, or the installation's default if the address has none. Pair it with the per-address default domain on Tenancy & Branding. More on domains is on Active Directory and multiple domains.
The Hero panel
The Hero is the frame around the portal after sign-in: the logo, the tabs of open sessions, the session tools and the person's account menu. It is set on the After Login tab but applies to every portal page except the sign-in page. A theme without a Hero block shows a standard bar across the top.
| Setting | What it does | Default |
|---|---|---|
| Where it sits | Top, left, right or bottom. Left and right turn it into a side panel with the logo at the top, the session tabs as a list and the account menu at the foot. On a narrow screen (under about 760 px) a side panel becomes a bar. | Top |
| Logo | The full logo, the mini logo, or no logo. | Logo |
| User area | Show the person's name and picture, or just the picture. | Full |
| Side panel width | 140–420 pixels. Shown only for left and right. | — |
| Session tabs | Auto shows icons only in a top or bottom bar and icon with name in a side panel. You can force icon only, or icon with name. | Auto |
| Sticky | Hides the panel off the edge of the screen with a small handle to slide it in over the page. The session underneath keeps the whole screen. The panel closes again on Escape, on a click elsewhere, or when you click into a session. | Off |
| Home tab | Show or hide the Home tab. Hiding it suits a portal that only ever runs one application (see single-application portals). | On |
| Favourites tab | Show or hide the Favourites tab, where people find resources they have starred. | On |
The Apps panel
The Apps panel lists the applications, desktops and web applications the signed-in person may open. It never shows anything the person is not entitled to. Its settings are grouped into the block's main settings and two folds, Card view and Container view, each with a switch on its header.
Main settings
| Setting | What it does | Default |
|---|---|---|
| Default view | Grid or list. This is only the starting view; a person who uses the Layout switch keeps their own choice in their browser. | Grid |
| Apps in a row | How many tiles across in grid view. A narrow screen shows fewer. | 4 |
| Category view | Panel (folding sections, one per category), Tabs (one tab per category), Folder (a folder tile per category, with uncategorised resources loose beside them), or No category (one flat list). | Panel |
| Show the host name | Shows which host a resource runs on. | On |
| Show the Launch button | Shows a Launch button on each card. The whole card opens the resource either way. | On |
| Type flag | Where the App / Desktop / Web flag sits on a card: top, bottom, or hidden. | Top |
Card view
Switch Card view off for frameless cards (no box, no padding). Switched on, it offers two rows of settings:
- Shape: card contents aligned left, centre or right (grid view); text style; and card width, typed as pixels (120–1200, such as
280or280px) or a percentage (10–100, such as25%, which gives four across). - Paint: card background, card border and corner radius (0–40 px). Leave a colour blank to use the theme's own colour, so the card keeps following the theme if you change it later.
- Hover colours below those rows.
Icons are drawn at the same size whatever they came from: an icon read from the program, one picked from the Icon Library, or one you uploaded.
Container view
Switch Container view on to draw a box around the whole panel, with padding and rounded corners. Set its background, border and the background colour of the category header strips.
Columns
A Columns block puts two to five columns side by side, with a gap of 0–80 pixels between them. Drag any block into a column, including the Sign-in form or the Apps panel. Columns stack into one on a narrow screen (under about 760 px).
- Columns go one level deep: a Columns block inside a column is not allowed.
- If you reduce the number of columns, the blocks in the removed columns are moved into the last remaining column, not deleted.
- Duplicate is unavailable on a Columns block that holds a once-per-page block such as the Sign-in form.
Advanced settings on every block
Every block has a closed Advanced fold at the bottom. None of these has a default; a block whose Advanced settings are untouched looks exactly as the theme draws it.
| Setting | What it does | Default |
|---|---|---|
| CSS class | One or more class names (up to six, 64 characters each) added to the block, which you then style in the theme's Custom CSS. | — |
| Space above (px) | Extra space above the block, 0–400. | — |
| Space below (px) | Extra space below the block, 0–400. | — |
| Inner padding (px) | Space inside the block's edge, 0–400. | — |
A value outside the range is refused when you save, with a message, rather than being changed quietly.
Pictures in blocks
The Image block and the Logo block's override field each show the current picture, its address, and a button to choose a file. A chosen file is stored inside the theme, so nothing has to be copied to the server separately and the picture travels with the theme when you export it.
- One picture may be up to about 180 KB; the editor refuses a larger file with a message.
- One page's whole layout has an overall size limit. If adding a picture would go over it, the editor says so before accepting it. Use a smaller picture, or enter the
https://address of a picture hosted elsewhere. - Only image files are accepted.
Writing blocks in several languages
The word-bearing settings of a block (the sign-in form's title, labels and button, Heading and Text, the HTML block, an Image's alternative text, a Button's text and the Search placeholder) each have a small language menu above the box when more than one language is switched on. The first entry, Original, is what anybody whose language has no text of its own sees. Choose a language and type its version; languages without text are marked "not written". CSS classes, links, colours and sizes are the same for every language. See Languages.
Example: a sign-in page with a help panel
An IT team wants the sign-in form on the right and service-desk details on the left.
- Start clean. On the Login Page tab, remove everything except the Sign-in form.
- Add columns. Add a Columns block and set it to 2.
- Fill the left column. Drag a Logo, a Heading ("Need help?") and a Contact list into the left column. In the Contact list, add the service-desk phone number and email address.
- Fill the right column. Drag the Sign-in form into the right column. Turn on Field icons and Password eye.
- Add a footer line. On the Base tab's footer, add a Text block with the company's copyright line.
- Check and save. Click Preview page, narrow the window to check the columns stack on a phone, then Save.
If something goes wrong
Save is refused
The message names the setting. Common causes: a Button or Image link without a scheme (type https://www.example.com, not www.example.com), a spacing value outside 0–400, more than six CSS classes, or a card width outside its range. The setting may be inside a folded block or a closed Advanced section.
The preview does not show my logo or colour change
The preview uses your unsaved blocks but the saved colours and logo. Save the Base tab, then preview again.
Some HTML I pasted shows as plain text or disappears
The HTML block keeps a short list of safe formatting and removes other markup, styles and scripts. Use the toolbar for formatting, and the theme's Custom CSS for styling.
A search box appears with nothing to search
Search and Sort are hidden automatically for a person with no resources. If a person reports an empty home page, check their access on Giving people access to resources.
Related pages
Themes
Colours, logos, backgrounds, footer and packages.
Categories, folders and icons
How resources are grouped in the Apps panel.
Announcements
What goes on the notice board block.
Opening applications and desktops
The home page from the user's side.