Create and brand your first portal

To follow this tutorial, you need:

We’ll create a brand portal called Tutorial portal and a colour scheme called Tutorial colours. Then we’ll apply the scheme to the portal only, style its text, headings, and buttons, and give it a colour palette.

Everything we change in this tutorial applies to the new portal alone. Your other portals, and your workspace’s default theme, stay exactly as they are.

The tutorial takes about 30 minutes, including the videos, in seven steps:

Portals are created in Platform Administration.

We’re going to create the portal and check its starting state.

You’ll notice that:

An inactive portal is hidden from everyone except administrators. That gives us a safe place to work: nothing we do in this tutorial is visible to your users until step 7.

A brand portal supports typography and colour palettes, which we’ll use later. You can’t change a portal’s type after creating it.

A colour scheme is a named set of colours that portals can use. Schemes are created in one place, then applied wherever they’re needed.

We’re going to create a scheme for our portal.

You’ll notice that:

If the checker displays a warning, select it to read why, and try a darker Primary colour.

Now select Workspace Theme in the Theming menu, without changing anything.

Workspace Theme sets the default scheme, logo, and favicon for your whole workspace, and every portal inherits it unless told otherwise.

Leave the page without saving. In the next step, we’ll apply our scheme to the tutorial portal alone.

Each portal has its own Theming panel, opened from inside the portal.

We’re going to open the tutorial portal and switch it to our scheme.

You’ll notice that:

That’s the difference between the two places we’ve visited: Workspace Theme sets the default for everything, and a portal’s Theming panel overrides it for that portal only.

The CMS Appearance cards in the same panel control how text looks on the portal’s CMS pages.

We’re going to set a font for body text and make the main heading stand out.

You’ll notice that the changes preview in the panel as you make them.

These styles have nowhere to appear yet, because the portal has no CMS pages. They’ll apply automatically when we add text to a page in the third tutorial, so there’s nothing to set again later.

Buttons on CMS pages come in three types, Primary, Secondary, and Tertiary, and each type is styled here once for the whole portal.

We’re going to give primary buttons rounded corners.

You’ll notice that the button preview in the panel now has rounded corners and uses the primary colour from Tutorial colours.

Every primary button added to this portal’s pages will look like this.

A colour palette is a named set of brand colours that a CMS page can display, for example on a brand guidelines page. Palettes are available in brand portals only, which is why we chose that type in step 1.

We’re going to create a palette of our two tutorial colours.

You’ll notice that Tutorial palette appears at the bottom of the Colour Palettes list.

A palette doesn’t change how the portal looks. It becomes available to the colour palette widget when you build a page.

The portal is styled but still inactive. Activating it makes it available to your users.

When you’re ready to activate it:

You’ll notice that disappears from the card, and the portal becomes available to users. To hide it again, open the same menu and select Deactivate.

Here’s what we’ve built:

In this tutorial, you’ve learned how to:

Next, continue with Add your first portal pages to give the portal its first pages.

Add and manage portals, Configure portal styling, and Manage workspace theming and colour schemes cover every portal and theming option. Understanding workspaces and portals explains how portals and workspaces relate.