ComusThumbz Documentation
HTML Markdown Print/PDF Plain Text
Admin Login

Documentation Menu


Admin Access

Theme Manager

 

What This Page Does

The Theme Manager lets you control how your entire website looks. You can switch between different color schemes and styles instantly, create custom themes for your brand, or build multiple themes for different occasions. Think of themes as complete "looks" for your site - each one has its own colors, fonts, and styling that you can switch between with a single click.

[Screenshot: page-overview]

How to Get Here

Navigate to Admin Panel > Template Manager > Themes

Understanding the Page

When you first open the Theme Manager, you'll see all your themes displayed as cards or in a table (you can switch between these views). At the top of the page, you'll find buttons to create new themes or import themes from other installations.

Statistics and Quick Actions

At the very top, you'll see:

  • Import button - Bring in themes from other sites or backups
  • New Theme button - Create a fresh theme from scratch

 

Note: If you see a yellow banner saying "Demo Mode," it means you're viewing a demonstration and cannot make changes. All buttons will be disabled.

Navigation Tabs

Below the header, there are nine tabs for different template management tools. The Themes tab is highlighted when you're on this page. The other tabs let you manage files, features, styles, layouts, translations, media, and your database.

Theme Display Area

The main area shows all your themes. Each theme displays:

  • A preview image (or a palette icon if no image is set)
  • The theme name and description
  • Version number and author name
  • Badges showing if the theme is "Active" (currently live on your site) or "Default" (the fallback theme)
  • Action buttons to work with the theme

 

View Options

You can toggle between two ways of viewing your themes:

  • Grid View - Shows themes as visual cards with preview images. Great for browsing and getting a quick look at each theme.
  • List View - Shows themes in a detailed table. Better when you need to see version numbers and authors at a glance.

 

Common Tasks

How to Create a New Theme

Creating a new theme is your first step to customizing your site's appearance.

  1. Click the New Theme button at the top of the page.
  2. In the popup window that appears, fill in the details:
  • Theme Name - Give your theme a memorable name like "Summer Sale Theme" or "Dark Night Mode"
  • Version - This is pre-filled with "1.0.0" but you can change it if needed
  • Author - Enter your name or your company name
  • Description - Write a short note about what this theme is for
  • Base Theme - If you want to start with another theme's settings, pick one from this list. Otherwise, leave it as "Start from scratch"
  1. Click Create Theme.

Your new theme appears in the grid. It won't be live on your site yet - you'll need to activate it separately.

Tip: Using a base theme is a great shortcut. If you love your current colors but just want to tweak a few things, start from your existing theme instead of starting from zero.

[Screenshot: create-theme-modal]

How to Activate a Theme

Activating a theme makes it live on your website for all visitors to see.

  1. Find the theme you want to activate in the grid or list.
  2. Click the green Activate button.
  3. A confirmation message appears asking if you're sure. Click OK.
  4. The page reloads automatically after a moment.

The theme you activated now shows a green "Active" badge, and your website immediately uses this theme's colors and styling.

Warning: Activating a theme changes your site's appearance for everyone right away. If you want to test a theme first, consider activating it on a test version of your site.

[Screenshot: activate-theme-button]

How to Edit Theme Colors and Settings

Once you've created a theme, you'll want to customize its colors, fonts, and other visual elements.

  1. Find your theme in the grid or list view.
  2. Click the gray Edit button (pencil icon).
  3. The page changes to show the theme editor.

To change basic information:

  • Edit the Theme Name, Version, Author, or Description fields at the top.
  • Click Save Changes when you're done.

 

To change colors:

  • Scroll down to the "Theme Settings" section.
  • Find the color you want to change (like "Primary Color" or "Page Background").
  • Click the colored square next to the setting name.
  • Your browser's color picker opens - choose your new color.
  • The change saves automatically - you'll see a confirmation message in the bottom-right corner.

 

To change fonts or sizes:

  • Find the setting you want to change in the Theme Settings section.
  • Type your new value directly into the text box.
  • Click outside the box or press Tab to save.
  • A confirmation message appears when the change is saved.

 

  1. When you're finished editing, click Back to Themes at the top to return to the main list.
Note: Color changes save automatically as soon as you pick a new color. You don't need to click a save button for colors - just pick and go.

[Screenshot: edit-theme-panel]

How to Make Changes Appear on Your Website

After you change theme settings, you need to generate a CSS file to make those changes appear on your live site.

  1. While editing a theme, click the Generate CSS button.
  2. A file named themevariables.css downloads to your computer.
  3. Place this file in your website's theme folder at: themes/{theme-name}/css/variables.css

Your frontend website now displays the updated colors and styling.

Tip: If you're not sure how to upload files to your server, ask your web developer or hosting support to help place the CSS file in the correct location.

How to Clone a Theme

Cloning creates an exact copy of a theme, which is perfect for creating variations without affecting your original.

  1. Find the theme you want to copy.
  2. Click the Clone button (overlapping squares icon).
  3. A popup appears with a suggested name like "My Theme (Copy)".
  4. Change the name if you want something different.
  5. Click Clone Theme.
  6. The page reloads and your new copied theme appears in the list.

The new theme has all the same colors and settings as the original. You can now edit the copy without changing the original theme.

Tip: Cloning is great for seasonal variations. Clone your main theme, adjust a few colors, and save it as "Holiday Theme" or "Summer Theme."

