Concrete5 is a great content management system - it wasn't originally designed to be a site building tool. In the years that Concrete CMS existed as a commercial product there were always accomplished designers and production developers building templates by hand for sites which clients would then manage with concrete. That being said, as concrete5 has matured in the open source world a lot of features have been added that let you quickly apply dramatically different looks without writing a line of code. 

NOTE: If you are a developer trying to implement your design in concrete5 you should quickly read this section but also head over to the Developers pages on Themes & Page Types

Design Tab

Put a page in edit mode and click the "Design" tab. You will be given this interface to change the Page type and Theme for this page:

Google ChromeScreenSnapz067.png

Page Types

When you add a new page to your concrete5 site, you have to choose a page type for it. Page types might determine layout, functionality, or a combination of both. Your default concrete5 install has a "Left Column" and "Right Column" page type that do exactly what they sound like. Your default concrete5 install also has a "Press Release" page type that looks exactly like the "Left Column" page type but stores some extra data a typical press release would need. Many add-ons create new page types to handle their functionality, eCommerce has a Product Detail page type, Calendar has an Event page type.. etc. 

Themes

Every page in your concrete5 site has a Theme applied to it as well. You can change which theme is used at a page level from the Design tab, or at a site wide level by going to Dashboad > Pages & Themes > Themes and clicking Activate next to the theme you choose. If you are using multiple themes in a site, new pages you make will automatically inherit the theme used on its parent. 

You can preview what many themes will look like by clicking the little magnifying glass next to the theme icon.

Customizing a Theme

Many of the Themes available in our marketplace have configurable styles. If you goto Dashboard > Themes and click "Customize" next to the theme you're using you'll see an interface like this:

Google ChromeScreenSnapz069.png

On the left configurable styles have been defined which you can control easily. Change the typography or color choices around for specific areas in the Theme, or insert your own CSS block using the "Add Your CSS" area. When you hit Save these changes will be applied across the whole site. You can always Reset your theme back to the way it was originally created.

Block Area & Block Design

Put a page in edit mode and click any block or block area.

Google ChromeScreenSnapz070.png

Unless this feature has been turned off in your configuration file you should see a "Design" option in the popup menu. This will bring up a CSS window that lets you define styles for colors, typography, even background images for any block or block areas. 

You can also save your style settings here and re-use them consistently with ease. 

Layouts

There are times when you need to have a block next to a block. Perhaps you want to have a survey inline with your content block. Perhaps you're trying to put headshots next to bio-blurbs and you don't want to use a table in the content editor. Add a layout to your block area to turn a single block area into many:

Google ChromeScreenSnapz071.png

The layouts tool from the block area will divide the area into as many parts as you want and give you draggable sliders to control the positioning. 

Recent Discussions on this Topic

inherit theme of the parent page

hi, I want to inherit the theme of the parent page when i add any page as a child of the parent. I didn't find any option to apply parent's theme. Is there any way? Thanks.

Editing themes

Am totally new to this but I have set up a site. I changed the top picture by deleting the theme picture and adding a block with my own picture (all in edit mode). Does this kind of thing - changing within the edit mode require me setting up my own them…

"Add Your CSS" to default Theme

Hi, I'm currently trying to customise the CSS for the default (Plain Yogurt) theme Adding CSS using the "Dashboard->Pages & Themes->Plain Yogurt->Customise->Add Your Own CSS" doesn't seem to have any effect! Am I missing something?

CSS

I noticed there is a CSS tab on top. I have tried experimenting with this will no success. What goes in here and how do we add our CSS code into here?