How to Skin the Zazzle Sidebar Tutorial

Skinning the Zazzle Sidebar

In Zazzle’s “Advanced Store Customization” system it’s possible to do a heck of a lot with your gallery/store there. But it can be confusing at the beginning – so here’s one very simple sample of something many people want to do right away: skin the sidebar!

First things first!

Setting up an additional gallery/store at Zazzle is free. Do that right now, and set it to “Private”. This is where you should experiment with your store layout – don’t put the changes into your public store until you’re sure they all work the way you want!

Copy the Appearance/CSS, Appearance/Layout, and Content/Content Definitions fields from Myzazzle. Paste those into the same areas of your private gallery. Now your private gallery has all the Advanced settings from your public store – so when you’re done, you can copy them in the Private gallery and paste them back into the public one.

Now You’re Ready.

This is a simple series of steps that will let you change the appearance (and a little of the function) of a Zazzle sidebar. I’m using three graphics – deliberately boring! you need to make your own – to create a new appearance for the sidebar, adding a top cap with a “Home” link and an endcap. The three pieces are shown here.

The middle section repeats to the length of your sidebar, whatever that it is; it doesn’t need to be a very large image, as you see.

I’ve included a “Home” link at the top. If you’re using the default layout for your Zazzle sidebar, that button may be redundant. I’ll show you how to remove the link later on – but the link itself is interesting, so bear with me.

Step 1: Make Changes to Your CSS

Go to the Appearance/Advanced tab in MyZazzle, and look in the CSS window. Find this:

/*-------------------------------------------

| side pods

---------------------------------------------*/

#group_1 .sidePod, #group_3 .sidePod {

border:0;

padding:10px;

color:#<z:color name="PodText" />;

background-color:#<z:color name="PodBackground" />;

}

…and change it to this:

/*-------------------------------------------

| side pods

---------------------------------------------*/

#group_1 .sidePod, #group_3 .sidePod {

position:relative;

left:-1px;

border:0;

padding:10px;

color:#<z:color name="PodText" />;

background-color:transparent;

}

Now, add these new lines:

/*-------------------------------------------

| Here begins the simple sidebar example

---------------------------------------------*/

/*-------------------------------------------

| webonav: sets inner sidebar area background in a div after sidePod

---------------------------------------------*/

.webonav {

background-image:url(http://www.theretrovert.com/outlink/zaz_examples/navbg.gif);

width:158px;

position:relative;

left:-9px;

top:-10px

}

/*-------------------------------------------

| webobar: resets width of nav bar content in a div after webonav

---------------------------------------------*/

.webobar {

width:134px;

position:relative;

left:13px;

top:0px

}

/*-------------------------------------------

| galleryicon: this adjusts the spacing above the gallery icon; tweak to suit your layout.

---------------------------------------------*/

.galleryIcon

{

margin-top: 12px !important;

}

/*-------------------------------------------

| Here ends the simple sidebar example

---------------------------------------------*/

Step 2. Make changes to your Layout

The “Layout” window is right above the CSS window. Look there for this:

<div class="sidePod">

<z:placeholder name="navpane"></z:placeholder>

</div>

…and replace it with this:

<div class="sidePod">

<div class="webonav">

<z:pagelink target="home">

<img src="http://www.theretrovert.com/outlink/zaz_examples/navtop.gif" alt="Alt Text tag for your Shop" width="158" height="62" border="0" />

</z:pagelink>

<div class="webobar">

<z:placeholder name="navpane"></z:placeholder>

</div>

<br />

<img src="http://www.theretrovert.com/outlink/zaz_examples/navbot.gif" width="158" height="21" />

</div>

</div>

Now, validate and save.

What you’ve got is a set of three simple graphics for the main body of the sidebar, a top cap with a “home” link, and an endcap. The format of that “Home” link is great: it works so that it goes to the home page of whatever gallery it was called from. That makes it easy to share examples.

But like I said, you may want a plain top cap, not a “Home” button. To get a plain top cap you want to remove these two lines:

<z:pagelink target="home">

and:

</z:pagelink>

…Now your sidebar’s top cap is just a graphic.

Using those z:pagelinks will make it pretty easy for folks to make generic templates that other people can use.

So now you just have to make your own set of these three images. You can change the heights to anything you want (remember to also change their height in “Layout”!), but I wouldn’t try to change the widths.

You can also make slight adjustments to the width, left position, and top positions in .webonav (CSS) to control how much space the sidebar content gets inside your fancy sidebar. But be careful about changing these by very much, since you can’t control everything about what needs to fit there.