---
title: How to customize your meeting page style with ZooMeet
description: A meeting theme sets the layout of your meeting pages. Style settings adjust that layout to match your brand. They cover the main colour, button corners, sidebar side, thumbnail, site header, page background, fonts and your own CSS. Your meeting…
url: "https://sovlix.com/docs/zoomeet-customize-event-page-style/"
updated: "2026-10-06"
category: ZooMeet / Meeting page design
---

# How to customize your meeting page style with ZooMeet

A meeting theme sets the layout of your meeting pages. Style settings adjust that layout to match your brand. They cover the main colour, button corners, sidebar side, thumbnail, site header, page background, fonts and your own CSS.

Your meeting pages can use the same colours and buttons as the rest of your site. Below you set each style option in turn. Style settings apply to every theme, including meetings that use their own theme, so you set them once and every meeting page follows.

By the end of this guide, you will have:

- Your brand colour on buttons, countdowns and highlights
- A button shape that matches your site
- The sidebar, thumbnail and site header set the way you want
- A page background, heading font and body font that fit your brand, if you use ZooMeet Pro
- Your own CSS on meeting pages, if you need a change no setting covers
- Your style saved and live on every meeting page

**Estimated setup time:** 5 minutes. Each setting has a default you can go back to at any time.

## Before you begin

Make sure you have:

- ZooMeet installed and activated
- An administrator account on the site
- At least one published meeting, so you can check the result
- ZooMeet Pro activated, if you want **Page background**, **Heading font**, **Body font** or **Custom CSS**

Let's get started.

## Step 1: Open the Style group

Style settings sit right below the theme gallery, so you can see which theme they apply to.

1. In the WordPress admin menu, go to **ZooMeet** > **Settings**.
2. Under **Appearance**, click **Event themes**.
3. Scroll below the theme gallery to the **Style** group. Its summary reads **Applies to every theme.**

[![Style group with Brand colour, Button shape, Sidebar position, Thumbnail, Site header and footer, Page background, Heading font, Body font and Custom CSS](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-01-style-group.webp)](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-01-style-group.webp)
All nine style settings in one place. Each row shows its current value.

**Note:** Without ZooMeet Pro, **Page background**, **Heading font**, **Body font** and **Custom CSS** show a **Pro** badge and an **Upgrade** link. The other five settings work in the free plugin.

## Step 2: Set the brand colour

Brand colour is "Used for buttons, the countdown and highlights.", so it is the setting visitors notice first.

1. In **Brand colour**, click a colour dot, for example the red dot, **Rose**.
2. Check the hex code of the chosen colour at the end of the row.

[![Brand colour row with the Rose preset selected](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-02-brand-colour.webp)](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-02-brand-colour.webp)
The chosen dot gets a dark ring, and its hex code appears at the end of the row.

To go back to the theme's own colour, click **Auto**.

**Note:** **Auto** uses each theme's built-in colour. The small dot beside Auto shows that colour for the theme selected in the gallery.

## Step 3: Pick a custom colour (optional)

If none of the presets matches your brand, pick the exact colour yourself.

1. Click the rainbow circle at the end of the colour row.
2. Drag in the colour square and the hue slider, or type a hex code in the field below them.
3. Click outside the picker, or press **Esc**, to close it.

[![Custom colour picker open with a colour square, hue slider and hex field](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-03-custom-colour.webp)](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-03-custom-colour.webp)
Use the hex field to match your brand colour exactly.

**Tip:** Colours you pick here are kept in a **Recent** row inside the picker, so you can reuse them later.

## Step 4: Choose a button shape

Button shape changes the join buttons and every other button on the meeting page.

1. In **Button shape**, click one option:
    - **Design default** keeps the theme's own corners.
    - **Sharp** gives square corners.
    - **Rounded** gives softly rounded corners.
    - **Pill** gives fully round ends.

[![Button shape row with Pill selected](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-04-button-shape.webp)](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-04-button-shape.webp)
Pill gives every button on the meeting page fully round ends.

## Step 5: Choose the sidebar position

Many themes put the meeting details in a column beside the main content. You decide which side it sits on.

1. In **Sidebar position**, click **Design default**, **Left** or **Right**.

