- This topic has 14 replies, 4 voices, and was last updated 7 months, 3 weeks ago by
.
-
Posts
-
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
Customer Support
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/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-1I 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/Leo –
Sure. I understand. How about just a class to the body?
Antar
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/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?
Lead Developer
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-developmentHi, 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 ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentI 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.
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.Customer Support
We’re working on this ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
- You must be logged in to reply to this topic.