CubeCart v3 Documentation Feed http://www.cubecartforums.org/docs/repository/cubecart-v3-feed.html en CubeCartForums.org Documentation 2006 120 Thumbnails Explained http://www.cubecartforums.org/docs/CubeCart-v3/faq/thumbnails-explained.html

Page Contents

CubeCart Thumbnails Explained

CubeCart generates product thumbnails automatically when you assign an image to a product. The size of the thumbnail is determined by the size setting you have entered inside the admin area under General Settings:



As you can see it only allows you to enter one number for thumbnail size. It doesn't allow you to enter both a width and a height. So what it does with that number is resize the longest side of the image to that number and the other side is then sized proportional to the original image.

Further explanation on size: If the product image is horizontal, or wider than it is tall, the width of the thumbnail will be the sized in pixels to the number that is set in general settings and the height of the image will be proportional to the height of the original image. If the product image is vertical or taller than it is wide, the height of the thumbnail will be the sized in pixels to the number that is set in general settings and the width of the image will be proportional to the original product image that you uploaded.

For example:


How this works in conjunction with the skin

It really depends on how your skin is coded. I'm going to use one of CubeCarts original skins Classic as an example of the problems and solutions for common problems with thumbnails. These techniques are used by many free and commercial skins available for CubeCart.

Thumbnails on the homepage in Latest Products

The thumbnails here are inside divs along with the product's title and price, imagine invisible boxes if you don't understand divs. These boxes float left and line up in horizontal rows. If your thumbnails are all the exact same height then you won't run into many problems. But if your thumbnails vary in height your layout might look like this:



A common fix for this problem is to add a height to the div that contains the the thumbnails, title and price: v4 Classic already has this, and the newer versions of Classic that come with v3 also have this.

This is from 'layout.css':
.latestProds {
float:left;
height:120px;
text-align:center;
width:131px;
}
Using the example above, this almost works for all our images, except those that are too big.



An easy fix for this would be to increase the height of the div, here's an example of an increase from a height of 120px to a height of 195px so that we can see the entire image, it's title, and it's price.

This is from 'layout.css':
.latestProds {
float:left;
height:195px;
text-align:center;
width:131px;
}
The result:



For some people this fix is sufficient, for others they would like for the titles and the prices to line up, too. Here's where it gets tricky, because there are different ways to accomplish this.

One technique is the add a div that contains only the thumbnail and add attributes to that div that tell it to crop the image if the image is longer or wider than a certain setting. Here's how you do this:

Step 1: You need to add html to the template file. Open up yourskin/styleTemplates/content/index.tpl and find the thumbnail image:

<a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}"><img src="{VAL_IMG_SRC}" alt="{VAL_PRODUCT_NAME}" border="0" title="{VAL_PRODUCT_NAME}" /></a>
Now you need to put that image inside a surrounding div, this is what that code looks like:
<div class="imgcrop"><a href="index.php?act=viewProd&amp;productId={VAL_PRODUCT_ID}"><img src="{VAL_IMG_SRC}" alt="{VAL_PRODUCT_NAME}" border="0" title="{VAL_PRODUCT_NAME}" /></a></div>
Step 2: You need to add the css for that surrounding div to 'layout.css':
.imgcrop {
height: 100px;
width: 100px;
overflow: hidden;
text-align:center;
margin:0px auto;
}
This code basically makes an invisible box that is exactly 100x100 any image that is larger that this will be cut off and will align top left inside the invisible box. Any image that is smaller than 100x100 will align top and centre.

Here's our example with this code (I also changed the height of div.latestproduct to 175px from 195px):



This will fix most, if you have mega-long product titles and want the prices to line up exact, you will need to use this same technique for the titles. Place the title in a surrounding div and give that div a height. This is just a basic example, you can get as fancy as you want for this area, you can even recode your category pages to look just like your latest product area.

Other issues:

Featured Product box will have issues with large thumbnails.



Fix technique #1, add code to the CSS which crops anything that tries to go outside of the box.

