Changing the Colors and Fonts in your CafePress Shop

If you've just created your first CafePress premium shop, you may be a bit disappointed in the appearance. Even after you've added sections and products, your premium shop will be a barren template with a white background that looks something like this:

Basic Template

While functional, the default template isn't necessarily all that kind on the eyes. Luckily, CafePress provides a large number of templates to choose from, most of which are very clean and professional looking. If you can find one that you really like for your shop, by all means, use it! All you have to do is click the link and your site is instantly designed for you. You're done! You can stop reading now and get on with selling T-shirts.

If you're still reading this, you must not be quite happy with the provided templates for whatever reason. That's ok too. I wasn't either. Your first order of business is probably going to be choosing new colors and fonts for your shop. Although CafePress provides a page especially for setting your colors and fonts, it has its limitations and you may need to use some custom HTML to get the exact results you are looking for. Here is how I went about customizing my site step-by-step.

  1. Choosing the sidebar color

    Selecting Sidebar Background Color

    I'm not much of an artist unfortunately. If you've looked at my CafePress shop, you can probably tell by the largely text-centric designs. That lack of artistic skill also extends into my color selections. I just decided to stick with a black and white theme for now. So my first order of business was making the sidebar black. A quick visit to the "Colors & Fonts" tab in the CafePress admin and we're done. That was easy!

    Shop with black sidebar

  2. Setting the sidebar text color

    Now that the sidebar background is black, we need to change the text color in the sidebar. Obviously black text on a black background is going to be awfully tough to read. This task would seem to be as easy as setting the sidebar color but there is a snag. After setting the sidebar text color to white, we're left with this:

    Shop with link color unchanged.

    With the base CafePress template, link colors are set globally across your entire page. You can change the links to be white but then they'll be white everywhere, making them readable in the sidebar but invisible everywhere else. We'll have to use some CSS if we're going to fix this.

    To fix this, we have to go to the custom HTML tab in the CafePress interface and find the box labeled <Head>. If we don't already have a style tag in this box we add one that looks like this:

    <style type="text/css"> </style>

    We can now add CSS directives between these tags that describe how we want various elements on our page to look. If you're not familiar with CSS, it's beyond the scope of this article unfortunately but Google can probably point you in the right direction. Now that we have our style block let's look at the source code for the sidebar by going to our site and choosing "View Source" in our web browser.

    After we look at the source, we see the sidebar is a table cell identified by this tag:

    <td width="125" valign="top" class="sidebarbg">

    Because the table cell is assigned a class (sidebarbg), we can style it in our CSS. The final code for changing the links looks like this:

    <style type="text/css"> td.sidebarbg a { color:white; font-size:14px; text-decoration:none; font-weight:bold; } td.sidebarbg a:hover { text-decoration:underline; } </style>

    Here it is again with descriptions of what each line does:

    <style type="text/css"> td.sidebarbg a1 { color:white;2 font-size:14px;3 text-decoration:none;4 font-weight:bold;5 } td.sidebarbg a:hover6 { text-decoration:underline;7 } </style> 1) This line selects <a> tags inside of <td> tags that have a class equal to sidebarbg. 2) This line changes the text to white . 3) This line makes the font size 14 pixels high. 4) This line removes the underline. 5) This line makes the text bold. 6) This line selects <a> tags inside of <td> tags that have a class equal to sidebarbg but only when the mouse is hovering over it. 7) This line underlines the text.

  3. Formatting the other page elements

    The last thing you may notice is that my text looks a bit funky. "T-Shirts, Hats, Gifts, and other stuff for Musicians" is in huge black text. This is because I've put it inside of a <h1> tag. This tag is important because it helps the search engines figure out what the page is about. This, in turn, helps improve your rankings.

    The only problem with <h1> tags is that they aren't terribly attractive. To fix this we continue using CSS. My <h1> tag looks like this:

    <h1 class="custom">

    Placing a class on my <h1> tags allows me to then use the following CSS to make the text grey and shrink it down a hair. I also use this CSS to put a hanging indent on the paragraph following my heading:

    h1.custom { color:#999999; font-size:16px; } p.custom { padding-left:15px; padding-right: 15px; }

That's it! We've gone from this:
Basic Template
to this:
Final Results

CSS is an invaluable tool for customizing your CafePress site. It can be a challenge sometimes finding a class to latch onto with your CSS selectors but lots of elements can be accessed and changed that would be otherwise inaccessible.