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

Developing with Concrete
1

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

Anyone nows if its possible?

2

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)

3

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().

4

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

5 
    //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
grafik694×502 22.2 KB

6

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

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

it somehow works for me.

4 Likes
7

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

8

Hey blinkdesign! Thanks, this works indeed. Thanks!

9

Hi carmel. You can add predefined classes to ckeditor. There is a documentation page for that.
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.

1 Like
10

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

11

@webpresso Great it works!

@carmel 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
and Class Config (CKEDITOR.config) - CKEditor 4 API docs

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

is great. how to make ```
‘colorButton_colors’

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

‘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.