How to clone and customize Atomik theme

This is a community-contributed tutorial. This tutorial is over a year old and may not apply to your version of Concrete CMS.
Feb 14, 2022

Theme development in v9 is different to that in v8 although with knowing the minimal steps it's not difficult. Below are the minimal steps required to clone the core Atomik theme and to customize it. Those are not for creating a theme from scratch. They are meant to be for minor styling modification based on the existing Atomik theme only.

Refer to these 2 guides for Concrete CMS theme development:

Prepare development environment

  • download latest release of Concrete CMS github repository: https://github.com/concrete5/concrete5
  • copy concrete/themes/atomik folder to application/themes and rename theme, e.g. your_theme_name
  • make necessary folder, file and class renamings (see afixia-theme-basic-bedrock guide)
  • make ‘build’ folder in application/themes
  • move concrete/themes/atomik/main.js file to build/assets/js
  • move concrete/themes/atomik/css/scss folder to build/assets
  • copy concrete/themes/atomik/css/presets/default folder to build/assets/scss/presets
  • delete main.js file and css folder from atomik
  • create webpack.mix.js in build folder:
let mix = require('laravel-mix');

mix.webpackConfig({
    externals: {
        jquery: 'jQuery',
        bootstrap: true,
        vue: 'Vue',
        moment: 'moment'
    },
})
mix.options({
    processCssUrls: false
})
mix.setPublicPath('../your_theme_name');

mix
    .sass('assets/scss/presets/default/main.scss', 'css/skins/default.css')
    .js('assets/js/main.js', '');

Compile theme js and css

  • npm install
  • npm i @concretecms/bedrock
  • npm i laravel-mix
  • npm run production

or for automatic compiling after any change:

  • npm run watch

Customize cloned theme

  • open build/node_modules/bootstrap/scss/_variables.scss to use as reference for all Bootstrap variables
  • assign your own values to the Bootstrap variables or define your own new variables in application/themes/build/assets/scss/presets/default/_variables.scss
  • add your common styling in application/themes/build/assets/scss/_common.scss below all imports
  • add skin specific styling in application/themes/build/assets/scss/presets/default/_variables.scss
  • compile theme JS and SCSS assets
  • upload application/themes/your_theme_name/assets/js/main.js and application/themes/your_theme_name/assets/scss/presets/default/main.scss to your server

Override and style blocks

  • copy original block view.php to application/themes/your_theme_name/blocks/templates
  • copy original block view.js to application/themes/build/assets/js and rename it, e.g. some_block.js
  • import block JS into main.js:
    import "./some_block";
  • copy original block view.css to application/themes/build/assets/scss/blocks and rename it, e.g. _some_block.scss
  • import block scss into _common.scss:
    @import "blocks/some_block";
  • change view.php, some_block.js and _some_block.scss as you need
  • compile theme JS and SCSS assets
  • upload application/themes/your_theme_name/blocks/templates/template_name/view.php, application/themes/your_theme_name/assets/js/main.js and application/themes/your_theme_name/assets/scss/presets/default/main.scss to your server

There's always area for improvement. Please feel free to make this better.

Recent Tutorials
Using the Concrete Migration Tool Addon
Apr 27, 2023

How to use the Concrete CMS Migration Tool

How To Add Page Last Updated To Your Concrete CMS Pages
Mar 7, 2023

Concrete CMS has a page attribute you can add to a global area called "Page Date Modified." Here's how to add it

How To Exclude Subpages from Navigation
Dec 24, 2022

How to exclude subpages from navigation - useful for a news or blog link in your main navigation where you don't want all the subpages to appear in a drop down menu.

How Can I Change The Maximum Size Of Uploaded files
Dec 13, 2022

This tutorial explains how to update your php settings.

Updating Concrete Themes from Version 8 to Version 9
Nov 24, 2022

This tutorial covers commonly encountered issues when upgrading a Concrete CMS theme from version 8 to version 9

Transferring ownership of an add-on and a theme
Nov 15, 2022
By katzueno.

If you encounter a Concrete CMS add-on or theme that you love but not being maintained, you may want to ask the author to help or take over the add-on or theme. Here is the quick step-by-step guide of how to transfer the ownership.

Was this information useful?
Thank you for your feedback.