Site logo

Archived topic

Custom CSS in Elements

5 replies · Started by Ivan Cazorla on December 18, 2018

Viewing posts 1–6 of 6

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

This archived topic is closed to new replies.