Custom Themes

How to make your site look exactly like you want.
Unstack provides a number of tools — both code and no-code — to customize your site's appearance. These include:

Style Guide

You must have the Admin role to view and edit the style guide.
The Unstack style guide provides a quick way to customize the branding and styles of your site without using code. It's designed to be so simple that anyone can use it:
Many aspects of your theme can be customized in the Style Guide, including:
  • Branding
  • Typography
  • Button styles
  • Forms styles
  • Layout
  • And more...
If you're not sure if Unstack has a no-code way of customizing your theme, the Style Guide is a great place to start. Component developers will especially want to be familiar with what's exposed here.

Headers & footers

Within the app, Unstack provides a way of customizing your header and footer without code:
This allows you to customize your menus, styles, and the basic layout of your header. The built-in header and footer do have some limitations, but they are excellent for customizing your header or footer without code.
If the built-in header and footer don't meet your needs, you can also build your own header and footer components with code.

Custom integrations

If you need a way to add custom code to every page, custom integrations are the way to go.
Custom integrations can be used to:
  • Tweak global CSS for things not customizable in the Style guide
  • Add additional scripts for analytics or functionality
  • Add a global banner at the top or bottom of the page
  • And more...
A custom integration can be inserted before or after the content of the page, or in the <head> of the HTML.

Custom code blocks

If you only need to add custom code to a single page, Unstack includes a Custom Code component that can be easily inserted into a page with the Add Section button within the page editor.
To add a custom code block:
  1. 1.
    Click the Add section button
  2. 2.
    Navigate to the Custom Code category
  3. 3.
    Select the Custom Code component

Custom components

Building your own components will give you the ultimate flexibility. Unstack provides a simple component editor where you can develop components in a live preview environment:
Anyone with a small amount of HTML knowledge will feel at home in the component editor.
The component editor can be used to build a few different types of components:
  • Sections - The main building blocks of Unstack pages.
  • Headers & Footers - If the built-ins don't work for you you can go custom.
  • Banners - Place anywhere on the page even above or below headers and footers.