Designer's Guide

Tradingeye is a very simple shopping cart to reskin - almost any layout can be acheived by simply editing the appropriate stylesheet. For the vast majority of reskins, there is usually no need to edit any HTML templates - to add or remove features in the front end, simply enable/disable them in the admin panel, and then style what's left accordingly.

This guide will assume you have a fresh, unedited install of Tradingeye set up on your server, ready to work on. Also, a decent working knowledge of (X)HTML & CSS really is required when working with the stylesheet.

The main stylesheet

The styling of Tradingeye's front end (for the screen) is determined entirely with one stylesheet. By default, this is petrol.css. As the default stylesheet, it's often much easier for CSS novices and the less adventurous to edit and adapt this stylesheet to your design, rather than writing an entirely new stylesheet from scratch.

The petrol.css file can be found at:

/css/petrol.css

That said, should you wish to change this to call to your own stylesheet rather than editing the original file (for backup purposes, for example), then simply upload your stylesheet to the /css/ folder, and edit line 37 of your configuration.php file, found in the root of your Tradingeye installation:

define("DEFAULT_CSS","petrol.css");

The only other stylesheet you should be concerned with at this location will be the print.css - which, as the name suggests, takes care of the page styling when printed. Edit this file as needed to style your printed pages and invoice receipts.

Stylesheet sections

The main stylesheet has been broken up into logical sections, allowing designers to quickly find and edit certain areas of the site. Use your preferred text/code editor's search function to quickly jump between stylesheet sections, by prefixing the section name with "=". Here's a run down of the main areas of petrol.css:

Foundation =RESET =BASE

This section of the stylesheet basically gives us a level playing field to work on, by overriding any browser defaults and resetting them to zero. This makes styling the site, and testing cross-browser a lot simpler later on.

Similarly, the =BASE section will set down some further basic styling of the HTML/body tags, links, typography, hidden items etc. With this foundation set, we can then move onto the individual "blocks" which our site comprises of.

Container =CONTAINER

Note: You will notice that the main divisions of the page have within them a division with the class of .inner directly inside them. These are simply additional hooks you can use to achieve more advanced layouts, should you need them.

The main #container division will envelop the entire site. Here we can set the base text alignment, center our page column if needed, as well as any other styling this section may need. You can center a fixed width site by setting the width of this container - as the container surrounds the #header, #mid and #footer sections of the site, these will also constrain to the width you set.

Header =HEADER

The #header section of the site contains the site branding and shopping cart information. #logo takes care of the logo & homepage link, with h2#tagline being the company slogan, or site description. The #info division houses the customer's shopping cart contents.

Mid =MID

The #mid section of the site acts as a wrapper for the #main and #sidebar of the site, and also contains the #breadcrumbs navigation.

Sidebar =SIDEBAR

The #sidebar division houses most all of your site's navigation, as well as the #search form, #shopByBrand select list, #newsletter signup form, and #recentlyViewed products list. All navigation is marked up as unordered lists, with the first list item having a class of .first automatically applied, to help with styling. All navigation blocks and menu titles have their own classes and IDs, and so can easily be styled independently of each other. You will also notice that each navigation anchor tag also contains span tags which wrap the link text. Again, just another hook that may be useful when styling your site.

Content =MAIN =CONTENT

The #main division wraps the main content area of the site - including all admin-managed text content, product listings, product information, article listings, sub department listings, reviews etc.

Admin-managed text areas will all be housed within the #content division, allowing you to style these sections further than the foundations set earlier on in the stylesheet.

Sub Departments =SUBDEPARTMENTS

If the Enable Tree Navigation setting in your shop's Admin Panel (Settings » Global Settings » Design Settings) has been set to OFF, then your sub departments will be listed in the content area of your site. These will be output as an unordered list, with the id of #navSubDepartments.

Otherwise, if the Enable Tree Navigation setting is set to ON, then your full department structure will be listed in the sidebar as nested unordered lists, reflecting your shop's department hierarchy.

Forms =FORMS