This is code from the 'layout.css' stylesheet:
.boxContentLeft, .boxContentRight {
background-color:#EBEDFE;
border:1px solid #000000;
margin-bottom:10px;
padding-bottom:5px;
padding-left:5px;
padding-top:3px;
}
Add this:
overflow: hidden;
For example:
.boxContentLeft, .boxContentRight {
background-color:#EBEDFE;
border:1px solid #000000;
margin-bottom:10px;
padding-bottom:5px;
padding-left:5px;
padding-top:3px;
overflow: hidden;
}
The result:



Fix technique #2, add a width to the image to it never can get too big.

This is code from yourskin/styleTemplates/boxes/randomProd.tpl:
<img src="{IMG_SRC}" alt="{PRODUCT_NAME}" border="0" title="{PRODUCT_NAME}" />
Now add a width:
<img src="{IMG_SRC}" alt="{PRODUCT_NAME}" border="0" title="{PRODUCT_NAME}" width="130" />
The result:



Fix technique #3, add a surrounding div to the image, set width and height and add an overflow:hidden; attribute. This is the same technique we used above for the Latest Product box.

Category pages for some skins will have issues with thumbnails that are too wide.

For example:



For the example above, any image over 190px wide will push table which contains it out too wide. You can use the same 3 techniques used above to fix this problem. ]]> Thu, 10 Jun 2010 09:23:15 +0000 http://www.cubecartforums.org/docs/CubeCart-v3/faq/thumbnails-explained.html CubeCartForums.org Documentation prodImages.tpl http://www.cubecartforums.org/docs/CubeCart-v3/Customising-CubeCart/skin-template-layout/popup-template/prodimages.tpl.html

Page Contents

Description

Additional image popup page, as clicked on when additional images are assigned to a product. This template is the entire page for the popup images page, therefore includes all the usual HTML page information, header and body tags.

Template file location

/skins/YOUR_SKIN/styleTemplates/popup/prodImages.tpl

Control file location

extra/prodImages.php

Basic template structure

<!-- BEGIN: prod_images -->

<!-- BEGIN: thumbs -->
          Repeating thumbnail images.
<!-- END: thumbs -->

<!-- END: prod_images -->
]]> Wed, 20 Jun 2007 16:04:46 +0000 http://www.cubecartforums.org/docs/CubeCart-v3/Customising-CubeCart/skin-template-layout/popup-template/prodimages.tpl.html CubeCartForums.org Documentation No Products in Category http://www.cubecartforums.org/docs/CubeCart-v3/faq/no-products-in-category.html

Page Contents


Overview

When there are no products in a category, a message appears on the category page:

There are no products in this category.

The message does not always apply if the category descriptions mod has been installed, or there are subcategories within that category.

Therefore to remove this message there are two ways of doing it, removal in the language file, or removal in the skin.

Removal from the skin.

Removal from the skin automatically affects all languages the store uses.

Edit:

/skins/SKIN_NAME/styleTemplates/content/viewCat.tpl

Find near the bottom:
<!-- BEGIN: noProducts -->
<div>{TXT_NO_PRODUCTS}</div>
<!-- END: noProducts -->
Remove, or comment out the following:
<div>{TXT_NO_PRODUCTS}</div>
Save and Upload.

Removal from the language file.

Removal from the language file only affects the language it is removed from.

Edit:

/language/LANG_CODE/lang.inc.php

Find this line, around line 1984:
'no_prods_in_cat' => "There are no products in this category.",
Remove the comment within the quotes, as shown below:
'no_prods_in_cat' => "",
Save and Upload. ]]> Sun, 17 Jun 2007 15:18:13 +0000 http://www.cubecartforums.org/docs/CubeCart-v3/faq/no-products-in-category.html CubeCartForums.org Documentation popup.css http://www.cubecartforums.org/docs/CubeCart-v3/Customising-CubeCart/skin-stylesheets/popup.css.html skins/YOUR_SKIN/styleSheets/popup.css


