• Introduction
  • Using An Included Theme
  • Added A Purchased Theme
  • Creating Your Own Theme
    • Columns

Introduction¶

Themes are CSS files that change the way your product listings appear to your site visitors. You can either use one of the built-in themes included with the standard edition product, you can purchase an extended theme from our website, or you can create your own custom theme.

Using An Included Theme¶

The included themes are automatically scanned and added to the MoneyPress : CafePress Edition database when you install the latest version. Any new themes will automatically be added to the theme listing. You set your theme via the "Select A Theme" setting on the admin panel for MoneyPress : CafePress Edition.

Added A Purchased Theme¶

If you purchase an add-on theme from Cyber Sprocket you will need to install it in your MoneyPress : CafePress edition css directory. To do this you will need FTP access to your server. Connect to your server and locate the plugins/moneypress-cafepress directory. Within that directory will be a core/css folder. Simply upload the CSS file for your new theme into that directory. The next time you go to your MoneyPress : CafePress settings page the new theme will appear.

Creating Your Own Theme¶

The easiest way to create a new theme is to download an existing theme and modify that file to suit your needs. You can change any of the CSS entries to better match the look of the MoneyPress : CafePress Edition plugin to your site. However, make sure you keep the top comment block layout intact. This is how we identify new theme files. In particular the file: <filename> and label: <labelname> parts must remain in the starting comment section.

After the file: entry you should have the exact name of your new css file. You can rename the file to anything you wish, but whatever you name it, that name must match exactly with what appears after the file: comment.

After the label: entry is the text label you want your theme to show up as on the admin panel settings. This can be any string, but we recommend keeping it down to a few words.

For example, if you had a new file named "MyAwesomeNewTheme.css" then your header might look like this:

1 /**
2  ** file: MyAwesomeNewTheme.css
3  ** label: My Awesome New Theme
4  ** columns: 1
5  **
6  **/
7 ... css stuff here ...

Columns¶

You can have multi-column themes by adding the columns meta-tag to your CSS header. This will force new row divs to appear in the HTML output so you can style your CSS themes to have side-by-side product listings. See the included 2-column and 3-column listings for more info.

The themes system does not use HARD COLUMNS to format the output. Hard columns are typically found in HTML tables. They can break formatting on your website. Instead we use soft or "floating" columns. The method used in the themes is via modern page layout standards for floating divs. That means that each column is a floating block. The blocks will stackup next to each other up to a maximum of "X" columns. If your theme file header has columns: 3, for example, you will see at MOST 3 products side-by-side before a new row is started.

With soft columns, you may not always wee the maximum number of products across. That is because the soft columns respect your main page theme and layout. Thus if your content area on your website theme/layout is set to 600 pixels across as the max width, our plugin theme will respect that. Thus, if you select a 3-column plugin theme and each column is set to 250 pixels wide you will only see TWO columns across, the third column will wrap to the next line.

To fix this you need to set the width of the product box to a width that will fit your theme. If your main content is only 600px wide then you need to set your product boxes to something < 200px each. You do this by editing the product box style in the CSS file.