Branding & Design

Branding & Design is where you control the main visual identity of your site — your logo, browser icon, color theme, and fonts. This is one of the first settings pages most clubs visit during setup, and you can come back to it any time to refresh your site's look.

Where to find it

Open the Club Management Portal.
In the left menu, choose Site Settings → Branding & Design.
Make your changes and click Save.
Open the live site in another tab to see the result.

Branding & Design is available to Administrators. If you don't see it in the left menu, your account doesn't have the right permissions.

Branding

This is where you upload the visual marks that identify your club on every page.

Logo — Your club's logo, displayed in the site header. Accepts .jpg, .jpeg, .png, .gif, and .svg files. Works best between 200x200 and 800x800 pixels. If you use an SVG, make sure the width and height are defined inside the SVG file — otherwise it may not display at the size you expect.

Icon — The small image that appears in browser tabs and bookmarks (often called a favicon). Accepts .png and .ico files. 48x48 pixels is ideal.

Design — Theme

The Theme picker controls your club's main colors, header style, and the background colors for the header and footer areas. Click Theme inside the Design panel to open the theme editor.

Primary and Secondary colors

Choose one Primary color and one Secondary color using the color pickers. Clubistry automatically generates lighter and darker shade variations from each, and those generated shades become available as background options for the header and footer areas. Your theme colors are also used throughout the rest of the site's styling, so they should feel natural alongside your typical content.

Header Style

Two layout options:

Default — The standard header layout, suitable for most clubs.
Compressed with Minimal Menu — A more compact header that works well when your club has only a small number of top-level navigation items. If your top-level page names are long or you have many of them, this style may feel crowded.

Show Club Name in Header

Turn this on to display your full club name next to the logo in the header. This works best when your logo is fairly compact — a square or round badge-style logo, for example. If your logo already contains your club name as text, turning this on will duplicate it.

Tagline

A short line of text that appears below the club name in the header. Only used when Show Club Name in Header is turned on.

Header Top, Header Bottom, and Footer backgrounds

Choose background colors for the three main structural areas of the site frame. The selectors offer White, Black, and the generated shade variations from your primary and secondary colors.

Live Preview

The preview area shows how your current theme choices work together. It's helpful for quick comparison, but always check the live site after saving — the preview doesn't capture every nuance.

Design — Fonts

The Fonts picker lets you choose a heading font and a body font for your site. These two choices shape the overall feel of your typography without needing any custom code. Click Fonts inside the Design panel to open the font picker.

Default fonts

If you haven't changed them, your site uses:

Oswald for headings
Open Sans for body text

Available fonts

The picker offers a curated set of headline fonts and body fonts. Every font in the list has been selected for strong web readability — they render clearly across screen sizes, including mobile, so you don't need to worry about legibility when choosing. Pick the style that fits your club's personality and the fonts will handle the rest.

Your selected headline font is used for all heading styles across the site. Your selected body font is used for paragraphs and most general text.

How the picker works

Each font is shown as a preview card. Click a card to select it — the chosen option is highlighted. You pick headline and body fonts separately.

Choosing a good combination

Let headings and body text feel different. Typography works best when you can tell headings and paragraphs apart at a glance. A bolder or more distinctive headline font paired with a simpler body font creates natural visual hierarchy.

Test with real content. Font choices can feel different once they're on actual pages. Check your selection on pages that include long paragraphs, short callout text, navigation labels, and multi-line headings.

Most clubs only change fonts when setting up the site for the first time or refreshing their brand look. Once you've settled on a combination you're happy with, you won't need to revisit this often.

Using a font that isn't in the picker

If your club needs a specific font that isn't offered in the built-in picker, it's possible to load a custom font using the Advanced settings. This involves adding a font stylesheet link and a small amount of custom CSS to override the default font variables. This is an advanced technique — see Advanced for details and an example.

After saving

Review a few public and member-only pages to confirm:

The logo looks balanced in the header
The icon is recognizable in a browser tab
Colors work well with your content and images
The selected fonts are easy to read at both headline and paragraph sizes
On mobile, the layout still reads clearly

If something doesn't look right

Confirm your changes were saved in Branding & Design.
Refresh the live site tab — your browser may be showing a cached version.
Check how the fonts and theme look on mobile as well as desktop.
If Show Club Name in Header is on, check that the logo and text still look balanced together.
Check whether the selected header style works with the number and length of your top-level navigation items.
Check whether custom code in Advanced might be overriding the normal styling.