Style Description
body Sets styles for the HTML body tag.
#pageSurround Sets styles for the pageSurround id, used as a surrounding division in prodImages.tpl.
#divThumbsImg Thumbnail image surrounding area.
.thumbsImg Each thumbnail image.
#divMainImg Enlarged image area.
a.popupLink The close window link.
a.popupLink:hover The close window link hover effect.
.txtCopyright,
a.txtCopyright		 Formats the copyright text, this class is not found in template files but is coded into php files.
a.txtCopyright:hover Controls copyright text behavior on rollover.

]]> Wed, 20 Jun 2007 16:48:22 +0000 http://www.cubecartforums.org/docs/CubeCart-v3/Customising-CubeCart/skin-stylesheets/popup.css.html CubeCartForums.org Documentation layout.css http://www.cubecartforums.org/docs/CubeCart-v3/Customising-CubeCart/skin-stylesheets/layout.css.html skins/YOUR_SKIN/styleSheets/layout.css


Style Description
body Sets styles for the HTML body tag.
#pageSurround Sets styles for the pageSurround id, used as a surrounding division in global/index.tpl and global/cart.tpl.
#topHeader Sets styles for the topHeader id, used as a top-of-page division in global/index.tpl and global/cart.tpl.
.boxTitleLeft,
.boxTitleRight		 Classes for the side box title bars, used in practically all files appearing in the styleTemplates/boxes folder.
.boxContentLeft,
.boxContentRight		 Sets styles for the side box "content boxes".
.colLeft Properties for the left column that contains all the left-side boxes, found in the Global templates.
.colMid Properties for the large center column that contains all the main page content, found in the Global templates.
.colRight Properties for the right column that contains all the right-side boxes, found in the Global templates.
.boxContent Container divisions for holding all the main content appearing in center column.
.colLeftCheckout Properties for the left column that contains cart navigation on the cart pages.
.colMainCheckout Container division for holding all the content appearing in large right-side main column of cart pages.
.siteDocs Controls the site doc links container in the documents template, siteDocs.tpl
.pagination Styles the pagination text from category pages, in viewCat.tpl.
#subCats Containing division id for the area holding subcats on the category pages, in viewCat.tpl
.subCat Individual container divisions class for subcats, in viewCat.tpl.
.regSep Separator for sections, used only on the step 1 page of cart, step1.tpl.
.latestProds A new class in later CubeCart 3 versions for aid in controlling Latest Products appearance on the homepage template, content/index.tpl.

]]> Wed, 20 Jun 2007 16:48:22 +0000 http://www.cubecartforums.org/docs/CubeCart-v3/Customising-CubeCart/skin-stylesheets/layout.css.html CubeCartForums.org Documentation style.css http://www.cubecartforums.org/docs/CubeCart-v3/Customising-CubeCart/skin-stylesheets/style.css.html skins/YOUR_SKIN/styleSheets/style.css