[![Sidebar position row with Design default, Left and Right](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-05-sidebar-position.webp)](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-05-sidebar-position.webp)
Use Left or Right to move the details column on themes that have one.

**Design default** keeps the side each theme was drawn with.

## Step 6: Show or hide the thumbnail and site header

Hiding the thumbnail or your site header gives the meeting more room on the page.

1. In **Thumbnail**, click **Show** or **Hide**. The thumbnail is "The meeting featured image."
2. In **Site header and footer**, click **Show** or **Hide**. **Hide** removes your WordPress theme header and footer from meeting pages.

[![Thumbnail and Site header and footer rows, each with Show and Hide](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-06-thumbnail-header-footer.webp)](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-06-thumbnail-header-footer.webp)
Each meeting can still hide the header and footer in its own settings.

**Tip:** A single meeting can hide the header and footer with **Hide header and footer** in its **Page design** step, even when this setting is **Show**.

## Step 7: Set the page background

The page background sits behind the whole meeting page, so it sets the mood more than any other setting.

**Note:** **Page background** and **Custom background colour** require ZooMeet Pro.

1. In **Page background**, click one option:
    - **Design default** keeps the theme's own background.
    - **Soft tint** uses a light shade of your brand colour.
    - **Plain** uses plain white, or near black on the dark Studio theme.
    - **Custom** uses a colour you pick.
2. If you clicked **Custom**, a new row appears: **Custom background colour**. Click a preset, or click the rainbow circle for any colour.

[![Page background set to Custom, showing the Custom background colour row](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-07-page-background-custom.webp)](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-07-page-background-custom.webp)
Pick a light colour for light designs and a dark one for Studio, so text stays readable.

## Step 8: Choose the heading and body fonts

Fonts change the voice of the page more than colour does. ZooMeet uses fonts already on the visitor's device, so nothing extra loads and the page stays fast.

**Note:** **Heading font** and **Body font** require ZooMeet Pro.

1. Click the **Heading font** list. It sets "The meeting title and section headings."
2. Pick a font, for example **Serif** or **Rounded sans**.
3. Click the **Body font** list and pick a font for everything else on the page.

[![Heading font list open with Design default, System, Geometric sans, Humanist sans, Rounded sans, Neo-grotesque, Serif and Slab serif](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-08-font-list.webp)](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-08-font-list.webp)
Scroll the list for Transitional serif and Monospace. Design default keeps the theme's own fonts.

**Tip:** A serif heading with a sans-serif body is a safe pairing. Keep **Monospace** for headings on technical events; it is hard to read as body text.

## Step 9: Add custom CSS (optional)

When no setting covers what you want, add your own CSS. It is "Added to meeting pages only, after the theme styles", so it wins over them.

**Note:** **Custom CSS** requires ZooMeet Pro, and only administrators can change it.

1. Click in the **Custom CSS** box.
2. Type your CSS. Start each selector with `.gm` so it only touches the meeting, for example:

```
.gm .gm-title {
    letter-spacing: -0.02em;
}
```

[![Custom CSS box with a rule that tightens the meeting title letter spacing](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-09-custom-css.webp)](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-09-custom-css.webp)
An empty box shows this rule as a grey placeholder. It does nothing until you type your own rules.

**Important:** HTML and style tags are removed when you save. Custom CSS takes CSS only.

## Step 10: Check for "Not used by" hints

Some themes do not use every setting. If the theme selected in the gallery ignores one, its row shows a hint instead of the help text. For example: **Not used by the Lobby theme.**

1. Read the hint under each row.
2. Keep or change the setting as you like. It stays editable, because meetings that use their own theme can still use it.

[![Sidebar position and Thumbnail rows with the hint Not used by the Lobby theme](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-10-not-used-hint.webp)](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-10-not-used-hint.webp)
Lobby has no sidebar and no thumbnail, so these two settings do not change Lobby pages.

## Step 11: Save your changes

Nothing changes on your site until you save. As soon as you change a setting, a bar appears at the bottom of the screen with **You have unsaved changes**.

1. Click **Save changes**.
2. Wait for the confirmation message, **Appearance saved.**

[![Unsaved changes bar with Discard and Save changes, Save changes highlighted](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-11-save-changes.webp)](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-11-save-changes.webp)
Nothing changes on your site until you click Save changes.

