Setting classes on Areas
Permalink
Hi All,
My question is around adding custom classes to areas. Obviously, you can do this manually via the Area > Edit Area Design > Advanced > Custom Class menu. I'm wondering if this can be done programmatically? Or is it possible to add custom templates to the area the way you can with blocks?
I know you can assign classes to the containers surrounding your areas in the page template code, but this will not work for how I need to implement this.
My question is around adding custom classes to areas. Obviously, you can do this manually via the Area > Edit Area Design > Advanced > Custom Class menu. I'm wondering if this can be done programmatically? Or is it possible to add custom templates to the area the way you can with blocks?
I know you can assign classes to the containers surrounding your areas in the page template code, but this will not work for how I need to implement this.
You could probably do it using javascript, but it would be better not to! I would have thought that a class assigned to the area in the template could be used to achieve the same thing, given suitable selectors—not that I'm an expert with those.
Let me clarify.
My theme allows the user to set a custom amount of page sections. Within each page section is an area. I've set it up this way because the website is designed to have full width color-block sections -- i.e. the first section on the page has a blue background that is the full width of the screen. But I want a custom amount of blocks to be able to be entered into each section -- however many is needed to present the information.
Currently, my implementation requires the user to add a new page section, then go to the new Area that was added to the page, click "Edit Area Design," set the background color and text color they desire, and then set a specific class so that it will sync up with the CSS and display correctly.
I'd like to eliminate having to set the class every single time, as the user is not necessarily CSS savvy and doesn't fully understand what this is for or why they need to do this. It's the same class every time. The reason I can't do this in the page template is because there are a custom number of sections and each section has a custom background color determined by the user -- a fully custom page -- and I need that background color style attribute to appear on the same element as the class name.
There are a limited number of background color and text color combinations -- so templates would be awesome if available for areas.
Hopefully that all made sense!
My theme allows the user to set a custom amount of page sections. Within each page section is an area. I've set it up this way because the website is designed to have full width color-block sections -- i.e. the first section on the page has a blue background that is the full width of the screen. But I want a custom amount of blocks to be able to be entered into each section -- however many is needed to present the information.
Currently, my implementation requires the user to add a new page section, then go to the new Area that was added to the page, click "Edit Area Design," set the background color and text color they desire, and then set a specific class so that it will sync up with the CSS and display correctly.
I'd like to eliminate having to set the class every single time, as the user is not necessarily CSS savvy and doesn't fully understand what this is for or why they need to do this. It's the same class every time. The reason I can't do this in the page template is because there are a custom number of sections and each section has a custom background color determined by the user -- a fully custom page -- and I need that background color style attribute to appear on the same element as the class name.
There are a limited number of background color and text color combinations -- so templates would be awesome if available for areas.
Hopefully that all made sense!
Essentially what I'm looking for is the correct way to write the second line (if it's even possible):
$a = new Area("Example Area");
$a->addCustomClass(".example-class");
I'm actually thinking now that this might be something I can set in custom_style.php...maybe? At least have the styles available as preset options in the Edit Area Design menu.
$a = new Area("Example Area");
$a->addCustomClass(".example-class");
I'm actually thinking now that this might be something I can set in custom_style.php...maybe? At least have the styles available as preset options in the Edit Area Design menu.
Yeah, I'm not seeing anything in the Area class that would help directly. Perhaps you could use setBlockWrapperStart() and setBlockWrapperEnd() to wrap the blocks in a DIV with the class you want (although this would mean adding another layer in your DOM).
Reference:https://documentation.concrete5.org/api/class-Concrete.Core.Area.Are...
Reference:https://documentation.concrete5.org/api/class-Concrete.Core.Area.Are...
Yeah, if the wrapper could be around each block, this would be super easy. However, I need the blocks to be all in one wrapper that is custom set depending on what the GUI user wants to set.
For the moment, I've just set some custom class options for the user to select (https://documentation.concrete5.org/developers/designing-for-concrete5/advanced-css-and-javascript-usage/adding-custom-css-classes-to-blocks-areas-and-the-editor). This is a workable solution, but I am still curious if there's anyway to programmatically set those design properties, so if anybody knows... let me know!
For the moment, I've just set some custom class options for the user to select (https://documentation.concrete5.org/developers/designing-for-concrete5/advanced-css-and-javascript-usage/adding-custom-css-classes-to-blocks-areas-and-the-editor). This is a workable solution, but I am still curious if there's anyway to programmatically set those design properties, so if anybody knows... let me know!
Are set block wrapper start/end working on v8 now? Last time I tried they were broken.
