HowTo: Customize the look of your CafePress shop

InfoDabble > Tech Notes > HowTo > HowTo: Customize the look of your CafePress shop

This project is still under development.

1 How it works
2 Header, footer, sidebar
- 2.1 Custom header
- 2.2 Custom footer
3 =Custom sidebar
4 Custom pages
5 Code
6 Notes and resources

This note describes the steps required to customize my calendar shop at CafePress. This procedure only applies to Premium Shops; free Basic Shops are limited to CafePress' standard look-and-feel.

This is only a summary. For details, please refer to the real experts:

Art of FoxVox: Unofficial CafePress Premium Shop Owner's Guide & FAQ
Hectic Studios : Working With HTML in Your Premium Shop - Daniel M. Clark

[edit] How it works

Daniel M. Clark has written the definitive explanation of how this all works: Working With HTML in Your Premium Shop : Part One.

headline text
page background
alert message text
active links
sidebar background
table header background
normal text
table background
visited links
table background 2

[edit] Header, footer, sidebar

[edit] Custom header

This is where the fun begins. Do not confuse the Header section with the <HEAD> section! This is called the "Header" section for lack of a better term. It's got nothing to do with headers as you might be thinking of them, in fact, this is one of the most frequently run-into problems when it comes to customizing your HTML. The "Header" in this case, refers only to the part of your design that comes above and before your CafePress-generated content. On the shop graphic, this is the area outlined in magenta.

Header
CafePress page header
.	Extra Sidebar Content	CafePress-generated content	.
Footer
CafePress page footer

[edit] Custom footer

[edit] =Custom sidebar

[edit] Custom pages

CafePress controls the content of each of your product pages^[1].

[edit] Code

These code samples come from my InfoDabble Shop at CafePress.

[edit] Store Description

