Community @ The Turning Gate

pideja

Member

From: Montreal

Registered: 2013-02-26

Posts: 1,299

Target specific page with CSS

I want the body text on this page to be white, with other tweaks, as this CSS code indicates:

 .the__copy>.content {
		background-color: transparent);
		border-radius: 1;
		box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.06), 0 4px 5px 0 rgba(0, 0, 0, 0.06), 0 1px 10px 0 rgba(0, 0, 0, 0.08);
		width: 100%;
		max-width: 1440px;
		padding: 50px;
		font-size: 1.25rem;
		color: white;
	}
   

But, written like this, all content text will be white, throughout the site.
I have tried "page template-id-12" and "page template-id-15" as indicated in the Inspector. But evidently, it's not correct.
Any suggestions?

http://pideja.ca/luc/en/exhibitions/

rod barbee

Moderator

From: Port Ludlow, WA USA

Registered: 2012-09-24

Posts: 17,830

Website

Re: Target specific page with CSS

I have tried "page template-id-12" and "page template-id-15"

Make sure you spell the class names correctly, including hyphens. Also make sure the dot class indicator precedes class names

if targeting all pages with that page template, the template selector is:

.template-id-12 not "page template-id-12"

so the entire selector is:
I have tried "page template-id-12" and "page template-id-15"

if targeting just that page, the page selector is:

.pages-template-identifier-exhibitions OR .pages-template-id-15 not  "page template-id-15"
and the entire selector is:

.pages-template-identifier-exhibitions .the__copy>.content OR .pages-template-id-15 .the__copy>.content

either of those target that page.

Or you can target the page by the slug selector:

.slug-exhibitions

with the entire selector:

.slug-exhibitions .the__copy>.content

---

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

pideja

Member

From: Montreal

Registered: 2013-02-26

Posts: 1,299

Re: Target specific page with CSS

Works fine, thanks Rod.

I can now target specific pages and/or sections. More control, more personal design.

rod barbee

Moderator

From: Port Ludlow, WA USA

Registered: 2012-09-24

Posts: 17,830

Website

Re: Target specific page with CSS

the addition of those body classes to Backlight is one of my very favorite features.

---

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

pideja

Member

From: Montreal

Registered: 2013-02-26

Posts: 1,299

Re: Target specific page with CSS

There is something I missed:

Trying to create a shadow on the image slideshow in the theater module, I copied the Inspector area that actually created the shadow:

 .slug-photos .the__gallery>.content {
    background-color: #0000;
    box-shadow: 5px 10px 20px 10px #888888;
    box-sizing: border-box;
    width: 50%;
    max-width: 920px;
}
    

This works when in the inspector, but when in the custom CSS file, no shadow appears.

What did I miss?

http://pideja.ca/luc/en/theater/

rod barbee

Moderator

From: Port Ludlow, WA USA

Registered: 2012-09-24

Posts: 17,830

Website

Re: Target specific page with CSS

you've got the selector in two locations in your css. On line 52 starts the css you posted above.

on line 135 is this, which overrides what came before:

.slug-photos .the__gallery > .content {
    background-color: #0000;
    box-shadow: none;
    box-sizing: border-box;
    text-align: center;
    width: 50%;
    max-width: 920px;
    }

---

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

pideja

Member

From: Montreal

Registered: 2013-02-26

Posts: 1,299

Re: Target specific page with CSS

Of course, you are right...one must read the entire file before signaling a mistake, "n'est-ce pas"?

Thank you.