[Resolved] Getting a class or ID for a Layout template

[Author]

Posts

[russellH-3]

Tell us what you are trying to do?

I'm trying to find a unique ID or class for a Layout template. I need this so that in the CSS I can specify a certain background image for any page which uses that same Layout template. For example, I'm making an 'About Us' Layout. I'd like any page with this Layout to have the same image in the background. I can see that on this page:

hidden link

... it has a unique class of '.page-id-19', I could use this in the CSS to specify the background image, but it'd only work for this page. I was hoping to get something more general that would be shared among other page using the About Us Layout.

Is there any documentation that you are following?

No.

Is there a similar example that we can see?

I've attached a couple screengrabs of my intended design. One shows how the About Us page has a particular image in the background. Then a second layout (which would use a different template) that has a different background image.

What is the link to your site?

hidden link

Thanks!

[Noman]

Hi Russell,

Thank you for contacting Toolset support. We cant apply this CSS using Layouts, because Layouts template is only applied on body content section, it does not apply on header or menu or outside content area.

But we can easily do that using WP approach, that is by copying the current page template and adding css class into that. I am working on it right now and will update you with details shortly.

Thank you

[Noman]

1. To achieve this, you can create your own custom Page Template by copying and renaming page.php template of theme (e.g. Mybackground Template), please follow this small tutorial to do this:
hidden link

2. Then add this template based css in your theme’s or child theme’s style.css file. You need to update template class name and image URL accordingly:

.page-template-page-mybackground {
	background-image: url("<em><u>hidden link</u></em>");
	background-repeat:no-repeat;
	background-size: 100% auto;
}

3. Now, you can select new Template from the “Page Template” section inside each page edit screen, where you want to add the background image. Example result is attached.

Thank you

[russellH-3]

Hey Noman:

Thanks Noman! You're a star. I really appreciate your help on this. I wasn't sure if I could have both WP-level page templates as well as Toolset Layout templates, but it does make sense.

Thanks so much for your help.

Cheers, R