Changing your house style: colours, font and layout

In 4planning you decide exactly how your environment looks, from your brand colour to the shape of the cards on a phone. All these settings live together on a single tab, so you can go through your whole house style in one go.

Step 1: Go to Settings

1. Log in to your 4planning environment.
2. Open the Settings section.

Step 2: Open Colours & display

1. Go to Appearance.
2. Open the Colours & display tab.

You'll find every setting explained below here.

Primary and secondary colour

1. Click the colour setting.
2. Select a colour from the available palette, or enter your own colour code (a HEX colour, for example).
3. Select a primary and a secondary colour.

The chosen colours are applied immediately in your environment, for example on buttons, the top bar and page headers. Test the colours thoroughly: make sure there's enough contrast so your environment stays readable everywhere.

Font

1. Open the list of available fonts.
2. Choose a font from the standard selection.

The choice is applied immediately, so you see straight away how the font looks in your environment.

Event cards

Decide how event cards look on the calendar.

1. Click one of the three previews: horizontal with the photo on the left, a full photo with an overlay, or the image on top with the details underneath.

The card updates immediately so you see exactly what you're choosing.

Match cards

If your environment has the Matches feature turned on, you'll also see this setting.

1. Choose between a plain display in your own house style colour, or your own background photo with a dark overlay.

If you haven't set a background photo yet, set one first via the Background tab to use this option.

Card shape on phone

Decide how cards look on a phone.

1. Choose Full width for more room for the content, which looks more like an app, or With margin so each card stands out on its own against the background.

There's no difference between the two on a computer or tablet.

Top bar on phone

Decide how the bar at the top of the screen looks on a phone.

1. Choose Glass (the page shows through as you scroll), Brand colour (the bar takes your own colour), or Traditional (the familiar, solid bar).

Again, there's no difference on a computer.

Notifications

Decide how the message that appears in the top right after, say, saving a change looks.

1. Choose Glass (the page shows through), Full glass (the whole panel takes the colour of the message), or Traditional (a plain white card).

The wording of the message doesn't change, only how it looks.

Step 3: Save your changes

1. Click Save at the bottom of the page.

All your choices are applied immediately in your environment.

Tips for effective use

• Use colours that match your logo and house style, and make sure there's enough contrast.
• Choose a font that's easy to read on both desktop and mobile.
• Feel free to try out the different card layouts: you get an instant preview, so it's easy to find the style that fits your organisation best.

Good to know

• All these choices are visible to every user in your organisation.
• You can change any setting again at any time.
• Event cards, match cards, card shape, the top bar and notifications make no difference on a computer; those settings only affect how things look on phone and tablet.