Setting Up Main Template
Flute CMS provides powerful tools for customizing your website’s appearance. The system allows you to change colors, add and configure widgets without needing to edit code.
To access all customization features you need administrator permissions: admin.pages or admin.boss
Changing Site Color Scheme
How to open color editor
The color change system works in real-time. All your changes are saved automatically and applied to the entire site.
Go to any site page (excluding admin panel). In the bottom corner of the screen find the “Change Colors” button and click on it.
Working with color palette
After opening the editor, a panel with available site colors will appear. Each color is represented by a separate button.
To change a color, click on the corresponding button and select a new shade in the color picker window that appears. Under each button, a contrast rating is displayed — this is an indicator of how well the selected color combines with other site elements.
The color scheme automatically adapts when switching between light and dark themes. You can customize colors in either theme.
Saving changes
After finishing customization, click the “Save” button. The editor will automatically close and changes will be applied to the entire site.
If you change your mind, use the cancel button — all colors will return to their original values.
Advanced users can edit colors manually through the app/Themes/your_theme/colors.json file. This file is created automatically when first using the color editor.
Managing Page Widgets
What are widgets
Widgets are ready-made content blocks that can be placed on site pages. They can contain text, images, forms, and other elements. The system allows you to add, remove, and configure widgets without programming knowledge.
Launching widget editor
Go to the page you want to edit (except admin panel). In the bottom corner find the “Edit Page” button and click on it.
After activating the editor, the interface will change: a panel with available widgets will appear at the bottom of the screen, and save or cancel buttons at the top.
While editing a page, you cannot navigate to other site sections. First save or cancel changes.
If the page accidentally closes during editing, all unsaved changes will automatically be restored from browser local storage when the editor is next opened.
Adding widgets
To add a new widget to the page, find the needed element in the panel at the bottom of the screen. Hold the widget with the left mouse button and drag it to the desired location on the page.
After placing the widget, a control panel with three buttons will appear below it:
Reload — refreshes widget content. Use this function if the widget displays incorrectly.
Settings — opens widget configuration window. Not available for all widget types.
Delete — completely removes the widget from the page.
Changing position and size
To move a widget, click on it with the left mouse button and drag to a new location.
To resize, find the small icon in the bottom right corner of the widget. Hold it and pull in the desired direction to increase or decrease the widget.
The widget editor works on all site pages. When activated, existing page content is temporarily hidden and restored after saving changes.
Text Editor Widget
Editor capabilities
Among available widgets, the text editor holds a special place. It allows creating arbitrary content using simple Markdown syntax for text formatting.
The widget supports not only Markdown but also regular HTML code for creating more complex elements.
With this widget you can add headings, paragraphs, lists, links, images, and other content elements.