Style Description
.searchBtn The search button, used in search.tpl.
.searchBox The text entry search box, used in search.tpl.
.textbox The text entry box used for the customer registration, mailing list, customer profile text entry boxes etc
.textboxDisabled
.submit The submit button, used in most text entry forms.
form, ol, ul General settings for forms, ordered and unordered list.
li A general setting for list items. This covers bullet point and numbered items throughout the store and in the rich text editor.
li.bullet Categories and Cart navigation menu list item, as well as other site boxes that use bullets in the list.
li.bulletLrg Used for the 'Tell-a-friend' link on the product detail template viewProd.tpl.
li.num Used for numbered list items, like the sale items and popular products.
li.account Customer account items, used in account.tpl
.txtSession,
a.txtSession,
a.txtSession:hover		 Login, logout and search text uses the txtSession class for formatting in both searchForm.tpl and session.tpl.
.txtCopy Text in the Information box, Mailing List box and the Featured Product's product name are controlled with this, used in info.tpl, mailList.tpl and randomProd.tpl
.txtSiteDocs,
a.txtSiteDocs,
a.txtSiteDocs:hover		 This class is used to control the appearance of Site Document links, and is used only in siteDocs.tpl. Important Note: The .siteDocs classes are repeated twice in this stylesheet by error of CubeCart in most versions. You should take care to find and delete the dual occurrences.
a.txtButton Buy and More and Add to Basket buttons, found on category and products pages, these are coded in viewCat.tpl and viewProd.tpl
a.txtButton:hover As with all the CSS classes, the initial a. denotes behavior as a link, and :hover denotes behavior on mouse rollover.
.txtOldPrice This controls the look of an original price, when posted together with a sale price; by default it is text with a line striking through it. This class is coded in a php file rather than a template file.
.txtSale This controls the look of an sale price, and is coded in content/index.tpl, viewCat.tpl and viewProd.tpl
.txtOutOfStock The words "OUT OF STOCK" are styled with this class, used in viewCat.tpl and viewProd.tpl
.txtSiteDocs,
a.txtSiteDocs		 See above: txtSiteDocs appears twice by error in CubeCart stylesheets, be sure to delete one full set.
a.txtSiteDocs:hover See above.
.txtDefault,
a.txtDefault,
a.txtDefault:hover		 Named txtDefault because it used extensively throughout CubeCart; you will find it in cartNavi.tpl, categories.tpl, popularProducts.tpl, randomProd.tpl, saleItems.tpl, account.tpl, content/index.tpl, login.tpl, step1.tpl, viewCat.tpl, and viewOrder.tpl.
a.txtLink,
a.txtLink:hover		 This style controls only the order links in the view orders page of a customer's account, coded in viewOrders.tpl
a.txtLocation,
a.txtLocation:hover		 "Breadcrumb" links in the location text, top of category and product pages, but the class is not coded in templates, it is coded in the corresponding php files.
.txtContentTitle Titles in the main content area, example, "Welcome to CubeCart" and "Latest Products" - this class is used in every file appearing in the styleTemplates/content/ folder
.txtBoxSave Used only in Sale Items box to indicate amount of savings on sale items, coded in saleItems.tpl
.tblList Sets properties for the product list table in view Cat pages, used in viewCat.tpl.
.tdListTitle Title bar in the product list from view cat page
.tdEven tdEven and tdOdd set the alternating colors for the rows in the product list of view cat page
.tdOdd tdEven and tdOdd set the alternating colors for the rows in the product list of view cat page
.txtCartPrice Controls much of the text in the shopping cart side box, used in shoppingCart.tpl
.txtCart Controls much other of the text in the shopping cart side box, used in shoppingCart.tpl
.cartTotal Controls the total shown in the shopping cart side box, used in shoppingCart.tpl
a.txtCartProduct:active,
a.txtCartProduct:link,
a.txtCartProduct:visited,
a.txtCartProduct:hover		 Products listed in the shopping cart box are also links to product pages, these styles control the look of those links
a.txtviewCart:active,
a.txtviewCart:link,
a.txtviewCart:visited,
a.txtviewCart:hover		 The button for View Cart in the shopping cart box
.cartProgress The checkout progress indicator.
.txtcartProgressCurrent Current stage of the checkout process.
.quickBuy The "add a product id" section appearing in top of cart checkout pages.
.tdcartTitle Title bar for the product list table for products being purchased on shopping cart pages, the same styles are used for tables on register page, and customer account view orders pages, used in content/cart.tpl, reg.tpl, viewOrder.tpl and viewOrders.tpl
.tdcartEven tdcartEven and tdcartOdd set the alternating colors for the rows in tables for cart product list and view orders lists
.tdcartOdd tdcartEven and tdcartOdd set the alternating colors for the rows in tables for cart product list and view orders lists
.tdCartSubTotal Subtotal in shopping cart.
a.txtCheckout "Continue" button in cart pages, for continuing checkout, also used in register and confirmed pages, cart.tpl, step1.tpl, gateway.tpl, reg.tpl, confirmed.tpl.
a.txtUpdate "Update Cart" button in checkout screens, cart.tpl and step1.tpl.
.txtStockWarn Stock warning text found only in cart page.
.txtError Error text formating, used in changePass.tpl, profile.tpl, reg.tpl, tellafriend.tpl and unsubscribe.tpl.
.txtCopyright,
a.txtCopyright		 Formats the copyright text, this class is not found in template files but is coded into php files.
a.txtCopyright:hover Controls copyright text behavior on rollover.
.dropDown Sets styles for the dropdown boxes used in currency.tpl and language.tpl

]]> Wed, 20 Jun 2007 16:49:17 +0000 http://www.cubecartforums.org/docs/CubeCart-v3/Customising-CubeCart/skin-stylesheets/style.css.html CubeCartForums.org Documentation overWeight.tpl http://www.cubecartforums.org/docs/CubeCart-v3/Customising-CubeCart/skin-template-layout/content-templates/overweight.tpl.html

