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.
Last updated
Was this helpful?
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.
Last updated
Was this helpful?
You have ready for use on a Site
You understand Siteglide-CLI and commands
You have from the SiteBuilder Module (or are using a Site Template where this has been done already)
You have set up your project with the SiteBuilder module's recommended file structure Example Tailwind Project Setup
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.
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.
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.
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.
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.
Set the presets option in your config to point at the sitebuilder_presets_settings file:
CSS rules in your CSS source file may override the Preset's plugins, which might for example be setting fonts. If you wish for the Preset to set these rules, you may wish to selectively comment-out CSS rules.
Start a siteglide-cli sync command.
Start a npm run tailwind command. A new tailwind.min.css file will be created and synced, using the new Preset and your existing CSS rules.
That's it! Any Pages which are using a Page Template which links to this new CSS file will be restyled to use this Preset's variables.
Make sure the Page you are testing with uses a Flowbite Page Template. (We will support other Themes in future, but currently Presets are only available on Themes which use Tailwind, of which Flowbite is the only one currently).
Make sure the SiteBuilder settings have either Preview Mode or CLI Mode selected. JIT mode should not be selected as this does not support Presets.
Check the Tailwind Docs for more information about how Presets handle conflicts with your own config and source CSS. You may be expecting the Site's appearance to change, but your own variables may be preventing that change.
Check that any classes you are testing are present in the layouts you are using. Tailwind CSS's tree shaking means that if an element does not have the class bg-accent-500 that class won't be included in the tailwind.min.css file even if the preset defines this colour.
Try manually then saving and syncing the tailwind.min.css file to confirm it has uploaded since making changes.
Make sure you are not directly modifying files in the modules/module_86/public folder. These can be overridden by the module, so your changes could be lost.
We have designed the Presets feature to strike a balance between convenience and flexibility. To a large extent, reading the Tailwind documentation on:
And referencing the preset JS files in the modules/module_86/public/assets/presets directory will allow you to modify behaviours to suit your needs. We will just cover a few common use-cases relevant to using this feature with Siteglide.
Once you've experiemented with Presets and have made a decision on whether to use a specific preset, no presets or a preset from a third party, you may no longer wish to allow the SiteBuilder module's settings to change the preset. If so, you can change your configuation to stop pointing at:
...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.
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.
Variables in your config will with variables in the Preset. If you wish for the Preset to change specific variables, you may wish to selectively comment-out parts of your Preset which set the same variables.