Use the Forms section of the stylesheet to style all form elements - fieldsets, inputs, select lists, buttons etc. You will see that all form fields have certain classes applied - .formField, .formFieldShort, .formSelect and so on. This will let you style all your form elements easily depending on their use in Tradingeye.

Tables =TABLES

The Tables section of the stylesheet styles all tables in Tradingeye. Although there are only several templates which use tables for layout purposes - the shopping cart, contact forms and checkout forms - these can be conveniently styled here in just a few short lines.

Pagination =PAGINATION

The pagination is marked up as a simple unordered list, with a class of .pagination. There are four links in this list - First, Previous, Next and Last, each with it's own appropriate class for styling.

Product Listings =PRODUCTS

Products are listed on the page as unordered lists, with a class of .products. Inside each list item, will be the following:

  • Product Title - anchor link to Product Details page inside h3 tags
  • Image Thumbnail - anchor link to Product Details page contained within p.image
  • Reviews - p.review sets the basic review formatting, with the class rating* setting the review rating
  • Add to Wish List / Add to Comparison List - Both anchor links contained in paragraphs with their own individual classes
  • Description - A paragraph with the class of .desc
  • On Sale - A paragraph with the class of .onSale
  • Price - A paragraph with the class of .price

Please note: Certain elements such as the reviews, on sale, wish list and comparison links will only display if those features are turned ON in the Tradingeye admin panel.

Product Details =PRODUCT DETAILS

The Product Details page contains most of the same information as the Product Listings section, although expanded somewhat, and with the addition of product options, the add to basket button, long description and gallery images.

The main product information is contained within the division #product, and by default has the image gallery container .image floated left, with the product price, options and Add to Basket button (.info) floated right. The Long Description sits beneath #product inside the #content division. After this section lies and associated products, and the reviews section.

Articles =ARTICLES

Tradingeye offers a simple feature for adding and managing content pages. Termed Articles, these pages are very basic content-only pages which can not only be attached to departments and products, but also have products attached to them. By default, articles are presented as anchor links within unordered lists in the lower part of the page, and can be styled in exactly the same way as the content-area sub department listings are.

Reviews =REVIEWS

The Reviews section of the stylesheet is split into three parts. The /* star ratings */ section takes care of the image replacement technique used for the star ratings image. This technique uses one image (a matrix of stars ranging from 0 to 5, in half-star increments) to represent each rating of 0 to 10. This background image sits behind p.review and the second class of .rating0 - .rating10 sets it's position. So depending on the actual rating given, p.review will display the correct number of stars. The /* product reviews */ section styles how the review rating is displayed on the product page, within .info, and the third section here simply styles the user review form, shown at the foot of a product details page, once a user has logged in.

Search Results =SEARCH RESULTS

The Search Results page is presented as an ordered list, with each h3 containing an anchor link to the article result. As span with a class of either .department, .product or .article is wrapped around the text showing which type of result has been returned. This span sits inside the h3, but outside of the link. If the result has one, then an excerpt of the Short Description paragraph will also be pulled in, inside the list item.

Miscellaneous =MISC

The Miscellaneous section collects the classes and IDs used in the shopping cart area of tradingeye. The .module1 and .module2 classes are applied to divs and are used to divide certain sections of the cart process off; in the case of the default theme they are used to create two separate floated columns.

Footer =FOOTER

The #footer division contains the site info links - accessibility statement, terms & conditions etc. is marked up as another unordered list, with the copyright information sitting insode p#credits.

Float Fix =FLOAT FIX

When an element is floated, it is taken out of the document flow. As a result, any parent element wrapping the floated element will cease to accommodate the height of the floated element. This can result in broken layouts and styling issues, so we've added a version of the popular .clearfix method, to help solve such problems.

Rather than hunting through template files, adding the .clearfix class to all problem elements, you can simply add the mischievous selector (or element tag) to the =FLOAT FIX section of the stylesheet. This has the exact same effect, but without the need for extra markup and template edits.

You should follow the same method as the existing rules when adding to the float fix:

.className:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}
.className {
	display: inline-block;
/* Hide from IE Mac \*/
.className {
	display: block;
	}
/* End hide from IE Mac */