Theme Configuration

The Theme Configuration landing page has a tabbed layout with four tabs.

• Style
• Layouts
• Default Page Layouts
• JavaScript

Style

Define the general look and feel of your site

General

Select your site's active theme (coming soon).

Theme Colors

Select Primary and Secondary branding colors for your site. These will be used in generated UI elements, and can also be used with Tailwind as color variables as such: bg-primary text-secondary hover:bg-primary-700 border-secondary-300 etc.

Theme Fonts

Add supported fonts to your site and define the default font to be used for headings (h1, h2, h3, etc.) and for body text (everything else).

Once you've added a font to your site, you can also add it to an element as a Tailwind class using the square bracket syntax. Note that you should use lowercase when defining the font name in the class.

<p class="font-[abeezee]">abeezee</p>
<p class="font-[inter]">inter</p>

Site Images

Set the branding images and logos for your site.

Site Favicon - The small icon that shows in the tab bar in your browser next the page name. This should be at least 48x48 pixels, and either an SVG or PNG file.

Apple Icon - The icon that shows when iOS Safari users will see if they favorite a page or add it to their home screen. The icon file must be a PNG file and must be at least 180x180 pixels in size.

Open Graph Image - The image that will be shown when links to your site are shared on social media platforms. You can default any page that is missing an OG image to what you upload here. Use high-quality image with dimensions of 1200 x 630 pixels.

Mobile Logo - The logo that will show in the header of your site when viewing on a mobile device. Supported file types: jpg, jpeg, gif, png and webp.

Email Logo - The logo that will be used at the top of emails sent from your site, such as form submissions. Supported file types: jpg, jpeg, png. We recommend a logo that has a width between 300px and 600px.

Layouts

Create, edit and delete page layouts templates for your site.

Create Layout

When you create a layout, you have to give it a Display Name and a unique identifier, defined as the "File Name". This name will be used to generate a new "Theme File" that you can edit in the webadmin Theme Files (/webadmin/theme-files).

You also have to define your layout slots. There will always be a content slot, which will be display the content of the page where you are using the layout. You can add more slots around this that can be customized in the webadmin Theme Sections (/webadmin/theme-sections).

The default layout has Header, Above Content, Content, Below Content and Footer sections, displayed on default layout pages in that respective order.

Edit a layout

Once you've created a custom layout, you can edit which sections are used on that layout by clicking the "Edit" button. We often create customized header Theme Sections, and therefore custom Layouts for our sites' homepages. By creating a custom Layout, you can edit it and select your customized header Theme Section, so that any page that uses this custom Layout will show the new custimzed header.

Default Page Layouts

Select a default layout for different page and content types. If you want all of your blogs to use the "Sidebar Left" layout, you can select it as the Default Page Layout for Blogs here.

Javascript

Define any global site scripts here. After clicking "Add to global scripts", you'll be prompted to input a Script Name, Position and Script Content.

Scripts can be disabled by unchecking the "Active" switch. They can be deleted by clicking on the red trashcan icon on the right side of the screen by the expand chevron.

Any scripts added here will need to be wrapped in script tags as follows:

<script>
    console.log('hello world!');
</script>