Setting CSS properties into specific pages only « Support Forum | Kriesi.at

Support Forum » Replete

Setting CSS properties into specific pages only

4 posts from 3 voices

Started 3 months ago by AlainTernet
Latest reply from Ismael
This topic is not a support question

Tags:

AlainTernet
Member

I am new to theme customization and Firebugs but I make several of customization in my themes until now,
but I have often the same common problem, sometimes I want to set some CSS properties into specific pages only.

- Example1:
I want to hide the "Product category txt" when I insert products into the homepage;
(http://vestiges.ca/ The text before products: "...Après plusieurs heures de travail..."
So, I can use this code:

.term-description {
display: none;

But I would like to affect only the homepage (www.vestiges.ca), I don't want to hide it In the "Product category page" too.
-----------------------------------------------------------------------------------

- Example2
I want to change the price font size and weight into the category overview pages like this:

#top .price, #top .price span, #top del, #top ins {
font-size: 12px;
font-weight: normal;
line-height: 18px;
}

...But I don't want to the same thing into the single product page,
I want to have other CSS properties for single product pages like:

font-size: 16px;
font-weight: bold;
-----------------------------------------------------------------------------------

I had already make something similar in Abundance with the help of Devin but I do not really understood how to do it elsewhere

You can add #top.term-bijoux before .sidebar to keep the changes only on that page or #top.tax-product_cat to keep the changes only on category overview pages.

Can you give me some cues about "hot to apply css change" only to one specific page like frontage, Products category page or single product page ?
Thanks !
Alain

Posted 3 months ago #
Devin
Moderator
Hey Alain,

Wordpress adds page descriptions and tags to the main container for each page. So when you inspect your page with firebug, look at the very top where the top ID is:

It will have a series of unique identifiers so that you can target just that page. For instance, the home page looks like the above so you can start out your css by selecting:
#top.home

Then add the other class selectors that you want to target. Pages have unique ID's in the form of page-id-#### where ### is the ID of the page. So you could do

A single product has the class selector single-product on the top ID. So you could have single product specific css by doing the following:
```
#top.single-product .someclass{
some css properties and values;
}
```
If you wanted to only effect a single specific product you could use its post ID. For example this product: http://www.kriesi.at/themes/replete/product/simple-test-product-added-to-group/

If you wanted to make its title red you would use:
```
#top.postid-702 .product_title {
color: #F00;
}
```
Regards,

Devin
Posted 3 months ago #
AlainTernet
Member

Thanks you Devin, I understand now ;-)

But, I have a other question:
How I can change de price size into the single product page without changing
Related Products price on the bottom of the same page ?

I tryed:

/* ---------- Bigger and bold product price into single product page ------------*/ #top.single-product .amount{ font-size: 16px; font-weight: bold; line-height: 18px;; }

Posted 3 months ago #

Ismael
Moderator

Hi,

Try using this instead

.single-product-summary .amount {
color: red;
font-size: 16px;
font-weight: bold;
line-height: 18px;
}

Kriesi.at - Wordpress Themes and HTML Templates

Setting CSS properties into specific pages only

Reply

Support Forum usage - Please read

Check out some of our WordPress Themes

Blog Categories

Latest Themes

Pages

About me…