Creating my own theme question


I’m hoping someone could help me please.

I’ve been reading the documentation here about how to create your own theme:

Is this the best guide to use to creating my own theme?

Basically, I have a theme that was working for Drupal 10, but thought I’d try and migrate it over to Concrete.
I’m not new to HTML, CSS and such but lack some of the core understanding on how Concrete 9 now does it’s theming.

For example, I’ve followed the guide on the link above and got a package/theme installed, however as soon as I added the php code to include the required header info, all my links to my CSS and JS is then moved into the body area.

In addition, once I added the content area, I’m getting an error, which is “Call to a member function getPageThemeGridFrameworkName() on null”.

I can only assume this is because the install of Concrete was with the new Atomik theme and I’ve not defined a grid framework anywhere.

Could anyone point me to the right links/guides please?

Many thanks

The official doco and that guide are going to be the go-to resources for all the details about creating a theme.

But I’d recommend just keeping things very simple to begin with, and built it up with features, rather than trying to consider everything that might be outlined in the doco.

One thing that might help is a bare-bones demo theme I put together once, with quite a number of comments:

If you look through that it explains the minimum stuff you need.
There’s also some tips about CSS in there as well:

A common issue when you take an existing non-Concrete theme’s CSS and try to make a theme with it is that the CSS styles are too broad, and target the interface elements. Wrapping styles in .ccm-page is often needed (as explained in that css file)


thank you for the information.
That makes more sense now :slight_smile:

In regards to CSS, I’m old school so I’m not used to LESS or SASS.
I know the theme I’ve got does use/is SASS compatible, but how do you make use of it?

You mentioned in your demo theme that it’s best to put a prefix onto the CSS bit for the styling.
Can you add that to an existing SASS?

Many thanks

Sass is something that is compiled.

  • You’ll start with something like a main.scss file.
  • That file might include other sass files, have sass variables, etc
  • You then compile that file, with the output being a normal css file, i.e. main.css, and it’s that file That your theme links to. Sass compilers can also do things like compress the CSS.

So the first step is to find a Sass compiler for your setup, and get that successfully compiling the sass you have. There are apps/programs, free and paid, as well as command line approaches.
Generally you set those compilers up to automatically detect when you edit your sass and it automatically re-compiles the css, so you don’t have to keep triggering that step manually.

Once you’ve got that compile step happening, you can tinker with the sass, do things like change variables to change colours in bulk, that kind of thing.

But one thing that sass is really good for is that you can write your sass nested.

So you can write something like.

.my_class {
    h2, h3, h4 {
        color: purple;
   p {
        strong {
            color: green;


and that converts to CSS:

.my_class h2, .my_class h3, .my_class h4 {
color: purple;

.my_class p strong {
color: green

That’s a simple example, but it illustrates how you can wrap a section of css with a class, and it will automatically prefix all the rules.

Where it gets quite powerful is that that it will work with includes as well, so you can do something like this:

.ccm-page {
  @import "partials/base";

And inside partials/_base.scss (note the underscore), you can put regular css, like all your regular element styling. When compiled, everything inside that file will be prefixed.

It means that if you’ve got some partial with a whole bunch of styles that are conflicting, you can just wrap that, and it’ll ensure everything inside it can only target elements within your actual page content (which automatically has ccm-page class on it).

Depending on how your sass is setup, sometimes you can just wrap everything. But it’s something to use sparingly, as it can just blow out the side of your stylesheets.

Once you know Sass, Less is basically the same concept.
I’d really recommend adding it to your skillset. It’s one of those things that really doesn’t take more than an hour or two to start using, but it’s immensely usefull.

Thanks again for the detailed info.
I’ve been giving it a try with the information from the Concrete documentation I linked.

But I seem to have hit another stumbling block :frowning:

When I run “npm run prod” or “npm run dev”, it seems to be compiling the css but I just can’t find the compiled css files on the server.

I’m not getting any errors either.
I did originally as it was looking for files that I forgot to upload.

Many thanks

Perhaps try doing the compile stage locally, and then you can more easily search in a folder for created .css files.

If you running npm, you’re running more of a build script, rather than just compiling the sass, so it could be configured in different ways. Keeping chasing through the scripts, to see if you can spot an output folder.

So I’ve managed to get the sass compilation to work within VS Code and npm on my device.

Not sure why Laravell Mix didn’t want to do it on my dev server.

This is what I have in the webpack.mix.js file:

let mix = require(‘laravel-mix’)

// Make sure the public path is declared

.sass('/theme/sass/template.scss', 'public/packages/anatomy_theme/themes/anatomy_theme/css/template.css')

No errors pop up anywhere tbh.
Just says a few fonts and images are emitted, i assume because of the size.

Thought I’d respond to my own post.
The issue with the sass compilation was that my dev server (which is a new virtual server from DigitalOcean) had an outdated nodejs and npm install.
Updated all that and Laravel Mix and it’s working now.

I know Concrete is built on Laravel, but is Laravel Mix a separate product?

Also, is there a trick to handling images when you reference them in sass?

Many thanks

Concrete is built on top of many things like Symfony component, Laravel libraries, etc. not only Laravel.

Laravel mix is separate product, you can swap it with Gulp, Symfony Encore, Vite etc. Whatever scss compilator you are familiar with.
Personally, I don’t like Laravel Mix, since it doesn’t support sass-embedded (where scss compilation is 2x faster). I am using Symfony Encore and used Gulp earlier (both has sass-embedded support).

Use image urls relative to generated CSS file, like


../ moves you one folder up (from css folder).