Archived topic
Custom CSS in Elements
5 replies · Started by Ivan Cazorla on December 18, 2018
Hi there,
Is it possible to add custom css to one page when using Elements? It would be awesome to be able to display certain elements in specific pages and be able to include css values to affect those pages too.
Is that possible to do?
Thanks,
Ivan
Hi there,
I'm not 100% what you are after but it's definitely possible to target CSS to a certain page(s).
For example, if you add the CSS below, it will only change the page header title Travel and nothing else.
body.page-id-4798 .page-hero h1 {
font-size: 50px;
}
Let me know if this helps :)
My question is that inside the Element when creating a new one, can you write some css to apply the pages you want or you have to do it manually in the css file linking every page you want to modify?
Like for example, I've created and Element that changes the color of the navigation and page hero to black. Link here I'd also want to set the body background to a dark color. Is it possible to add a css rule that only applies to when the page element is active? I don't want the body background to be dark if the page is not set to have that element page header.
Hope this clarifies what I am looking for.
Thanks,
Ivan
Hi there,
you could create a wp_head Hook Element with the same display rules as your Header Element. Add your CSS to that inside <style></style> tags
Thanks, I'll try that out!
You're welcome