<div id="mainContent">
<div id="content">
<a id="top" name="top"></a>
<div id="bodyContent">
<div class="floatright">
<a class="image" title href="http://www.ehartwell.com/InfoDabble/Image:CalendarSize.gif">
<img height="40" alt="" src="http://www.ehartwell.com/infodabble/images/5/52/CalendarSize.gif" width="70" longdesc="http://www.ehartwell.com/InfoDabble/Image:CalendarSize.gif"></a></div>
Why doesn't NASA make better use of their photo 
resources? The official NASA wall calendar, as usual, 
gives the impression that the only thing they do 
involves manned space flight<sup class="reference" id="_ref-0"><a title href="#_note-0">[1]</a></sup> 
(not that that's not cool, too). So I decided to make my 
own. They are printed in glorious 200 dpi dynamic color 
on heavy duty high gloss paper. All calendars have been 
updated to show dates for 2008.<br style="clear: all">
&nbsp;<table  align="center">
<tr>
<td align="middle">
<a title="Calendars:Seasons of Ice and Shadow 2" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.2863358">
<img height="163" alt="" src="http://www.ehartwell.com/infodabble/images/thumb/2/29/Saturn2Large.jpg/240px-Saturn2Large.jpg" width="240" longdesc="http://www.ehartwell.com/InfoDabble/Image:Saturn2Large.jpg"></a><br>
<a title="Calendars:Seasons of Ice and Shadow 2" href="http://www.ehartwell.com/InfoDabble/Calendars:Seasons_of_Ice_and_Shadow_2">
Seasons of Ice and Shadow 2 (Saturn)</a> </td>
<td align="middle">
<a title="Calendars:The Red, Red Hills of Mars 1" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.2863436">
<img height="163" alt="" src="http://www.ehartwell.com/infodabble/images/thumb/0/08/Mars2Large.jpg/240px-Mars2Large.jpg" width="240" longdesc="http://www.ehartwell.com/InfoDabble/Image:Mars2Large.jpg"></a><br>
<a title="Calendars:The Red, Red Hills of Mars 1" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.2863436">The Red, Red Hills of Mars</a> </td>
</tr>
<tr>
<td align="middle">
<a title="Calendars:Have Space Suit, Will Travel" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.3926539">
<img height="163" alt="" src="http://www.ehartwell.com/infodabble/images/thumb/6/6b/Flying1Large.jpg/240px-Flying1Large.jpg" width="240" longdesc="http://www.ehartwell.com/InfoDabble/Image:Flying1Large.jpg"></a><br>
<a title="Calendars:Have Space Suit, Will Travel" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.2863358">Have Space Suit, Will Travel</a> </td>
<td align="middle">
<a title="Calendars:Space Shuttle" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.3926548">
<img height="163" alt="" src="http://www.ehartwell.com/infodabble/images/thumb/8/8b/Shuttle1Large.jpg/240px-Shuttle1Large.jpg" width="240" longdesc="http://www.ehartwell.com/InfoDabble/Image:Shuttle1Large.jpg"></a><br>
<a title="Calendars:Space Shuttle" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.3926548">Space Shuttle</a> </td>
</tr>
</table>
<table  align="center" id="table2">
<tr>
<td align="middle" style="vertical-align: top; font-family: Arial,Sans-serif,Verdana,'Trebuchet MS','Times New Roman'; font-size: 11.5333px; font-weight: 400; line-height: 16.1333px; font-style: normal; color: #000000; text-transform: none; text-decoration: none; letter-spacing: normal; word-spacing: normal; text-align: start; direction: ltr">
<a title="Calendars:Gravity's Ballet" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.3934218">
<img height="130" alt="" src="http://www.ehartwell.com/infodabble/images/thumb/8/89/2007SaturnBWSmall.jpg/162px-2007SaturnBWSmall.jpg" width="162" longdesc="http://www.ehartwell.com/InfoDabble/Image:2007SaturnBWSmall.jpg"></a><br>
<a title="Calendars:Gravity's Ballet" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.3934218">Gravity's Ballet (Saturn in<br>
glorious black and white)</a> </td>
<td align="middle" style="vertical-align: top; font-family: Arial,Sans-serif,Verdana,'Trebuchet MS','Times New Roman'; font-size: 11.5333px; font-weight: 400; line-height: 16.1333px; font-style: normal; color: #000000; text-transform: none; text-decoration: none; letter-spacing: normal; word-spacing: normal; text-align: start; direction: ltr">
<a title="Calendars:Robots in Space" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.2863489">
<img height="130" alt="" src="http://www.ehartwell.com/infodabble/images/thumb/0/05/2007RobotsSmall.jpg/162px-2007RobotsSmall.jpg" width="162" longdesc="http://www.ehartwell.com/InfoDabble/Image:2007RobotsSmall.jpg"></a><br>
<a title="Calendars:Robots in Space" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.2863489">Robots in Space</a> </td>
<td align="middle" style="vertical-align: top; font-family: Arial,Sans-serif,Verdana,'Trebuchet MS','Times New Roman'; font-size: 11.5333px; font-weight: 400; line-height: 16.1333px; font-style: normal; color: #000000; text-transform: none; text-decoration: none; letter-spacing: normal; word-spacing: normal; text-align: start; direction: ltr">
<a title="Calendars:Seasons of Ice and Shadow 1" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.2863518">
<img height="130" alt="" src="http://www.ehartwell.com/infodabble/images/thumb/2/24/2007SaturnSmall.jpg/162px-2007SaturnSmall.jpg" width="162" longdesc="http://www.ehartwell.com/InfoDabble/Image:2007SaturnSmall.jpg"></a><br>
<a title="Calendars:Seasons of Ice and Shadow 1" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.2863518">Seasons of Ice and Shadow 1</a><br>
<a title="Calendars:Seasons of Ice and Shadow 1" href="http://www.ehartwell.com/InfoDabble/Calendars:Seasons_of_Ice_and_Shadow_1">
&nbsp;</a><a title="Calendars:Seasons of Ice and Shadow 1" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.2863518">(Saturn)
</a> </td>
<td align="middle" style="vertical-align: top; font-family: Arial,Sans-serif,Verdana,'Trebuchet MS','Times New Roman'; font-size: 11.5333px; font-weight: 400; line-height: 16.1333px; font-style: normal; color: #000000; text-transform: none; text-decoration: none; letter-spacing: normal; word-spacing: normal; text-align: start; direction: ltr">
<a title="Calendars:Robot Rovers on Mars" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.2863463">
<img height="130" alt="" src="http://www.ehartwell.com/infodabble/images/thumb/a/ad/2007MarsSmall.jpg/162px-2007MarsSmall.jpg" width="162" longdesc="http://www.ehartwell.com/InfoDabble/Image:2007MarsSmall.jpg"></a><br>
<a title="Calendars:Robot Rovers on Mars" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.2863463">Robot Rovers on Mars
</a> 
</td>
</tr>
</table>
<table  align="center" id="table1">
<tr>
<th>Mugs </th>
</tr>
<tr>
<td align="middle" style="font-family: Arial,Sans-serif,Verdana,'Trebuchet MS','Times New Roman'; font-size: 11.5333px; font-weight: 400; line-height: 16.1333px; font-style: normal; color: #000000; text-transform: none; text-decoration: none; letter-spacing: normal; word-spacing: normal; text-align: start; vertical-align: baseline; direction: ltr">
<a class="plainlinks" title="http://www.ehartwell.com/calendars/Mugs2865207.htm" rel="nofollow" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.2521953">
<img height="120" alt="" src="http://www.ehartwell.com/infodabble/images/c/cd/107858651.jpg" width="140" longdesc="http://www.ehartwell.com/InfoDabble/Image:107858651.jpg"></a>
<a class="plainlinks" title="http://www.ehartwell.com/calendars/Mugs2865207.htm" rel="nofollow" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.2521953">
<img height="120" alt="" src="http://www.ehartwell.com/infodabble/images/8/81/108071221.jpg" width="140" longdesc="http://www.ehartwell.com/InfoDabble/Image:108071221.jpg"></a>
<a class="plainlinks" title="http://www.ehartwell.com/calendars/Mugs2865207.htm" rel="nofollow" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.2521953">
<img height="120" alt="" src="http://www.ehartwell.com/infodabble/images/f/f5/111089142.jpg" width="140" longdesc="http://www.ehartwell.com/InfoDabble/Image:111089142.jpg"></a>
<a class="plainlinks" title="http://www.ehartwell.com/calendars/Mugs2865207.htm" rel="nofollow" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.2521953">
<img height="140" alt="" src="http://www.ehartwell.com/infodabble/images/c/cf/107858314.jpg" width="150" longdesc="http://www.ehartwell.com/InfoDabble/Image:107858314.jpg"></a>
<a class="plainlinks" title="http://www.ehartwell.com/calendars/Mugs2865207.htm" rel="nofollow" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.2521953">
<img height="140" alt="" src="http://www.ehartwell.com/infodabble/images/6/6e/107860088.jpg" width="150" longdesc="http://www.ehartwell.com/InfoDabble/Image:107860088.jpg"></a><br>
<a class="external text" title="http://www.ehartwell.com/calendars/Mugs2865207.htm" rel="nofollow" href="http://www.cafepress.com/cp/store.aspx?s=ehartwellshop.2521953">And lots more <b>Mugs From Space</b>...</a> </td>
</tr>
</table>
<hr>
<ol class="references">
<li id="_note-0"><a title href="#_ref-0">&#8593;</a> Sure, 
that's what most of the bureaucracy does - but what 
about all the exploration going on in other parts of 
the solar system?</li>
</ol>
<!-- Saved in parser cache with key infodabbledb:pcache:idhash:455-0!1!0!!en!2 and timestamp 20071028003830 -->
<div class="visualClear">
&nbsp;</div>
</div>
</div>
</div>

