Page Layout Element

[Antar]

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

[Leo]

Hi there,

Can you provide an example of what you are trying to achieve and the difficulty without custom class?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Antar]

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

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Antar]

Leo –

Sure. I understand. How about just a class to the body?

Antar

[Leo]

Something like this?
https://generatepress.com/forums/topic/body-class/
https://generatepress.com/forums/topic/custom-css-body-class-field/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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?

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Antar]

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.

[Tom]

Yea, I like the idea – will look into adding it in 1.10 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Rafał]

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.

[Author]

Posts