Make it possible to target specific pages with CSS in Storefronts Gridport theme.

Posted by on Mar 22, 2012 in Gridport, Storefront Themes, Themes, Wordpress | No Comments

Yet another request for little modifications and additions for the Storefront Themes Gridport theme. This is number six. This is becoming a blog about one theme!

The question

“I want to use that Custom CSS but I need it to only apply on specific pages. How do I do that ?”

The answer is out of the box you can not target specific pages with CSS in Gridport. Jump to your favorite code inspector, look at your page, that body tag is bare, every page just the same old “body” So yet again it is time to make a little PHP change to add some functionality. One extremely simple PHP edit will open up all sorts of CSS possibilities. If you have not done this before see the note “Tools” at the bottom of this post. In this case it is so simple you could do it by going to Appearance/Editor in the WordPress backend and opening and editing it there.

Locate the header.php file which is in Gridport theme folder. Make a safe copy somewhere in case you have problems.
Around line 60 in Gridport 1.0.6 you will find the close of the head tag and the opening body tag. The line may vary slightly depending on your version. The change is already made in the code below and shown in the highlighted line.


</head>
<body <?php body_class(); ?>>

<div class="header-left">

<!-- ========== Start of Logo =========== -->

This will add all sorts of useful class declarations to the body tag on your pages. For example fire up you Firebug code inspector and look at a regular page

<body class="page page-id-2 page-template page-template-tpl_rht_sidebar-php">

Look at all that new stuff! For an example lets say you want the H1 headings red on all regular pages.
just use .page

.page h1{
color:#ff0000;
}

There are so many more options there too. In this case my page has an id of 2, this is unique. So I can target just the one page using .page-id-2
I could target just pages with right sidebars using .page-template-tpl_rht_sidebar-php

Lets take a look at another, a product category page..

<body class="archive tax-wpsc_product_category term-dolls term-4">

Here I could use .archive to target all archive pages, this would possibly include some other pages beside Product Categories, Blog post categories for instance. To be more specific .tax-wpsc_product_category refers to the custom taxonomy that is WP e-Commerce product categories. So it would target only product category pages. But there is more, yes it is a veritable Swiss army knife of possibilities, you have .blog for the main blog page, .single for single post pages, .postid-103 for an individual blog post or product, .single-wpsc-product for all single product pages.

Break out your code inspector and wield some CSS.

Tools:

You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/

Leave a Reply