A little known but very powerful feature of Backlight is the classes that are added to each page’s body tag. These classes include page type, page ID and identifier, page template ID and identifier, slug and more.
You can leverage these classes to target your custom css so that it only applies to, say, all albums. Or all albums using a specific template. Or, by using the slug class, you can target just one specific page.
For example, on my site I use one page as an index page for a series of lessons. These lessons are posted as albums and the index page is using a very customized version of the Descriptive album set layout. Since I also use the Descriptive layout for my regular albums, I wanted this index page to be uniquely targeted.
I wanted to create a “text index” that I could use again if needed. So I made an album set template and used “text-index” as its identifier.
The way to specifically target a page or template is to use a specific class from the body tag. First view the page’s source code and look for the <body> tag. Inside of the body tag you’ll see classes. Here are the classes in the body tag for the above mentioned indexing page:
<body class="pangolin type-album-set template-id-78 template-identifier-main album-set-template-id-66 album-set-template-identifier-text-index slug-back-to-basics cart-unready crg-unready" data-layout="1col right">
As you can see, there is a class in the body tag named “album-set-template-identifier-text-index.” I could have also used “album-set-template-id-66.” I prefer using the identifier because it makes more sense than using an id number.
In your custom css, precede any custom css you’re writing with the needed body class.
As just one example of this, in this text-only index, I wanted to remove thumbnails. The css for that is:
#albums img {
display: none;
}But that would remove the thumbnails from all album sets. Not what I want. But if I precede #albums img selector with the body class that’s specific to the album set template, then only album sets using that template will have the thumbnails removed.
Here’s the css I used to remove the thumbnail image from the Descriptive layout for just that template:
.album-set-template-identifier-text-index #albums img {
display: none;
}You can see the index page here.
If you have just one page you want to target, look for the “slug” class in the body tag. For the example here, that would have been .slug-back-to-basics.
Using body classes, you can very specifically target all sorts of pages or templates throughout your Backlight site.
