Archived

This topic is now archived and is closed to further replies.

  • 0

Customize Hero Section By Page ID

Question

Posted · Report post

I may have misinterpreted this but is it possible to have a custom hero box per page? I've been trying to do this using the following code.

 

#page .page-id-59 #hero .pl-hero-wrap {background-color: #9ee851;}
#page .page-id-59 #hero p {color:#ffffff}
#page .page-id-59 #hero .m-bottom {color: #ffffff;}
#page .page-id-8 #hero .pl-hero-wrap {background-color: #ff66ac;}
#page .page-id-8 #hero p {color:#ffffff}
#page .page-id-8 #hero .m-bottom {color: #ffffff;}

 

 

 

When I publish this code it reverts back to default. I can customize it generally but when I add page-id-x it fails.

Share this post


Link to post
Share on other sites

2 answers to this question

Posted · Report post

Hi,

 

The following code should work, which you can use as a template for your pages.

 

.page-id-2 .pl-hero-wrap { background: red; }
.page-id-2 .pl-hero h1 { color: white; }
.page-id-2 .pl-hero p { color: white; }

If the above code doesn't work at first you may need to use a PageLines override such as #site or #page. Which will look like this:

 

#site .page-id-2 .pl-hero-wrap { background: red; }
#site .page-id-2 .pl-hero h1 { color: white; }
#site .page-id-2 .pl-hero p { color: white; }

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Danny, first example worked. Thanks!

Share this post


Link to post
Share on other sites