[edit] <HEAD>

<style>
body, html {
background: #CFDFFA url(http://www.ehartwell.com/infodabble/skins/InfoDabble/marsbackground.gif) repeat;
margin: 0 0 0 0;
}
 
#container {
background: #FFFFFF;
margin-left:3%;
margin-right:3%;
margin-top:0px;
margin-bottom:0px;
padding: 0px;
}
 
#mainHeader {
background-image:	url(http://www.ehartwell.com/infodabble/skins/InfoDabble/content_bg.gif);
background-repeat:	repeat-x;
background-position: 0 85px;
}
 
#bodyContent, td {
font-family: Arial,Sans-serif,Verdana,'Trebuchet MS','Times New Roman';
font-size: 11.5px;
color: #000000;
text-decoration: none;
}
 
.floatright {
float: right;
clear: right;
position: relative;
display: block;
visibility: visible;
z-index	auto
overflow: visible;
white-space: normal;
clip: auto;
}
 
a img {
border: none;
}
 
 
a {
text-decoration: none;
}
 
h1.firstHeading {
font: verdana,arial,sans-serif 18px normal #333333 !important;
padding-top: 10px;
padding-bottom: 3px;
}
 
h1 .mw-headline {
font-family: verdana,arial,sans-serif;
font-size: 21px;
font-weight: normal;
font-style: normal;
color: #333333;
border-bottom: 1px #AAAAAA solid;
padding-top: 10px;
padding-bottom: 3px;
}
 
h2x {
font: verdana,arial,sans-serif 14px normal #333333 !important;
}
 
h2 {
font-family: verdana,arial,sans-serif;
font-size: 17px;
font-weight: normal;
font-style: normal;
color: #333333;
padding-top: 7px;
padding-bottom: 3px;
border-bottom: 1px #AAAAAA solid;
clear:both;
}
 
h3 {
font-family: verdana,arial,sans-serif;
font-size: 14px;
font-weight: bold;
font-style: normal;
color: #333333;
}
 
