Jump to content
glynt

Target specific page template in CSS

Recommended Posts

glynt

Hi all,

 

Can anyone tell me how to target a specific page template in CSS?

 

Many thanks,

 

 

Glyn

Share this post


Link to post
Share on other sites
Danny

Hi Glyn,

 

All posts/pages are given a unique ID via a class, which can be found by in the <body> tag. I recommend using FireBug or your browsers built-in web dev tools and inspect your page, then view the body tag.

 

Pages have a class that looks like this:

 

page-id-X

 

Replace X with the ID, you can use it in your custom CSS like this:

.page-id-X .section-branding .content { }

 

Posts have a class that looks like this:

 

postid-X

 

And so, all the classes that allow you to target specific pages, posts, archives, categories etc.. are in the body tag.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
glynt

Hi Danny,

 

Thanks very much for your reply!

 

I don't actually want to target a specific page, but all pages using a specific template such as template 3 (sorry, I don't think I explained myself very well....).

 

Is it possible to do that??

 

Thanks

Share this post


Link to post
Share on other sites
Danny

Here are the classes used for each page template.

 

 

Template | Default = .default .page-template-default
Template | 1 = .alpha .page-template-page-alpha-php
Template | 2 = .beta .page-template-page-beta-php
Template | 3 = .gamma .page-template-page-gamma-php
Template | 4 = .delta .page-template-page-delta-php
Template | 5 = .epsilon .page-template-page-epsilon-php
Template | Example = .example .page-template-page-example-php
  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
glynt

Hi Danny,

 

Many thanks.  It actually worked with .page-template-page-gamma-php (without the .gamma in front).

 

Cheers,

 

 

Glyn

Share this post


Link to post
Share on other sites
Danny

Oh sorry, I should have provided more information.


You can use either:

.gamma or .page-template-page-gamma-php

 

So:

 

.gamma .section-branding .content { }

 

or

 

.page-template-page-gamma-php .section-branding .content {}


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
glynt

HI Danny,

 

Don't worry, you got me there anyway!

 

Thanks for your help!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×