I had quite an adventure setting up my store yesterday and figured it might be useful to share what I did. I've done HTML and a bit of CSS before but never anything like this so you definitely don't have to be a pro to do it. The code looks scary at first but the more you fiddle with it the more sense it makes (although admittedly there’s still quite a bit of it that makes no sense at all!)

Heres my store to show you what can be done with these guides;
http://www.zazzle.com/SugarVsSpice

Before you get started
Setup another gallery to be your sandbox (they’re free!)
Make it private; MyZazzle > Store > Store Settings > Basic Information > Store Access; “Make this store private”

If you need to find any code you can use Ctrl+F in Firefox (probably works in other browsers too but I haven’t tried) and be sure to Validate/Preview regularly!

If you don't have your own website to put pictures on grab yourself a free PhotoBucket account to upload them to.

Ok let’s go…

Background Image
Find this in Appearance > CSS
#mainShell {
width:100%;
background-color:#<z:color name="PageBackground" />;
padding-bottom:40px;
/* add main background image here, if desired:
background-image:url();
*/
}

Change to…
#mainShell {
width:100%;
background-color:#<z:color name="PageBackground" />;
padding-bottom:40px;
background-image:url("http://www.yourdomain.com/background.jpg");
background-repeat: no-repeat;
background-position: top;
}

I made my background image 1870px × 949px (the same size as the one on the clonewars store, I figured they’d know what they were doing)

If you’d like your background to repeat change no-repeat to either; repeat, repeat-x or repeat-y


Custom Header
Find this in Appearance > CSS…
#pageMantle {
overflow:hidden;
width:900px;
<z:mantleimage />
}

Change to…
#pageMantle {
overflow:hidden;
width:900px;
height:200px;
background-image: url("http://www.yourdomain.com/header.png");
background-repeat: no-repeat;
background-position: top;
}

If your new header is taller than 200px just change the height to match.

Remove underline from links and make them bold
Find in Appearance > CSS…
a, td a {
color:#<z:color name="MainLink" />;
}
/*.controls a.active, DO WE NEED THIS? */
.navPane a.active {
background-color:#<z:color name="PodBackground" />;
color:#<z:color name="MainText" />;
font-weight:bold;
}

Change to…
a, td a {
color:#<z:color name="MainLink" />;
text-decoration:none;
font-weight:bold;
}
/*.controls a.active, DO WE NEED THIS? */
.navPane a.active {
background-color:#<z:color name="PodBackground" />;
color:#<z:color name="MainText" />;
font-weight:bold;
text-decoration:none;
}


Add images for product lines
You don't actually need advanced store customization to do this; see this thread > Shop Organization


Rearrange Sidebar
Edit Content > XML
Rearranging things in here will change them on the various pages. Eg I changed…
<z:module name="infonavigation" visible="true" />
<z:module name="gallerystatistics" visible="false" />
<z:module name="productsearch" visible="true" target="products" />
<z:module name="featuredcategories" visible="true" target="products" />
<z:module name="productlines" visible="true" target="products" />
<z:module name="producttypes" visible="true" target="products" />
<z:module name="tags" visible="true" target="products" />

to…

<z:module name="productlines" visible="true" target="products" />
<z:module name="producttypes" visible="true" target="products" />
<z:module name="productsearch" visible="true" target="products" />
<z:module name="infonavigation" visible="true" />
<z:module name="gallerystatistics" visible="true" />
<z:module name="featuredcategories" visible="true" target="products" />
<z:module name="tags" visible="true" target="products" />

If you’d like to hide any sections in the menubar just change visible="true" to visible="false"

Note that each page has its own code so the list under:

Will change the order/visiblity on the hompage


Will change the order/visiblity on product pages and so on.

So for example I have the tags visibility set to “true” on my homepage and “false” on the products page.


Change Dividers on Side menu and Comment Wall
Find in Appearance > CSS…
.hr {
background-image:url(<z:asseturl type="hr" />);
}

Change to…
.hr {
background-image:url("http://www.yourdomain.com/line.png");
}

Zazzle will stretch whatever image you give it to fit accordingly. For mine I made a little line graphic 145px wide.
If you’d like to get rid of the line altogether just remove the link;
.hr {
}


Custom Sidebar
See Ars_Celtica’s fabulous guide here


Add HTML section to the beginning of your homepage
In the CSS add this at the top under <z:csstemplate id="csstemplate" live="true" xmlns:z="urn:zazzle:api">

/*-------------------------------------------
| MY BIT
---------------------------------------------*/

.intro {
width:686px;
position:relative;
left:0px;
top:0px;
}

/*-------------------------------------------
| END MY BIT
---------------------------------------------*/

In the Appearance > XHTML find:


and add...


Then you can put whatever HTML you like in between the intro div tags. Be mindful that its XHTML rather than the regular sort.
As far as I could work out the X stands for “Xtra Annoying” as its super nit-picky about your code! Once you get the hang of it its not too bad though. Here are some things that tripped me up…

XHTML tips
- Don’t use any capital letters in the code

