How to clone and customize Atomik theme

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
Generate a report with author information and form summaries in Concrete CMS.
May 9, 2022

In Concrete CMS, you can use a form to initiate contact between logged-in users and then create helpful reports. After form submissions are collected, they can be searched, sorted, and exported as a spreadsheet. This tutorial will detail how to add author information to a report using the advanced search.

How to clone and customize Atomik theme
Feb 14, 2022
By linuxoid.

How to clone and customize Atomik theme

Update jQuery to 3.5 on Concrete CMS version 8.5.x
Dec 1, 2021
By hissy.

If you have to take some time to fix your site to work with version 9 and want to update jQuery immediately, you can override it.

Add-On Developers: Get Your Add-Ons Ready for Concrete CMS 9.0
Aug 6, 2021
By andrew.

Concrete CMS 9.0 is coming! But there are some changes in version 9 that might affected your add-ons and themes. This document aims to answer questions about the most common ways that your add-ons might need to be changed, and common problems you'll run into.

Permissions for editors in a multilingual site
Jun 2, 2021
By myq.

How to set up a multilingual Concrete CMS site for groups of language-specific editors

Getting Started with Doctrine in Concrete CMS
Jan 20, 2021
By linuxoid.

Doctrine is a very flexible, simple (once you get to know it better) and powerful PHP library for database interactions primarily focused on the ORM = Object Relational Mapping and DBAL = DataBase Abstraction Layer.

Was this information useful?
Thank you for your feedback.