Customisation

SpaceClub! is designed to be rebranded from a handful of files. You don’t need to dig into HTML templates - most visual changes come from editing site.json, navbar.json, and spaceclub.json.

Site Identity

Open src/_data/site.json:

{
  "title": "Space Club!",
  "description": "Your site description here.",
  "logo": "/assets/images/logo.svg",
  "favicon": "/assets/images/favicon.svg",
  "baseUrl": "/",
  "timezone": "Australia/Sydney",
  "dateFormat": "dddd, Do MMMM YYYY",
  "searchTitle": "Search",
  "searchPlaceholder": "Search content..."
}

Property	What It Controls
`title`	The site name shown in the navbar, footer, and browser tab.
`description`	The default meta description for SEO. Individual pages can override this.
`logo`	Path to your logo image. Displayed in the navbar.
`favicon`	Path to the favicon (the small icon in browser tabs).
`baseUrl`	The base URL path. Leave as `"/"` unless hosting in a subdirectory.
`timezone`	Used for event date calculations (upcoming vs. past). Use a TZ database name.
`dateFormat`	The default format for displayed dates. Uses Day.js format tokens - e.g. `"MMMM D, YYYY"` for “January 5, 2026”.
`searchTitle`	The heading shown in the search modal.
`searchPlaceholder`	The placeholder text in the search input field.

Open src/_data/navbar.json:

{
  "items": [
    { "title": "Home", "href": "/", "footer": true },
    { "title": "About", "href": "/about", "footer": true },
    { "title": "Contact", "href": "/contact", "footer": true }
  ]
}

Each item is a navigation link:

title - The text shown in the navbar and footer.
href - The URL path the link points to.
footer - Set to true to also show this link in the footer. Set to false or remove it to only show it in the navbar.

To add a new link, add a new object to items. For example, to add an Events link:

{ "title": "Events", "href": "/events", "footer": false }

The navbar automatically highlights the current page. Pages with menu: true in their front matter are also listed under a Pages dropdown, so you don’t need a link for every page. See Pages.

spaceclub.json

spaceclub.json decides what your site has and how it looks. Anything you leave out uses the default, so the file can be nearly empty.

{
  "features": {
    "events": true,
    "posts": true,
    "contentTypes": true,
    "search": true,
    "gallery": true,
    "forms": true,
    "rss": true,
    "webmcp": true
  },
  "look": {
    "modes": "light",
    "colours": { "light": {}, "dark": {} },
    "navbar": { "layout": "classic", "show": { "logo": true, "title": true, "search": true } },
    "footer": { "divider": "stars", "dividerSvg": null, "colours": {} }
  }
}

Changes to look show up as soon as you save. Changes to features need a restart of npm start.

Features

Turn off anything your site doesn’t need:

Feature	What It Is
`events`	Events, their listing page, and their feed. See Events.
`posts`	Posts, their listing page, and their feed. See Posts.
`contentTypes`	Your own kinds of content, made in SpaceDash. See Content Types.
`search`	The Search button in the navbar. See Search.
`rss`	News feeds people can follow in a feed reader: `/feed.xml` for posts, `/events/feed.xml` for events, and one for each content type.
`webmcp`	Lets AI assistants in the browser find their way around your site: search it, list your events and posts, and read your pages.

gallery and forms are in the file too, but switching them off doesn’t do anything yet.

Turning a feature off hides it, but never deletes anything. Your events and posts stay in src/, ready for when you turn it back on.

Light and Dark Mode

"look": { "modes": "both" }

Value	What Visitors See
`"light"`	Light mode (the default).
`"dark"`	Dark mode.
`"both"`	Whichever their device is set to, with a sun/moon button in the navbar to switch. Their choice is remembered.

Colours

Set your colours under look.colours, separately for light and dark mode:

"look": {
  "colours": {
    "light": { "primary": "#0b7a75", "secondary": "#f2a541" },
    "dark": { "body": "#10201f" }
  }
}

Colour	What It Affects
`primary`	The main brand colour - buttons, links, headings, navbar highlights.
`secondary`	The accent colour - used for posts and secondary buttons.
`success`, `info`, `warning`, `danger`, `light`, `dark`	The rest of Bootstrap’s colours, if you use them in your content.
`body`	The page background.
`text`	The text colour.
`link`	Links. Leave it out and links follow `primary`.
`border`	Borders around cards and other boxes.

Use hex colours like "#d4204d". Only the colours you set change, and the hover shades are worked out for you.

Dark mode keeps your light brand colours unless you give it its own, and uses lighter shades of them for headings and links so they stay readable. The background and text use dark mode’s own colours unless you set body and text under dark.

Tip: Use a tool like coolors.co to generate a colour palette.

"look": {
  "navbar": { "layout": "split", "show": { "logo": true, "title": false, "search": true } }
}

Layout	What It Looks Like
`"classic"`	Logo and name on the left, search and the menu button on the right. The menu opens below. (The default.)
`"centred"`	Logo and name in the middle, menu links in a row underneath.
`"split"`	Menu links on the left, logo and name in the middle, search on the right.

show hides parts of the navbar: set logo, title, or search to false.

"look": {
  "footer": {
    "divider": "custom",
    "dividerSvg": "/assets/images/my-divider.svg",
    "colours": { "background": "#0b2545", "text": "#ffd166" }
  }
}

Setting	What It Does
`divider`	The art above the footer: `"stars"` (the default rockets and planets), `"none"`, or `"custom"`.
`dividerSvg`	With `"custom"`, the path to your own SVG, e.g. `/assets/images/my-divider.svg`.
`colours.background`	A solid footer colour, instead of the black footer with the gradient.
`colours.text`	The footer’s text colour.

Making your own divider: draw it like the stars one - black outlines with white fills, on a transparent background, roughly 1500×130px. The gradient turns the black parts into colour.

Logo and Favicon

Replace these files in src/assets/images/:

logo.svg - Your site logo, displayed in the navbar (rendered at 132×56px).
favicon.svg - The small icon in browser tabs.

SVG is recommended because it scales to any size. If you use PNG or JPG, make sure the logo is at least 264×112px (2× for retina displays) and the favicon is at least 32×32px.

Fonts

Fonts, the gradient, and the homepage heading sizes live in SpaceClub!‘s stylesheet. To change them, copy it into your site:

npx spaceclub customize assets/css/styles.css

This creates src/assets/css/styles.css, which your site now uses instead of the package’s. Then:

Download your font as a .ttf, .woff, or .woff2 file and place it in src/assets/fonts/.
Update the @font-face block in your styles.css:

@font-face {
  font-family: "YourFont";
  src: url("/assets/fonts/YourFont.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
}
 
body {
  font-family: "YourFont", var(--bs-body-font-family);
}

The var(--bs-body-font-family) fallback ensures the site still looks fine if the custom font fails to load.

The footer gradient is in the same file:

--gradient: linear-gradient(135deg, #3BC7F6 0%, #A855F7 29.8%, #CC4D9E 69.3%, #EF4444 100%);

Heads up: once you have your own styles.css, style fixes in new SpaceClub! versions won’t reach it. Keep your changes small, and check the changelog when you update. Colours don’t need this - use spaceclub.json for those.

Where to find fonts: Google Fonts is free. Download the font files directly rather than using the <link> embed - this way your site works offline and doesn’t depend on Google’s servers.

Going Further

To change a layout or component, or build your own card lists, see Advanced Customisation.

SpaceClub!

Explorer

Customisation

Site Identity

Navigation

spaceclub.json

Features

Light and Dark Mode

Colours

Navbar

Footer

Logo and Favicon

Fonts

Going Further

Graph View

Table of Contents

Backlinks