Page Contents

Description

If the products in the cart are overweight.

Template file location

/skins/YOUR_SKIN/styleTemplates/content/overWeight.tpl

Control file location

/includes/content/overWeight.inc.php

Basic template structure

<!-- BEGIN: over_weight -->

<!-- END: over_weight -->
]]> Thu, 14 Jun 2007 14:25:02 +0000 http://www.cubecartforums.org/docs/CubeCart-v3/Customising-CubeCart/skin-template-layout/content-templates/overweight.tpl.html CubeCartForums.org Documentation noShip.tpl http://www.cubecartforums.org/docs/CubeCart-v3/Customising-CubeCart/skin-template-layout/content-templates/noship.tpl.html

Page Contents

Description

If no shipping is configured.

Template file location

/skins/YOUR_SKIN/styleTemplates/content/noShip.tpl

Control file location

/includes/content/noShip.inc.php

Basic template structure

<!-- BEGIN: no_ship -->

<!-- END: no_ship -->
]]> Thu, 14 Jun 2007 14:22:30 +0000 http://www.cubecartforums.org/docs/CubeCart-v3/Customising-CubeCart/skin-template-layout/content-templates/noship.tpl.html CubeCartForums.org Documentation dnExpire.tpl http://www.cubecartforums.org/docs/CubeCart-v3/Customising-CubeCart/skin-template-layout/content-templates/dnexpire.tpl.html

Page Contents

Description

This template is displayed if a digital download link has expired.

Template file location

/skins/YOUR_SKIN/styleTemplates/content/dnExpire.tpl

Control file location

/includes/content/dnExpire.inc.php

Basic template structure

<!-- BEGIN: dn_expire -->

<!-- END: dn_expire -->
]]> Thu, 14 Jun 2007 13:23:13 +0000 http://www.cubecartforums.org/docs/CubeCart-v3/Customising-CubeCart/skin-template-layout/content-templates/dnexpire.tpl.html CubeCartForums.org Documentation confirmed.tpl http://www.cubecartforums.org/docs/CubeCart-v3/Customising-CubeCart/skin-template-layout/content-templates/confirmed.tpl.html

Page Contents

Description

This template is viewed after the transaction has completed. It displays the order success or failure messages.

Template file location

/skins/YOUR_SKIN/styleTemplates/content/confirmed.tpl

Control file location

/includes/content/confirmed.inc.php

Basic template structure

<!-- BEGIN: confirmation -->

<!-- BEGIN: session_true -->

     <!-- BEGIN: order_success -->
          The order was successful.
         <!-- BEGIN: aff_track -->
              Affiliate tracking details.
         <!-- END: aff_track -->
     <!-- END: order_success -->

     <!-- BEGIN: order_failed -->
          Order failed.
     <!-- END: order_failed -->

<!-- END: session_true -->

<!-- BEGIN: session_false -->
      Page view not valid.
<!-- END: session_false -->

<!-- END: confirmation -->
]]> Thu, 14 Jun 2007 13:13:48 +0000 http://www.cubecartforums.org/docs/CubeCart-v3/Customising-CubeCart/skin-template-layout/content-templates/confirmed.tpl.html CubeCartForums.org Documentation