[Screenshot: clone-theme-modal]

How to Export a Theme

Exporting saves your theme as a file you can share or use on another website.

Click Edit on the theme you want to export.Click the Export Theme button.

  1. A file named themeYYYY-MM-DD.json downloads to your computer.

Keep this file safe - you can import it on other installations of your software or use it as a backup.

How to Import a Theme

Importing brings in a theme from another installation or from a backup file.

  1. Click the Import button at the top of the page.
  2. Open the JSON file you want to import in a text editor.
  3. Copy all the text from the file.
  4. Paste it into the large text box in the import window.
  5. Click Import Theme.

If the import succeeds, the new theme appears in your theme list. If it fails, you'll see an error message explaining what went wrong.

Warning: Only import themes from sources you trust. While the system checks for dangerous code, it's always safer to only import themes from reliable sources.

[Screenshot: import-theme-modal]

How to Delete a Theme

Deleting removes a theme permanently from your system.

  1. Find the theme you want to remove.
  2. Click the red Delete button (trash icon).
  3. A confirmation message appears. Click OK if you're sure.
  4. The theme is removed immediately.
Warning: Deleting is permanent and cannot be undone. Make sure you have a backup or export of the theme before deleting if you might want it later.
Note: You can only delete themes that are not currently active and not marked as the default theme. If you don't see a Delete button, the theme is either your active theme or your default backup theme.

View Modes

The Theme Manager offers two ways to view your themes, and you can switch between them anytime.

Grid View shows themes as cards with preview images. This is the default view and makes it easy to browse visually. You can see at a glance what each theme looks like and quickly spot the one you want.

List View shows themes in a table format with detailed information in columns. This view is better when you need to compare version numbers, see who created each theme, or work with many themes at once.

To switch views, click the grid icon or list icon buttons at the top right of the theme display area.

Settings and Options

Each theme has settings that control different aspects of your site's appearance:

Setting Type What It Controls Example Settings
Colors All colors on your site including buttons, links, backgrounds, and text Primary Color, Secondary Color, Success Color, Danger Color, Page Background, Card Background
Typography Font choices and text colors Font Family, Primary Text Color, Secondary Text Color, Muted Text
Layout Spacing and shapes Border Radius (controls how rounded corners are)
Backgrounds Page and element backgrounds Page Background, Card Background

When you edit a theme, these settings are grouped by category to make them easier to find.

Tips for New Users

Tip:
  • Start with a clone - Don't edit your active theme directly. Clone it first, make changes to the copy, then activate it when you're happy.
  • Name themes clearly - Use descriptive names like "Holiday 2025" or "Dark Mode" instead of "Theme 1" or "New Theme"
  • Export regularly - After making changes you like, export the theme as a backup. If something goes wrong, you can always re-import.
  • Test before activating - If possible, preview your changes in a test environment before activating a theme on your live site.
  • Document your colors - Keep notes about which colors you use and why, especially if you're matching a brand style guide.
  • Use base themes wisely - When creating a new theme, starting from an existing theme saves time on settings you don't want to change.

Troubleshooting

My theme changes aren't showing on my website

What you see: You changed colors in the theme editor and activated the theme, but your website still looks the same.

How to fix it:

  1. Make sure you clicked Generate CSS after making changes.
  2. Download the generated theme_variables.css file.
  3. Upload it to your website's themes/{theme-name}/css/ folder.
  4. Clear your browser cache by pressing Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac).
  5. Check that the correct theme is activated by looking for the green "Active" badge.

 

I can't delete a theme

What you see: The Delete button doesn't appear on a theme, or clicking Delete shows an error.

How to fix it:

  • You cannot delete the theme that's currently active. Activate a different theme first, then come back and delete this one.
  • You cannot delete the default theme. The default theme is your fallback and must always exist for system stability.

 

The Import button won't work

What you see: Clicking Import doesn't open the popup window, or the Import button is grayed out.

How to fix it:

  1. Check if you see a yellow banner at the top saying "Demo Mode" - if so, you're in a demonstration and cannot make changes.
  2. Refresh the page in case your session expired.
  3. Make sure your browser isn't blocking popups from the admin panel.

 

My color changes aren't saving

What you see: You pick a new color, see a success message, but when you reload the page the old color is back.

How to fix it:

  1. Open your browser's Developer Tools (press F12).
  2. Look at the Console tab for any error messages in red.
  3. Check the Network tab to see if the save request failed.
  4. If you see "Demo Mode" messages in the network responses, you're in a demonstration mode where changes can't be saved.
  5. Try logging out and back in - your session may have expired.

 

Import shows "Invalid theme data" error

What you see: You pasted theme data and clicked Import, but got an error saying the data is invalid.

How to fix it:

  1. Make sure you copied the entire contents of the JSON file, from the first { to the last }.
  2. Check that the file is actually a theme export - it should have fields like "name," "version," and "settings."
  3. Paste the JSON into a validator website like jsonlint.com to check if it's valid JSON format.
  4. If someone sent you the theme file, ask them to re-export it as there may have been an issue with the original export.

 

Page When to Use It
Template Dashboard Go here to see an overview of all template management tools and create system backups
Style Manager Use this when you want to make more advanced CSS customizations beyond basic theme settings
File Editor Edit theme template files directly when you need to change HTML structure or add custom code
Feature Toggles Turn site features on or off without needing to edit themes

Last updated: February 4, 2026

Related Pages