# Containers in themes: how to predefine css-class for selecting

**URL:** <https://forums.concretecms.org/t/containers-in-themes-how-to-predefine-css-class-for-selecting/3298>\
**Category:** Developing with Concrete\
**Created:** [June 15, 2022, 9:48am UTC](https://forums.concretecms.org/t/containers-in-themes-how-to-predefine-css-class-for-selecting/3298 "2022-06-15T09:48:34Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![webpresso](https://forums.concretecms.org/user_avatar/forums.concretecms.org/webpresso/32/6235_2.png) [@webpresso](https://forums.concretecms.org/u/webpresso)\
**Post date:** [June 15, 2022, 9:48am UTC](https://forums.concretecms.org/t/containers-in-themes-how-to-predefine-css-class-for-selecting/3298/1 "2022-06-15T09:48:34Z")

</div>

Since version 9.1 it is possible that each container has the possibility to add custom styling (brush icon). For areas there is a possiblity to set predefined css-classes - how does this work for containers?

For areas this documentation page is helpful – but it covers nothing for containers. And I can us **getThemeAreaClasses()**  
[https://documentation.concretecms.org/developers/pages-themes/designing-for-concrete5/advanced-css-and-javascript-usage/adding-custom-css-classes-to-blocks-areas-and-the-editor](https://documentation.concretecms.org/developers/pages-themes/designing-for-concrete5/advanced-css-and-javascript-usage/adding-custom-css-classes-to-blocks-areas-and-the-editor)

Anyone nows if its possible?

---

<div class="post-metadata">

**Author:** ![JohntheFish](https://forums.concretecms.org/user_avatar/forums.concretecms.org/johnthefish/32/3767_2.png) [@JohntheFish](https://forums.concretecms.org/u/JohntheFish)\
**Post date:** [June 15, 2022, 12:12pm UTC](https://forums.concretecms.org/t/containers-in-themes-how-to-predefine-css-class-for-selecting/3298/2 "2022-06-15T12:12:30Z")

</div>

Just guessing here.

Behind the scenes, a container is a special kind of block, so I would begin by looking at equivalent block functionality.

(That kind of extrapolation works well enough for layouts and stacks, which are also special kind of blocks)

---

<div class="post-metadata">

**Author:** ![webpresso](https://forums.concretecms.org/user_avatar/forums.concretecms.org/webpresso/32/6235_2.png) [@webpresso](https://forums.concretecms.org/u/webpresso)\
**Post date:** [June 15, 2022, 2:27pm UTC](https://forums.concretecms.org/t/containers-in-themes-how-to-predefine-css-class-for-selecting/3298/3 "2022-06-15T14:27:50Z")

</div>

Yeah I searched for this. But it doesn’t seem to work. For blocks i can use in page\_theme.php the function _getThemeBlockClasses()_ and for areas I can use _getThemeAreaClasses()_ – but I didn’t found anything like _getThemeContainerClasses()_.

---

<div class="post-metadata">

**Author:** ![JohntheFish](https://forums.concretecms.org/user_avatar/forums.concretecms.org/johnthefish/32/3767_2.png) [@JohntheFish](https://forums.concretecms.org/u/JohntheFish)\
**Post date:** [June 15, 2022, 2:39pm UTC](https://forums.concretecms.org/t/containers-in-themes-how-to-predefine-css-class-for-selecting/3298/4 "2022-06-15T14:39:31Z")

</div>

But if you have a container ‘block’ object, you could try getThemeBlockClasses() on that container object.

---

<div class="post-metadata">

**Author:** ![webpresso](https://forums.concretecms.org/user_avatar/forums.concretecms.org/webpresso/32/6235_2.png) [@webpresso](https://forums.concretecms.org/u/webpresso)\
**Post date:** [June 16, 2022, 6:35am UTC](https://forums.concretecms.org/t/containers-in-themes-how-to-predefine-css-class-for-selecting/3298/5 "2022-06-16T06:35:35Z")

</div>

```auto
    //Blockclasses
    public function getThemeBlockClasses()
    {
        return [
            'image' => [
                'circle-image'
            ],
            'wbox_button' => [
                'center-block'
            ],
            'col_single_white' => [
                'narrow-container'
            ]
        ];
    }

```

That was my try to add the handle of container (like block handle) to `getThemeBlockClasses()`. In my example `col_single_white` is my container handle.

But i don’t get any classes on the container. There is still an empty list. I tested the same with `getThemeAreaClasses()` without success.

So it’s probably not implemented yet.

 ![grafik](https://forums.concretecms.org/uploads/default/original/2X/9/9c2a074f3bbbc664a3be203e5aebe1e09da9cdb6.png)

---

<div class="post-metadata">

**Author:** ![anon83226287](https://forums.concretecms.org/letter_avatar_proxy/v4/letter/a/9de0a6/32.png) [@anon83226287](https://forums.concretecms.org/u/anon83226287)\
**Post date:** [June 16, 2022, 3:41pm UTC](https://forums.concretecms.org/t/containers-in-themes-how-to-predefine-css-class-for-selecting/3298/6 "2022-06-16T15:41:07Z")

</div>

you could use the wildcard \*, works on all blocks & layouts

```auto
public function getThemeBlockClasses()
    {
			return [
            '*' => [
                'your-container-class',
            	],
        ];
    }

```

it somehow works for me.

---

<div class="post-metadata">

**Author:** ![anon57845837](https://forums.concretecms.org/letter_avatar_proxy/v4/letter/a/94ad74/32.png) [@anon57845837](https://forums.concretecms.org/u/anon57845837)\
**Post date:** [June 22, 2022, 7:04am UTC](https://forums.concretecms.org/t/containers-in-themes-how-to-predefine-css-class-for-selecting/3298/7 "2022-06-22T07:04:07Z")

</div>

This is great. I didn’t know it exists. Would that also work in CKeditor?

---

<div class="post-metadata">

**Author:** ![webpresso](https://forums.concretecms.org/user_avatar/forums.concretecms.org/webpresso/32/6235_2.png) [@webpresso](https://forums.concretecms.org/u/webpresso)\
**Post date:** [June 23, 2022, 3:16pm UTC](https://forums.concretecms.org/t/containers-in-themes-how-to-predefine-css-class-for-selecting/3298/8 "2022-06-23T15:16:08Z")

</div>

Hey blinkdesign! Thanks, this works indeed. Thanks!

---

<div class="post-metadata">

**Author:** ![webpresso](https://forums.concretecms.org/user_avatar/forums.concretecms.org/webpresso/32/6235_2.png) [@webpresso](https://forums.concretecms.org/u/webpresso)\
**Post date:** [June 23, 2022, 3:20pm UTC](https://forums.concretecms.org/t/containers-in-themes-how-to-predefine-css-class-for-selecting/3298/9 "2022-06-23T15:20:05Z")

</div>

Hi carmel. You can add predefined classes to ckeditor. There is a [documentation page for that.](https://documentation.concretecms.org/tutorials/adding-ckeditor-custom-editor-styles-in-a-theme-content-blockrich-text-editor)  
Basically you add a code section to your theme in page\_theme.php an define styles. They are presented in the ckeditor in a dropdown.

---

<div class="post-metadata">

**Author:** ![anon57845837](https://forums.concretecms.org/letter_avatar_proxy/v4/letter/a/94ad74/32.png) [@anon57845837](https://forums.concretecms.org/u/anon57845837)\
**Post date:** [June 24, 2022, 11:31am UTC](https://forums.concretecms.org/t/containers-in-themes-how-to-predefine-css-class-for-selecting/3298/10 "2022-06-24T11:31:32Z")

</div>

Thanks for the info @webpresso. I want to use styles within CKeditor, like type and colors.

---

<div class="post-metadata">

**Author:** ![anon83226287](https://forums.concretecms.org/letter_avatar_proxy/v4/letter/a/9de0a6/32.png) [@anon83226287](https://forums.concretecms.org/u/anon83226287)\
**Post date:** [June 27, 2022, 2:13pm UTC](https://forums.concretecms.org/t/containers-in-themes-how-to-predefine-css-class-for-selecting/3298/11 "2022-06-27T14:13:07Z")

</div>

@webpresso Great it works!

@anon57845837 You can use Site.php to configure classes within CKeditor.  
see [Example site.php for adding custom CKEditor configuration options - application\config\site.php · GitHub](https://gist.github.com/MrKarlDilkington/5a14cf2c8aca511c8c9d2026e07b297c)  
and [Class Config (CKEDITOR.config) - CKEditor 4 API docs](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html)

```auto
<?php
return [
    'sites' => [
        'default' => [
            'editor' => [
                'ckeditor4' => [
                    'custom_config_options' => [
                        // corporate colors
                        'colorButton_colors' => '000,fff,ff9900,3399CC,0066CC,33CCCC',
                    ],
                ]
            ]
        ]
    ]
];

```

---

<div class="post-metadata">

**Author:** ![anon57845837](https://forums.concretecms.org/letter_avatar_proxy/v4/letter/a/94ad74/32.png) [@anon57845837](https://forums.concretecms.org/u/anon57845837)\
**Post date:** [July 11, 2022, 10:02am UTC](https://forums.concretecms.org/t/containers-in-themes-how-to-predefine-css-class-for-selecting/3298/13 "2022-07-11T10:02:56Z")

</div>

is great. how to make ```  
‘colorButton\_colors’

```auto
to be same like variable color in theme? so i can change variable color everywhere in site?
thank you
```

---

<div class="post-metadata">

**Author:** ![anon83226287](https://forums.concretecms.org/letter_avatar_proxy/v4/letter/a/9de0a6/32.png) [@anon83226287](https://forums.concretecms.org/u/anon83226287)\
**Post date:** [July 12, 2022, 7:40am UTC](https://forums.concretecms.org/t/containers-in-themes-how-to-predefine-css-class-for-selecting/3298/14 "2022-07-12T07:40:16Z")

</div>

‘colorButton\_colors’ are inline styles. You need to set the same color values in the theme variables and in ‘colorButton\_colors’.

There might be a way to programmatically use theme variables to change colors sitewide. If you need that, PM me and I send you the contact info of our developer. She might help you with that.

---

<div class="post-metadata">

**Author:** ![VisualNotes](https://forums.concretecms.org/user_avatar/forums.concretecms.org/visualnotes/32/3547_2.png) [@VisualNotes](https://forums.concretecms.org/u/VisualNotes)\
**Post date:** [May 14, 2025, 9:34pm UTC](https://forums.concretecms.org/t/containers-in-themes-how-to-predefine-css-class-for-selecting/3298/15 "2025-05-14T21:34:29Z")

</div>

Defining custom classes for Containers. Here is the solution.  
Since a container is a core block, custom classes for selection can be defined in page\_theme.php as follows:

 ![container_classes_01](https://forums.concretecms.org/uploads/default/original/2X/2/2d4dd2310472a443e1035932dc81b0ba80b7fce0.png)

This results in the predifined classes showing up on the frontend:

 ![container_classes_02](https://forums.concretecms.org/uploads/default/original/2X/5/5959659df11490d15e12cc34a4595703ebe2bb6e.jpeg)

---

<div class="post-metadata">

**Author:** ![webpresso](https://forums.concretecms.org/user_avatar/forums.concretecms.org/webpresso/32/6235_2.png) [@webpresso](https://forums.concretecms.org/u/webpresso)\
**Post date:** [May 15, 2025, 6:51am UTC](https://forums.concretecms.org/t/containers-in-themes-how-to-predefine-css-class-for-selecting/3298/16 "2025-05-15T06:51:03Z")

</div>

Thank you!! This is the answer I was looking for. Did some too complex workaround in the meantime. Thanks for taking the time to answer and making screenshots!

---

<div class="post-metadata">

**Author:** ![cobyR](https://forums.concretecms.org/user_avatar/forums.concretecms.org/cobyr/32/5178_2.png) [@cobyR](https://forums.concretecms.org/u/cobyR)\
**Post date:** [May 15, 2025, 9:11am UTC](https://forums.concretecms.org/t/containers-in-themes-how-to-predefine-css-class-for-selecting/3298/17 "2025-05-15T09:11:31Z")

</div>

for years i made it with the wildcard \*

But for some weird reason containers with these now elegantly attached classes don’t show in composer templates.

I wonder if I have it right.