CSS for different page background images

[jsteelethg]

I just read the css read me, and I also read the explanatory example, but I seem to be having a brain freeze. Can one of you "Enlightened" Zenners provide me with a sample code of how to have one background image on the main page and a different image on my remaining pages?
Mine is currently here...

/*wrappers - page or section containers*/
#mainWrapper {
background-color: #F9FBE7;
background-image:url(../images/gt_zc_mainpage_bknd.png);
background-repeat:no-repeat;
background-position:right;
text-align: left;
width: 770px;
vertical-align: middle;
border: 1px solid #44682B;
}

my site is http://www.gingerlandtropicals.com/ZenCart/index.php
Thank you...

[kobra]

I think that this covers it

page_name.css // changes to one page where the main is named "home" so you have the specific alterations in home.css

[jsteelethg]

Thanks for your response Kobra, I do not want to loose you as I work through this and I appreciate the help you give so many of us new zenners.

I was about to make a new css file for each page and realized that the image is only going to be different on the main page. Every other page will have the same graphic I designed.

Here is my train of "unthought"

1. I go to my home page and have the graphic I want displayed, Great!
2. I click on a category and it takes me to my category listing page, displaying the same graphic ( the one I now want to change for this page and all others after the main one ).
3. I view the page source in my browser and of course see that this product listing page links to my stylesheet.css in my template folder that has the original background image.
Page I am looking at:http://www.gingerlandtropicals.com/Z...=index&cPath=1

Code in the head..
<base href="http://www.gingerlandtropicals.com/ZenCart/" />

<link rel="stylesheet" type="text/css" href="includes/templates/gingerland/css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/gingerland/css/stylesheet_css_buttons.css" />
<link rel="stylesheet" type="text/css" media="print" href="includes/templates/gingerland/css/print_stylesheet.css" />
</head>

What I think I want to do is to know where I find the file (index.php?main_page=index&cPath=1) in my directory that contains the code for this product listing page ( that I am viewing in "view page source") so I can change the link to a new stylesheet)....YET

as I sit here and write, I am realizing that I would have to do that for all the "other pages" except the main page and that would not be the way...SO

I come back around to square one of my thinking...

1. Using the stylesheet.css with the current background, I change the background to the graphic I want all other pages to have and then create a new stylesheet for "main Page", change the backgound image and save.

My question...What document do I change this new css link to to affect only the main page?

gosh I hope I have been clear, I really want to conquer this. Thank you

[jsteelethg]

I figured it out! One more step toward ZenCart enlightenment!
This is rewarding! Here is what I finally did to have a background image on my home page, and a different image on all the rest.

I "save as" my stylesheet.css as index_home.css and index_allothers.css

I removed all code in both except the mainWrapper where the background image changes, put the appropriate image in both the new css files and saved them.

Thank you to those that provided their input!

My final result:http://www.gingerlandtropicals.com/ZenCart/index.php

[afo]

Isn't the "AH HA" moment wonderful?

The site looks good! Very pretty background images. Ginger plants, eh? Will they grow in the NE?

[jaygee]

I'm trying to achieve something similar to this but with the page header. I want a different header for particular categories and can achieve this for say a category with a cpath of 4 by creating c_4.css with the image file.

It seems I then need to do this for each product within the category but if for a product with acpath of 4 and a product id of 9 I create a file p_9.css I don't get the new header.

Have I gone wrong with my interpretation of the product css naming system?

Appreciate any help.

[kobra]

It seems I then need to do this for each product within the category but if for a product with acpath of 4 and a product id of 9 I create a file p_9.css I don't get the new header.

I would that you are getting the main page css loading with the above??

The ccoding for this is like: cPath=4_9 (check the address in your browser)

So that the css would become c_4_9.css

[jaygee]

Kobra

Thanks for your reply.

You were correct.

Went back and had another go and as usual the Zen override system was working fine and the problem was elsewhere. With a cpath of 4_30 and a product id of 9 two files c_4_30.css and p_9.css will ensure both the category and product header can be changed.

The product header was not changing unlike the category header as I had another call to stylesheet.css in my Product description thus overriding the override if you get the drift. My lack of understanding off css was to blame as I had assumed as the call was after the code that displayed the header it wouldn't affect it. Still can't get my head around that one but need to study css a little more.

[afo]

As you've already discovered, the last stylesheet loaded/called will override the same settings in previous stylesheets.

For example, let's say you have 3 stylesheets with a color change when the cursor hovers over a link.

The first stylesheet calls for the link to be white and underlined if the cursor is placed over it.

a:visited {
	color: #ffffff;
	text-decoration: underline;
	}

The second stylesheet calls for the link to be black without the underline if the cursor is placed over it.

a:visited {
	color: #000000;
	text-decoration: none;
	}

The third stylesheet calls for the link to be red and underlined if the cursor is placed over it.

a:visited {
	color: #FF0000;
	text-decoration: underline;
	}

The link will be red and underlined. The previous hover settings will be replaced by the last one loaded.

[jaygee]

Afo

Thanks for your examples.

The thing that still confuses me is that the main, category and product stylesheets are called in the head. My problem was caused due to the way I was adding the product description. I have a file called model.htm (unique for each model) that is displayed assuming it exists for each product. I'd left a call to the main stylesheet in the file so I could see what it looked like when creating it.

This stylesheet was called after the header has been displayed in the body so why would this extra call re-set the header back to the original. Is there not a hierarchical structure for the stylesheets?

The problem I now have is as I'm using an external file, keywords are not picked up in the Search facility so I may eventually move to embedding the product description into the main database.

Just bought myself a book on HTML & CSS so if I can find the time to read it I may be a little wiser in the future!