When designing stores there are various blocks of code created by Printfection.com which are inserted in place of your tags. Although
it is not possible to modify this code you can completely change the default look to match that of your store using CSS.
Listed below are the CSS styles which you can modify and a brief description about each one. To add CSS to your store click on your
store's settings and select the 'Display Options' tab.
If have any further questions feel free to ask other Printfection.com store owners or the Printfection.com staff through our forums.
See our forums.
|
|
|
Class:
Tag:
Usage:
|
sectionsTable1
<table>
The table surrounding all of the sections
|
|
Class:
Tag:
Usage:
|
sectionsTD1
<td>
The TD surrounding each section.
|
|
Class:
Tag:
Usage:
|
sectionsTable2
<table>
The table surrounding the individual section's image, teaser and name.
|
|
Class:
Tag:
Usage:
|
sectionImage
<img>
The image tag for the section image
|
|
Class:
Tag:
Usage:
|
sectionTitleLink
<a>
Surrounds each section title.
|
|
Class:
Tag:
Usage:
|
sectionTeaser
<font>
The tag around the teaser of each section.
|
|
Class:
Tag:
Usage:
|
sectionTitleText
<font>
The font tag around each section title.
Depreciated: Use sectionTitleLink
|
|
|
Class:
Tag:
Usage:
|
productsTable1
<table>
The table surrounding all of the products
|
|
Class:
Tag:
Usage:
|
productsTable2
<table>
The table surrounding the individual product's image, name and price.
|
|
Class:
Tag:
Usage:
|
productTitleLink
<a>
The tag around each product's title.
|
|
Class:
Tag:
Usage:
|
productNumColorsLink
<a>
The tag around the number of colors each product comes in.
|
|
Class:
Tag:
Usage:
|
productNumColorsPriceDivider
<font>
The tag around the divider (|) between the number of colors and the price.
|
|
Class:
Tag:
Usage:
|
productImage
<img>
The image tag for the product's image.
|
Class:
Tag:
Usage:
|
productPrice
<font>
The font tag around each product's price.
|
|
Class:
Tag:
Usage:
|
productTitle
<font>
The font tag around each product's title.
Depreciated: Use productTitleLink
|
|
|
|
Class:
Tag:
Usage:
|
productDetailTable1
<table>
This is the table surrounding the whole Product Detail Page.
|
|
Class:
Tag:
Usage:
|
productDetailTitleText
<font>
Depreciated: Use pageHeader
|
|
Class:
Tag:
Usage:
|
productDetailColorOutOfStock
<div>
This is the div which is displayed over a color swatch when a user rolls over the color swatch of a color which is out of stock.
|
|
|
|
Class:
Tag:
Usage:
|
pricingTable
<table>
The table which holds the pricing data.
|
|
Class:
Tag:
Usage:
|
pricingHeader
<td>
The cell surrounding each pricing quantity range.
|
|
Class:
Tag:
Usage:
|
pricingColorName1/ pricingColorName2
<td>
The two classes which contain the color name. Both classes should match exactly except for the background color
as it rotates based on the pricing breaks.
|
|
Class:
Tag:
Usage:
|
pricingSwatch1/ pricingSwatch2
<td>
The two classes which contain the color swatch. Both classes should match exactly except for the background color
as it rotates based on the pricing breaks.
|
|
Class:
Tag:
Usage:
|
pricingPrice1/ pricingPrice2
<td>
The two classes which contain the price. Both classes should match exactly except for the background color
as it rotates based on the pricing breaks.
|
|
|
|
Class:
Tag:
Usage:
|
productDetailTabTable
<table>
The table surrounding the tabs.
|
|
Class:
Tag:
Usage:
|
productDetailTabExtra
<td>
The extra space at each end of the tabs.
|
|
Class:
Tag:
Usage:
|
productDetailTabFocus
<td>
This is the tab which is currently in focus
|
|
Class:
Tag:
Usage:
|
productDetailTabUnfocus
<td>
These are all the tabs which are not in focus.
|
|
Class:
Tag:
Usage:
|
productDetailTabTextFocus
<font>
The is the text within the tab in focus.
|
|
Class:
Tag:
Usage:
|
productDetailTabTextUnFocus
<font>
This is the text within the tabs which are not in focus.
|
|
|
|
Class:
Tag:
Usage:
|
buyBoxTable
<table>
This is the table surrounding the box.
|
|
Class:
Tag:
Usage:
|
buyBoxHeaderTD
<td>
This is the header column tag (td).
|
|
Class:
Tag:
Usage:
|
buyBoxHeaderText
<font>
This is the font tag around 'Ready to Buy?'.
|
|
Class:
Tag:
Usage:
|
buyBoxItemPrice
<span>
This is the span tag around each item price in the buy now box.
|
|
Class:
Tag:
Usage:
|
buyBoxProductNumber
<span>
This is the span tag around the product number at the bottom of the buy now box.
|
|
|
|
Class:
Tag:
Usage:
|
sizeChartTitleText
<font>
This surrounds the headings for the size equivalencies and product measurements.
|
|
Class:
Tag:
Usage:
|
sizeChartTable
<table>
This is the table for each set of measurements.
|
|
Class:
Tag:
Usage:
|
sizeChartHeaderTD
<td>
The cell surrounding each header cell which contains some text.
|
|
Class:
Tag:
Usage:
|
sizeChartHeaderTDSpacer
<td>
This is the header cell which controls the spacing between each header cell containing text
|
|
Class:
Tag:
Usage:
|
sizeChartHeaderDIVSpacer
<div>
This is the div within each sizeChartHeaderTDSpacer to control the font size and right border
|
|
Class:
Tag:
Usage:
|
sizeChartTD
<td>
Every cell within the table which contains data
|
|
Class:
Tag:
Usage:
|
sizeChartDIV
<div>
This is the div within each sizeChartTD which adds some spacing to the cell.
|
|
Class:
Tag:
Usage:
|
sizeChartTDName
<td>
The cell containing the row's name (far left column)
|
|
Class:
Tag:
Usage:
|
sizeChartTDSpacer
<td>
The cell which controls the spacing between all the cells in the table
|
|
Class:
Tag:
Usage:
|
sizeChartDIVSpacer
<div>
The div within each sizeChartTDSpacer to control the font size and right border
|
|
|
|
Class:
Tag:
Usage:
|
cartTitleText
<font>
This is the font tag around the title of the shopping cart i.e. 'Shopping Cart'.
|
|
Class:
Tag:
Usage:
|
cartTable
<table>
This is the table surrounding the whole cart.
|
|
Class:
Tag:
Usage:
|
cartHeadTR
<tr>
This is header row.
|
|
Class:
Tag:
Usage:
|
cartHeadText
<font>
This is the header text for each column in the cart.
|
|
Class:
Tag:
Usage:
|
cartTD
<td>
This is each cell within the cart.
|
|
Class:
Tag:
Usage:
|
cartLineTD
<td>
This is the last cell after every row in the cart. Used to create the line between items.
|
|
|
Class:
Tag:
Usage:
|
menuTable
<table>
This is the class of both the sections menu and the pricing menu. This class indents the menu by default.
|
|
Class:
Tag:
Usage:
|
menuSelectedText
<font>
This class is in a font tag around each menu item when it is selected.
|
|
Class:
Tag:
Usage:
|
menuLink
<a>
This is the class around each menu item which is not selected.
|
|
Class:
Tag:
Usage:
|
menuLevel1/ menuLevel2/ etc.
<font> and <a>
This is a secondary class used to specify the level of a section within the menu.
A store with 2 sections:
Section A
Section B
Section B is inside of Section A. Section A is on level 1 and Section B is on level 2.
|
|
Class:
Tag:
Usage:
|
breadcrumbLink
<a>
This is the tag around each section in the breadcrumb
|
|
Class:
Tag:
Usage:
|
breadcrumbProduct
<font>
This is the tag around the product title in the breadcrumb.
|
|
|
Class:
Tag:
Usage:
|
helpCenterSubHeaderTD
<td>
This surrounds each help sub section. It defaults to a single line under each header.
|
|
Class:
Tag:
Usage:
|
helpCenterSubHeader
<font>
This surrounds the header text of each help sub section.
|
|
Class:
Tag:
Usage:
|
helpCenterStoreArticleText
<font>
This surrounds the article text in each sub section. Most articles have some predefined
formatting which cannot be changed such as bolding and sizing.
|
|
|
|
Class:
Tag:
Usage:
|
underlineHeader
<td>
This sets all text within the cell as bold and puts a blue border on the bottom of the cell.
|
|
Class:
Tag:
Usage:
|
underlineHeaderPurple
<td>
This sets all text within the cell as bold and puts a purple border on the bottom of the cell.
|
|
Class:
Tag:
Usage:
|
pageHeader
<font>
This is used for all headers across the store. For instance the product's title on the product's detail page as well as
the headers displayed on the up-sell page after a customer places an item in to their cart. This is also used for the headers
in the help section of the store.
|
|
Class:
Tag:
Usage:
|
cellChanged
<td>
This is the class applied to the surrounding element (usually a td) of items which have been changed in the cart on the up-sell page
when the page does not refresh.
|
|
Class:
Tag:
Usage:
|
infoRed
<div>
This class is applied to a div surrounding an error message. Currently only used on the product's detail page
when a customer selects a color which is out of stock.
|
|
Class:
Tag:
Usage:
|
dashedGrayLineHorizontal
<td>
This is a dividing line used on the upsell page
|
|
|
