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

By linuxoid for Editors, Designers, Developers

Edit

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