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.
Let's say I have two rows with four columns each and I want to add a gray background to the second row.
Yes, you have to add the custom classes to the area that contains the layout.
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.
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.
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.
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.
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:
I would like to add a custom class like this:
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>
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.
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
That's interesting. It would be nice to be able to add a class to a concrete-generated layout.
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.
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.
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
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>
Thanks Lewismcarey!
core_area_layout << this is super helpful
core_area_layout << this is super helpful
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".
Very cool.
Superb. :)
Is there/will there be a method in page_theme.php for defining Area Layout Preset Classes - as per getThemeAreaClasses() for Areas?
@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.
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.
thanks +1'd it
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...
https://github.com/concrete5/concrete5/issues/3194#issuecomment-2063...
thanks a lot, - adding classes to layouts is fast 'n easy now.
+1
+1
Yes! Andrew's the man! And the rest of the team of course.
Any more or less firm deadline in mind?
Any more or less firm deadline in mind?
