Adding custom classes to grid containers

Permalink
Is it possible to add custom classes to grid containers in 5.7 like you can do to for example blocks?

Let's say I have two rows with four columns each and I want to add a gray background to the second row.

Hypocrite
View Replies:
jakobfuchs replied on at Permalink Reply
jakobfuchs
Yes, you have to add the custom classes to the area that contains the layout.
Hypocrite replied on at Permalink Reply
Hypocrite
Yes, I can understand that.

What I would like to be able to do is to add classes also to grid containers.

That way users could style the grid rows also if needed without me having to add the classes to the area in template.
juddc replied on at Permalink Reply 1 Attachment
juddc
Put the page in edit mode and hover over the container area so that the area name appears in the tab on the lower left.

Click it, and select Edit Area Design.

You'll get a little toolbar (view attached) - click the image icon and you can set a background colour/image there.
Hypocrite replied on at Permalink Reply
Hypocrite
Sorry that I seem to be explaining the problem poorly.

This would again add the new custom class to the whole area which is not the effect I am after for.

Let's say that I have Main Area. And I want the user to be able to add multiple rows to the area and still be able to style each row differently. For example give them each a different background color.

To achieve this at the moment I would have to be editing the template files a lot to add new areas to the page where users could then add custom classes.

But I would like the user to be able to add a new grid row to the area and then add a custom style just to that row.

So basically when usually the bootstrap grid would be something like:

<div class="container">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>


I would like to add a custom class like this:
<div class="row bg-red">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
juddc replied on at Permalink Reply
juddc
As far as I know, that isn't possible. Concrete adds a div around the container, or a div around the content of a column. But not to the container, row, or column div itself.
mnakalay replied on at Permalink Reply
mnakalay
I think your best option is to create rows through layouts and then add your classes to the layout container from the menu. And by layout I mean Concrete5's areas layouts of course
juddc replied on at Permalink Reply
juddc
That's interesting. It would be nice to be able to add a class to a concrete-generated layout.
Hypocrite replied on at Permalink Reply
Hypocrite
That's exactly what I was after for.

Where can you add the classes to layouts? I could not find that option. I only see the icons to move the layout and delete it.
mnakalay replied on at Permalink Reply
mnakalay
Ok at first I really thought the option was there but I was wrong. I found a way to do it however but it's a bit (a lot) far fetched.. This is how I did it (in elemental):
1- I created a few presets (2 columns, 3 columns with bootstrap grid)
2- I added a layout in my area. I made it free grid 1 column
3- clicked on the layout and selected "add area design" and then the cog to add a custom class and I saved
4- I added a new layout to the previous layout and I selected one of my bootstrap presets

What I now have is
<div class="my-custom-class">
    <div class="row">
        <div class="col-sm4"></div>
        <div class="col-sm4"></div>
        <div class="col-sm4"></div>
    </div>
</div>
lewismcarey replied on at Permalink Reply
So for the record you can pass custom classes into ALL layout presets using the
getThemeBlockClasses()
method in page_theme.php
public function getThemeBlockClasses()
    {
        return array(            
            'core_area_layout' => array(
                'constrain',
                'is-centered'
            ),
        );
    }
smosmurf replied on at Permalink Reply
Thanks Lewismcarey!

core_area_layout << this is super helpful
andrew replied on at Permalink Reply
andrew
This is coming in 5.7.5. You'll be able to Edit Layout Design from the area menu (when clicking on a cell within a layout, the same way you can Edit Container Layout). Then you can customize the design of the entire layout – and only that layout. That means adding custom classes to the layout, custom designs, background images, etc... That are applied just to that layout, not the entire container area. We're adding a proof-of-concept custom template to the area layout as well, "parallax image".
juddc replied on at Permalink Reply
juddc
Very cool.
Hypocrite replied on at Permalink Reply
Hypocrite
Superb. :)
lewismcarey replied on at Permalink Reply
Is there/will there be a method in page_theme.php for defining Area Layout Preset Classes - as per getThemeAreaClasses() for Areas?
MrKDilkington replied on at Permalink Reply
MrKDilkington
@lewismcarey

There is a GitHub feature request issue for this:
https://github.com/concrete5/concrete5/issues/3194...

I recommend posting to the issue to show your interest.
lewismcarey replied on at Permalink Reply
thanks +1'd it
lewismcarey replied on at Permalink Reply
Wasn't sure if it was clear or not but you can add classes to layout presets in a broader stroke by using the getBlockThemeClasses method:

https://github.com/concrete5/concrete5/issues/3194#issuecomment-2063...
blinkdesign replied on at Permalink Reply
blinkdesign
thanks a lot, - adding classes to layouts is fast 'n easy now.
+1
mnakalay replied on at Permalink Reply
mnakalay
Yes! Andrew's the man! And the rest of the team of course.

Any more or less firm deadline in mind?