Theme Presets

Theme Presets are a Way to change a Theme's CSS variables, like colour and font, giving your site an interesting new look without needing to make big changes to HTML or CSS classes.

Written By Luke Wakefield

Last updated 4 days ago

Pre-Requisites

You have set up the Siteglide CLI ready for use on a Site
You understand Siteglide-CLI Pull and Sync commands
You have created a Flowbite* Page Template from the SiteBuilder Module (or are using a Site Template where this has been done already)
You have set up your project ready to use Tailwind CSS via CLI with the SiteBuilder module's recommended file structure Example Tailwind Project Setup

About Presets

Theme Presets are a Way to change a Theme's CSS variables, like colour and font, giving your site an distinctive new look without needing to make changes to HTML or CSS classes. They should be compatible with all our existing Flowbite layouts*.

They are useful for:

Create new sites using the SiteBuilder layouts, and give them a distinctive look from step one.
Take an existing site and try it out with different Presets to help you or your client visualise different design choices with the real content.

How it Works

Our Presets use Tailwind CSS Presets and Plugins behind the scenes.

To allow you to change the currently selected preset from the SiteBuilder Settings tab, we use a small, boilerplate preset called sitebuilder_preset_settings.js. When the SiteBuilder settings are updated to select a new preset, this file is modified to point at the Preset you have selected.

Small Plugins are included within Presets in order to enable them to set global styling like fonts as well as changing variables which affect existing utility classes.

*Our first release of Theme Skins only supports Tailwind-based Themes, since we are able to leverage the powerful presets feature provided by Tailwind.

Getting Started - Coming Soon

The easiest way to get started with a Theme Preset will be to install a site from one of our Site Templates:

Existing layouts will already have the preset applied.

Newly added layouts may usually have the majority of classes applied, though to get your site looking perfect, we recommend you rebuild Tailwind reguarly.

Before going live, we also recommend you remove the "safelist" in the configuration file, for much better client-side performance.

Usage - Via SiteBuilder Settings

Open the Modules / SiteBuilder Module
Navigate to the Settings tab.
Select a Preset from the options.
Each Preset may have different versions. To get started, keep the default selected version.
Save your settings. This will save the setting and modify settings files on your site, but your Tailwind distributable CSS file will still need to be compiled using the Siteglide CLI - more on that next.
Next, go to your code editor and open a terminal window. Close any sync commands that are currently running and run a siteglide-cli pull command. This will pull down the files for each Preset in the module and the newly-updated sitebuilder_preset_settings.js file.

Do not directly modify either the sitebuilder_preset_settings.js file or other files in the modules/module_86/public folder since the module settings may overwrite your changes.

Check your Tailwind CSS config (normally at path marketplace_builder\assets\modules\module_86\src\tailwind.config.js) and your Tailwind CSS source file, normally at path: marketplace_builder\assets\modules\module_86\src\tailwind.css.
1. Set the presets option in your config to point at the sitebuilder_presets_settings file:
  javascriptrequire('tailwindcss/../../modules/module_86/public/assets/css/presets/sitebuilder_preset_settings')

…and instead point directly at your chosen Preset's file location, or set presets to an empty array [] to completely disable all presets including Tailwind's default settings or remove the presets key completely to remove presets but keep Tailwind's defaults.

Preset Versions

This allows a Preset creator to make changes without affecting your live sites, since your site can continue to safely use an older version without maintenance and updates.

We don't anticipate that it will be common practice to update a version of a Preset on a live site, but it is an option that's open to you.

If you're starting a project from the beginning, it will probably make sense to use the latest version unless you are avoiding specific known issues in the newest version.\