How to create own Layout / Theme?

Hello folks,

I would like to develop my own layout for my website. I am interested in my own structures (Areas, GlobalArea, …), my own (local) fonts, my own CSS etc.
When I look at the documentation (Working with Themes), I feel completely overwhelmed. I’m actually quite familiar with PHP, HTML, CSS & Co, so I could quickly create a basic framework for my website, but the way it looks in the documentation, it’s a bigger task. Taking a ready-made theme (elemental), copying it and customising it is not trivial either. (I’ve just ruined my ConcreteCMS installation)
Does it have to be that complicated or is there an easy way to create your own layout for ConcreteCMS?

Thanks for any tips

Use Elemental Cloner to create a starting point. Beware that Elemental is based on bootstrap v3, so the css is a little dated.

Thank you very much for the tip. I’ll have a look at that. :slight_smile:
It won’t be that easy to quickly replace bootstrap 3 with version 5, will it?

Probably not that difficult for the general theme and page templates. A bit more troublesome for the custom block templates. But if you do not need BS5, cloning elemental is by far the easiest way to get started and learn about general theme structure without having to learn the Bedrock build process. So worth doing just to learn about building a packaged theme, even if you throw it away later.

For Bootstrap 5 the documented Bedrock / Atomik way (with foibles, see back through forums) is the way to go for a completely self contained and Concrete optimised theme.

Another way is to build a shim. So you load Atomik, then add another ‘shim’ theme on top to adapt it. That can work well and saves a lot of hassle as long as the shim does not try and do too much. If you search back for ‘shim’ you will find previous threads.

1 Like

If you ok to pay for my time i would be more than happy to talk you through the whole html to template route.

I probably do around 10-15 of these a year. Its really easy once you understand the basic concepts.

Well that’s a polite way of stating it. :slight_smile:

After going the new route, Elemental and the old way of slapping some files here and there is akin to smashing rocks all day.

@trickler Go through the forums instead of the official guide and ask for help where you are missing the info

1 Like

@JohntheFish @gotofil Thank you both for your comments and suggestions. Ok, cloning Elemental would be a start if it’s going to be easy at first. If I want it to be fancy, I would have to get to grips with Bedrock.

PHP, HTML, Javascript and CSS are actually all common topics for me. Roughly how much time do you think it will take to work through it? If I lock myself in my room, would I be able to start building my own themes as clones of Elemental in two days or rather two weeks? How much longer is the learning curve for Bedrock? Do you have a vague basic feeling?

Its a very individual question. There are many Concrete things to learn besides themes, so how much do we allow for that.

As a learning path, create a block template, then create a block, then create a package, then apply that knowledge to creating a theme.

So, once you have the above basics, staring from a clone of elemental, 2-3 days. Going the full Atomik route, allow at least another week of learning and fiddling. Creating a shim for Atomik would be somewhere in the middle.

@trickler it really not that hard… but takes a little bit of time to learn.

Then it a case of finding parts of you HTML that you want to replace with a block and then create block templates.

Like I said before I would be willing to go over it all with you. It would only take 1-2hrs, but you would have a good foundation after that.

I don’t think copying other themes is the way to go as you end up with so much unnecessary code.

I have a boilerplate theme I start with every theme which I add have added to over time. This means now creating bespoke designs for sites is really easy.

Check out some of my latest sites all of these started off as Adobe XD designs that I created