To drop every change since the last save, click **Discard** instead.

## What visitors see

Open a meeting page in a private browser window. The style applies on top of the meeting's theme. Here is the Intro to Product Design meeting with the Paper theme, before and after.

[![Intro to Product Design with the Paper theme and default style settings](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-12-before-paper.webp)](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-12-before-paper.webp)
Before: Brand colour Auto, Button shape Design default and Page background Design default, so Paper uses its own blue.

[![Intro to Product Design with the Paper theme, Rose brand colour, Pill buttons and a soft tint background](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-13-after-paper.webp)](https://sovlix.com/wp-content/uploads/2026/10/zoomeet-customize-meeting-style-13-after-paper.webp)
After: Brand colour Rose, Button shape Pill and Page background Soft tint turn the join buttons, countdown, date badge and Zoom chip rose, on a light rose tint.

**Note:** This meeting uses Paper as its own theme, while the site default is a different theme. Style settings still apply, because they apply to every theme.

## Benefits of customizing the meeting page style

- **Your colour on every theme:** Buttons, countdowns and highlights use your brand colour, whichever theme a meeting has.
- **One setting for all meetings:** Style applies to meetings with their own theme too, so you never style meetings one by one.
- **More room when you need it:** Hide the thumbnail or your site header for a cleaner page.
- **An easy way back:** Every setting has a default, and **Discard** drops changes you have not saved.

## Troubleshooting

### My new colour does not show in the preview

**Preview on latest meeting** shows the selected theme only. Style changes apply after saving. Click **Save changes**, then reload the meeting page.

### A setting shows "Not used by the … theme."

The theme selected in the gallery does not support that setting. For example, Lobby and Consult have no sidebar and no thumbnail. No action is needed. The setting still applies to meetings that use a theme that supports it.

### Sidebar position has no effect

Check that:

- **Sidebar position** is set to **Left** or **Right**, not **Design default**.
- The meeting uses a theme with a sidebar, such as Classic or Paper.

### The header and footer are hidden on one meeting only

That meeting has **Hide header and footer** turned on in its **Page design** step.

1. Edit the meeting and open **Page design**.
2. Turn off **Hide header and footer**.
3. Click **Update meeting**.

### Page background, fonts or Custom CSS show a Pro badge

These settings come with ZooMeet Pro. Activate ZooMeet Pro, then reload the **Event themes** tab.

### The font looks the same after saving

ZooMeet uses fonts already on the visitor's device. If a device has none of the fonts in that family, it falls back to a similar one, which can look close to the theme's own. Try a family with a clearer shape, such as **Serif** or **Slab serif**, then reload the meeting page.

### My custom CSS has no effect

Check that:

- Your selectors start with `.gm`, for example `.gm .gm-title`.
- You clicked **Save changes** and reloaded the meeting page.
- Your account is an administrator. For other roles, the saved CSS stays as it was.

### Text is hard to read on my custom background

The custom colour is too dark for a light theme, or too light for Studio. Pick a light colour for light themes and a dark one, such as **Night**, for Studio.

## Frequently asked questions

### Do style settings apply to meetings with their own theme?

**Yes.** Style settings apply to every theme, including meetings that picked their own.

### Can one meeting have its own brand colour?

**No.** Brand colour and the other style settings are site-wide. Each meeting can pick its own theme, and hide its sidebar or header and footer, in its **Page design** step.

### How do I go back to the original look?

Set **Brand colour** to **Auto**, set **Thumbnail** and **Site header and footer** to **Show**, set every other setting to **Design default**, and empty the **Custom CSS** box. Then click **Save changes**.

### Does Hide in Site header and footer affect other pages?

**No.** It only removes the header and footer from ZooMeet meeting pages.

## You're ready to style your meeting pages

Your meeting pages now use your brand colour and button shape on every theme. Next, pick the theme that fits your meetings, or give one meeting its own theme.

- [How to choose a meeting page theme](https://sovlix.com/docs/zoomeet-event-page-themes/)
- [Use a different theme for one meeting](https://sovlix.com/docs/zoomeet-event-page-themes/#use-a-different-theme-for-one-meeting)