Invoke css by album

richam · 2019-12-08 18:27:10

Suppose you prefer a minor style modification to a particular album, but don't want to establish a separate page template just to call a different css file. How would you go about it? E.G. suppose I have 20 albums but want a purple background on just one. Is is possible to set up a if-then-else statement based on the name of the album slug, within the css or with a separate php function? Maybe there's an easier way?

Ben · 2019-12-08 20:09:23

Hi Mike, there are a number of classes added to the <body> tag that can be used by CSS to target specific albums and templates. For example, on your album at http://www.michaelrichardsphotography.c … y/c-olden/ there are these classes (amongst others):
template-identifier-Bez-Tray
album-template-id-143
slug-c-olden

The first two can be used to target all galleries with a given template (one using the identifier, and the other the unique ID that Backlight uses). The last can be used to target just galleries with the slug c-olden. That will apply to any galleries with that slug. It doesn't look like we provide a class that targets a specific gallery, but the chances are that the slug is unique across your galleries.

richam · 2019-12-09 14:21:05

Ben, appreciate the info, but need to know the rest of the story. Can a if-then statement be set up in css? Or should it be in php? If the latter, could it change a css parameter directly? Or should it just change to an alternate css file? For a specific example, I would like to increase the paddding on my Links page so that it's more centered. And it's the only page or album that I want changed, and don't want an alternate page template. How would I set it up?
http://michaelrichardsphotography.com/links/

rod barbee · 2019-12-09 14:49:32

You don’t need an if-then
Just use the body class to limit the css to that page.
Let’s say the slug for the Links page is “links.”
One of the body classes will be “slug-links”
Write the css starting with the body class:

.slug-links .selector....…{
padding: 12px;
}

That css will only work on the Links page.
Just look at the page’s source code for the <body> tag. You’ll see all the classes you can use to make css specific to that page, album, album sent, or template.

richam · 2019-12-10 00:19:34

Ben, Rod, thanks again. I got the desired result by using content width rather than padding:

.slug-links div.content.content_width {
max-width: 1000px;
}

Now armed and dangerous with css. Have to be careful.

Community @ The Turning Gate

#1 2019-12-08 18:27:10

Invoke css by album

#2 2019-12-08 20:09:23

Re: Invoke css by album

#3 2019-12-09 14:21:05

Re: Invoke css by album

#4 2019-12-09 14:49:32

Re: Invoke css by album

#5 2019-12-10 00:19:34

Re: Invoke css by album

Board footer