div#contentSub {
font-size: 12px;
}
 
table.sideNote {
background-color: #F4F8FD;
border: 1.5px #505050 outset;
}
 
table.sideNote td {
padding: 10px;
border: 1px #FFFFFF;
}
 
hr {
clear:both;
}
 
td {
vertical-align: middle;
}
 
#footer {
font-family: Arial,Sans-serif,Verdana,'Trebuchet MS','Times New Roman';
font-size: 10px;
color: #999999;
background-color: #CFDFFA;
padding:5px;
padding-bottom:20px;
text-align:center;
}
 
#myfooter {
font-family: Arial,Sans-serif,Verdana,'Trebuchet MS','Times New Roman';
font-size: 11px;
color: #666666;
background-color:#BBDDFF;
padding:5px;
text-align:center;
}
 
#myfooter a {
color: #666666;
text-decoration:none;
}
 
#footer a {
color: #999999;
text-decoration:none;
}
 
</style>

[edit] Header

<div id="globalWrapper">
<div id="container">
<div id="mBody">
 
<div id="mainHeader">
<a href="http://www.ehartwell.com/">
<img src="http://www.ehartwell.com/infodabble/skins/InfoDabble/BackToInfoDabble.png" style="margin-top: -10; margin-bottom: 5; margin-right:-10" align="right" width="250" height="105" /></a>
<a href="http://www.cafepress.com/ehartwellshop">
<img src="http://www.ehartwell.com/infodabble/skins/InfoDabble/InfoDabbleCafePress.png" style="margin-top: -10; margin-bottom: 5; margin-left:-10" width="250" height="105" /></a>
</div>
<div style="width:100%">

[edit] Footer

</div>
<div id="contentBottom">
 
	<div id="personalTools">
		<div class="portlet" id="myfooter">
			<div class="pBody">
			<a href="http://www.cafepress.com/cp/info/help/orderstatus.aspx">Recent Orders</a>&nbsp; |&nbsp;
			<a href="http://www.cafepress.com/cp/info/help/orderstatus.aspx">Edit Your Order</a>&nbsp; |&nbsp;
			<a href="http://www.cafepress.com/cp/info/help/shipping.aspx#1">Shipping Rates</a>&nbsp; |&nbsp;
			<a href="http://www.cafepress.com/cp/info/help/shipping.aspx#5">Return or Exchanges</a>&nbsp; |&nbsp;
			<a href="http://www.cafepress.com/cp/info/help/ordering.aspx#1">Satisfaction Guaranteed</a>&nbsp; |&nbsp;
			<a href="http://www.cafepress.com/cp/info/help/custserv.aspx">Customer Service</a>
			</div>
		</div>
	</div>
 
	<div class="portlet" id="footer">
		<div class="pBody">
		<a href="http://www.cafepress.com/ehartwellshop">InfoDabble Store</a>&nbsp; |&nbsp; 
		Copyright © 2005-2008 Eric Hartwell. All rights reserved&nbsp; |&nbsp; 
		<a title="InfoDabble:About" href="http://www.ehartwell.com/">InfoDabble Web Site</a>
		</div>
	</div>
 
</div>
		</div>
	</div>
</div>

[edit] Notes and resources

CafePress customization experts:

Art of FoxVox: Unofficial CafePress Premium Shop Owner's Guide & FAQ
Hectic Studios : Working With HTML in Your Premium Shop - Daniel M. Clark

Other resources:

CafePress Help Desk: Tour a Premium Shop
CafePress Community Forums: HTML & Premium Shop
CafePress Community Forums: Customized Shops

Notes:

↑ This probably has something to do with making sure that what they deliver matches what the site describes...

Retrieved from "http://www.ehartwell.com/InfoDabble/HowTo:_Customize_the_look_of_your_CafePress_shop"

Navigation

Search

HowTo: Customize the look of your CafePress shop

Contents

[edit] How it works

[edit] Header, footer, sidebar

[edit] Custom header

[edit] Custom footer

[edit] =Custom sidebar

[edit] Custom pages

[edit] Code

[edit] Store Description

[edit] <HEAD>

[edit] Header

[edit] Footer

[edit] Notes and resources

<Footer>

Navigation

Search

HowTo: Customize the look of your CafePress shop

Contents

[edit] How it works

[edit] Header, footer, sidebar

[edit] Custom header

[edit] Custom footer

[edit] =Custom sidebar

[edit] Custom pages

[edit] Code

[edit] Store Description

[edit] <HEAD>

[edit] Header

[edit] Footer

[edit] Notes and resources

&lt;Footer&gt;

<Footer>