- always end your code blocks so;
<br> = wrong
<br /> = right!
<img src="http://www.yourdomain.com/image.png"> = wrong
<img src="http://www.yourdomain.com/image.png" /> = right!
<a href="http://www.yourdomain.com">Link</a> = wrong
<a href="http://www.yourdomain.com" rel="nofollow">Link</a> = right!

- always nest your tags correctly so;
<strong><h1>Text</strong></h1> = wrong
<strong><h1>Text</h1></strong> = right!

- Some text characters upset the code;
& = wrong
&amp; = right!

More info on XHTML: http://www.w3schools.com/xhtml/default.asp

You’ll notice that the intro gets added to every page in your store, but fear not…


Adding the Into to *just* the Homepage
If you go over to Edit Content > XML you’ll notice that each page is set to the same template;


Change the Home one to:


Then back to Appearance > XHTML
Copy and paste the entire contents of Layout XHTML below itself, so you have 2 templates.

On the first one change

to…


Remove the divs and any intro text you might have added from the previous step from the 2nd template (maintemplate)
You should be left with the intro on your homepage and nothing on the other pages.

Custom About Page
Same setup as the previous guide. Add another template to your XHTML but call this one “abouttemplate”
Find in Edit Content > XML


Change to…


Make sure your abouttemplate has the <div class="intro"></div> in the right place and add whatever XHTML you’d like (See previous; “Add HTML section to the beginning of your homepage”)


Custom Footer (Added 24/11/09)
In Appearance > Style (CSS) add:

#myfooter {
width:900px;
height:112px;
margin-left:auto;
margin-right:auto;
background-image: url("http://www.yourdomain.com/footer.jpg");
background-repeat: no-repeat;
background-position: top;
}

Make the height match whatever your footers height is. Make your image 900px wide to match the bottom of the store

In Appearance > Layout (XHTML) find the following at the bottom of each page you'd like the footer;

</div>
<div class="clearBoth"></div>
</div>
</body>
</html>

and add;

<div id="myfooter">
</div>
</div>
<div class="clearBoth"></div>
</div>
</body>
</html>

That will put your image at the bottom. Remember you need to add it to every page template you'd like it on... so if you want it on *every* page you'll need it above every </html> (It's a lot easier if your browser has a find function. It's Ctrl+f in Firefox... then just put </html> into the box and it will take you to them all)

If you'd like to then have more information within the footer (like the picture link that I do) just add html within the div tags. So mine looks like;

<div id="myfooter">
<center>
<a href="http://www.SugarVsSpice.com" rel="nofollow" target="_blank">
<img src="http://www.sugarvsspice.com/zazzle/footerlink.png" />
</a>
</center>
</div>
</div>
<div class="clearBoth"></div>
</div>
</body>
</html>

In case you're interested:
The target="_blank" tag makes the browser open a new window (not necessary, but I put it in so the user wouldn't loose my store)


Adding a Bigger Header to the Homepage (or pushing the sidebar down!) (Added 24/11/09)
In Appearance > Style (CSS) find your custom header -see "Custom Header" if you haven't added one already;

#pageMantle {
overflow:hidden;
width:900px;
height:200px;
background-image: url("http://www.yourdomain.com/header.png");
background-repeat: no-repeat;
background-position: top;
}

And below it add

#welcomeMantle {
overflow:hidden;
width:900px;
height:572px;
margin-left:auto;
margin-right:auto;
background-image: url("http://www.yourdomain.com/welcomeheader.png");
background-repeat: no-repeat;
background-position: top;
}

Having the width at 900 will make it fit onto the rest of the page. You can make the height whatever you'd like (the sidebar and page contents will appear below whatever you set it to.)

Important: You MUST have margin-left and margin-right tags or the new header will stick the left hand side (took me ages and lots of hair pulling to work that one out! No idea why the original pageMantle one doesn't need them.)

Then in Appearance > Layout (XHTML) find the Hometemplate (the one with id="hometemplate" at the begining -See "Adding the Into to *just* the Homepage" if you haven't set this up already)

Change <div id="pageMantle"> to <div id="welcomeMantle">

That will add your new bigger header to the homepage and push the rest of the page contents (including the sidebar) down.


Moving from your Sandbox to your live gallery
Once you're happy with your layout open 3 notepads (or equivilent simple text editor, not a rich text one like word... that could mess things up) and copy the XHTML, CSS and XML into them. Log into your real gallery and paste them all into the right sections.

Ta-da!

Thanks!

There's no way I would have been able to do what I did without your posts! You're my ZAGC hero hehe!

That's in Content/Advanced; the other two customization areas are under Appearance.

As the the page Mantle (header) I had to add the height statement even thought is was the default 900x200 - else the header did not display.

#pageMantle {
overflow:hidden;
width:900px;
height:200px;
background-image: url("http://www.yourdomain/header.png");
background-repeat: no-repeat;
background-position: top;
}

BlockQuote Products Resume Kit
SPLAT BlacK
in the Public Domain
Images Magical on Zazzle

YOU ARE VERY KIND... Thanks. I will try.

Thank you, Sugarvsspice for sharing your knowledge with those of us who are CSS challenged!

You are too kind Lori