Documentation

Sample Installation


⚠️ The demo installation is intended for fresh or local installations only. Do NOT use on existing production sites.

You can download the Database of the demo site with sample files here:

  1. Download the demo package: https://subatomik.xanium.io/application/files/subatomik.zip

  2. Open the ZIP file. Inside, you will find a folder called /application/files.
    Copy this folder into your ConcreteCMS installation and replace the existing one.

  3. In the ZIP, you will also find a demo database file (SQL).
    Import this SQL file into your website’s database.
    Important: This will remove anything that was previously installed.

  4. When the import is finished, log into ConcreteCMS with:
    Username: admin
    Password: admin (Please change the password immediately after login)


Installation instructions

connect to the marketplace from your dashboard and install the package

Manual installation:

  1. Unzip this file in your site's packages/ directory.
  2. Login to your site as an administrator.
  3. Find the "Add Functionality" page in your dashboard.
  4. Find this package in the list of packages awaiting installation
  5. Click the "install" button.

1. Activate the Theme and Open Configuration

Before customizing anything, the theme must be activated.

Once activated, ConcreteCMS exposes a Configure action that contains all theme-level options.

Activate Theme and Click Configure

Steps:

  1. Go to Dashboard → Pages & Themes → Themes
  2. Activate Subatomik
  3. Click Configure next to the theme

This is the central control panel for skins, dark mode behavior, and advanced appearance options.


2. Choose a Skin

Subatomik ships with multiple predefined skins.
A skin defines the overall visual identity of the theme, including colors, backgrounds, and base styling.

Ability to choose a Skin

How it works:

  • Select one skin as the default appearance
  • Changes apply globally across the site
  • Skins are safe to switch at any time

Tip: Skins are ideal for fast visual changes without touching custom CSS.


3. Configure a Different Skin for Dark Mode (Optional)

Subatomik supports independent skins for Light Mode and Dark Mode.

This allows you to:

  • Use a dedicated dark-optimized color palette
  • Improve readability and contrast in dark environments

Dark Mode Skin Selection

Dark Mode Skin Option

Dark Mode Preview Example

Dark Mode Preview

Behavior:

  • If no dark skin is selected, the default skin is reused
  • When enabled, the dark skin automatically activates based on user preference or system settings

4. Launch the Theme Customizer

For deeper control beyond skins, Subatomik integrates with the ConcreteCMS Customizer.

The Customizer allows live editing with instant visual feedback.

Launch Customizer

Customizer Panel


5. Customize the Theme

Inside the Customizer, you can fine-tune the theme without writing code.

Customize Theme

Typical customization options include:

  • Typography (fonts, sizes, line height)
  • Spacing and layout behavior
  • Colors and UI elements
  • Component-specific settings