Archived topic
Page Layout Element
14 replies · Started by Antar on November 26, 2019
Hello, All
I would be very useful if I could add a css class to a page layout element. From what I can see the element creates/modifies a div with the id=content and class=site-content.
Why not give users the opportuniuty to insert their own class too? This would open up a host of customisation options for the main page content.
Just a thought.
Antar
Hi there,
Can you provide an example of what you are trying to achieve and the difficulty without custom class?
Let me know :)
Hi, Leo -
This idea stems from my client asking to see two versions of their site design in one demo. They want to see a full-width version and a boxed version simply by visiting different pages on the site.
It occurred to me this would be very useful but I would need to lay down some extra CSS classes to make it all happen. Ideally it would be great if a page element layout would allow me to insert my own class into the body and the main content area. That would allow me to create a boxed design from a full-width set-up pretty easilly. It's not just the page width but also the background colours and text alignment.
I can do it with snippets. It would be even better if I could do inside GP.
Antar
You should be able to use the page builder container options in the layout element module for the fullwidth vs boxed requirement:
https://docs.generatepress.com/article/layout-element-overview/#content-1
I can't really recall someone else requesting this so I'm not sure if a feature like this would be useful for the majority of users.
If we add custom class option to the site-content div, then what about header, footer and sidebar etc? Could end up with lots of extra code.
Keep in mind that we try to keep GP lightweight and fast :)
Leo -
Sure. I understand. How about just a class to the body?
Antar
Hi, Leo -
I use this snippet a lot. What I need is a conditional that will allow me to hook it to an element layout. So if "this" layout is asigned to a page, then run the body class code.
Can it be done?
Interesting - so an input in the Layout Element which adds a body class? I could see that being helpful to some users. Will think on it :)
Hi, Tom -
Yes, that's the idea. Being able to assign a unique body class to every element layout would open up a range of possibilities. The more you think about it the more sense it makes.
Yea, I like the idea - will look into adding it in 1.10 :)
I agree with Antar.
Now I use Elements' Hook (in wp-footer) to achieve additional class on body element.
<script>
jQuery(document).ready(function($) {
$('body').addClass('my-class');
});
</script>My customization isn't dramatic so I don't need to create a new template.
Rafał's solution is very good, though I would like to have the option to add body CSS classes (via a text input field) on the GP Layout element page.
Hi @Tom,
Any news on this ?
I still think I would be a great addition !
Thanks,
Fabien
Just simple input field "Class(es)" to add the string to the <body> element.
GP Devs, You can!
Please :)
It would work for every type of Element / Hook, but Layout Element needs it most, I believe, like a template for CSS.
We're working on this :)
