business simplified.
Building Custom Website Themes
The SiteFront system was designed to keep building and maintaining websites as simple as possible, and this was also the case for building website themes. There are a number of website themes available in the system for businesses to choose from, however there are cases where a business wants to have their own unique branded design. Neetrix allows for these too and are appropriately called "Custom Themes".
How Do SiteFront Themes Work?
SiteFront Themes change the way websites look and feel. They do this by allowing a web designer to build their own HTML template and applying tags to define areas that will accept content by the SiteFront website editor. These tags are defined in the system and have been determined by the typical way websites are laid out. This keeps themes simple and also gives users the chance to change from one Theme to another without any consequence to the website and its content. Tags do not have to be used in the manor they are labelled and can be placed anywhere in the theme in any order. Tags don't have to be used although it is strongly suggested to include the [ContentArea] to ensure web applications can function correctly.
There are also other tags that help SiteFront with Meta Tag information placement. You should add [PageTitle], [PageDescription] and [PageKeywords] into the page head section within the relevant Meta tag elements.
In order to keep themes simple and the optimisation of Neetrix very fast, each theme is limited to 4 main layouts that users can pick from to determine the general layout of a page. These are as follows.
 |
One Column This layout represents a single column which commonly will not have any of the LeftArea or RightArea tags available. |
 |
Two Column - Left This layout represents a double column which commonly will not have any of the RightArea tags available. |
 |
Two Column - Right This layout represents a double column which commonly will not have any of the LeftArea tags available. |
 |
Three Column This layout contains the maximum number of areas for which content can be added including both the LeftArea and RightArea tags. |
Because of the way the themes and Neetrix SiteFront works, the layouts do not have to be designed exactly in this manor, and you can have multiple themes used within a single website by assigning different themes to individual pages. This means it's theoretically possible to have as many layouts as you could possibly need for a single website.
Building Your New Theme Code
The following is a basic set of HTML and CSS code to help start a new Theme. It contains a suggested set of basic layouts to start with and basic CSS files that describe most of the style classes that Neetrix uses. Alternatively you can create a theme in Neetrix based on an existing template which will copy the layouts and files for that theme. Both of these methods give the opportunity to tweak a working theme rather than starting completely from scratch.
One Column
You can use this code as the basis for the One Column theme layout.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>[PageTitle]</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="[PageDescription]" />
<meta name="Keywords" content="[PageKeywords]" />
<link rel="stylesheet" type="text/css" href="/Content/Theme/style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div>[SiteHeader]</div>
<div>[PageHeader]</div>
<div>[Navigation]</div>
<div>[SiteLogo]</div>
</div>
<div id="content">
<div>[ContentAreaHeader]</div>
<div>[ContentArea]</div>
<div>[ContentAreaFooter]</div>
</div>
<div id="footer">
<div>[PageFooter]</div>
<div>[SiteFooter]</div>
</div>
</div>
</body>
</html>
Two Column - Left
You can use this code as the basis of the Two Column - Left theme layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>[PageTitle]</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="[PageDescription]" />
<meta name="Keywords" content="[PageKeywords]" />
<link rel="stylesheet" type="text/css" href="/Content/Theme/style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div>[SiteHeader]</div>
<div>[PageHeader]</div>
<div>[Navigation]</div>
<div>[SiteLogo]</div>
</div>
<div id="content">
<div id="leftColumn">
<div>[LeftAreaHeader]</div>
<div>[LeftArea]</div>
<div>[LeftAreaFooter]</div>
</div>
<div id="mainColumn">
<div>[ContentAreaHeader]</div>
<div>[ContentArea]</div>
<div>[ContentAreaFooter]</div>
</div>
</div>
<div id="footer">
<div>[PageFooter]</div>
<div>[SiteFooter]</div>
</div>
</div>
</body>
</html>
Two Column - Right
You can use this code as the basis of the Two Column - Right theme layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>[PageTitle]</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="[PageDescription]" />
<meta name="Keywords" content="[PageKeywords]" />
<link rel="stylesheet" type="text/css" href="/Content/Theme/style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div>[SiteHeader]</div>
<div>[PageHeader]</div>
<div>[Navigation]</div>
<div>[SiteLogo]</div>
</div>
<div id="content">
<div id="mainColumn">
<div>[ContentAreaHeader]</div>
<div>[ContentArea]</div>
<div>[ContentAreaFooter]</div>
</div>
<div id="rightColumn">
<div>[RightAreaHeader]</div>
<div>[RightArea]</div>
<div>[RightAreaFooter]</div>
</div>
</div>
<div id="footer">
<div>[PageFooter]</div>
<div>[SiteFooter]</div>
</div>
</div>
</body>
</html>
Three Column
You can use this code as the basis of the Three Column theme layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>[PageTitle]</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Description" content="[PageDescription]" />
<meta name="Keywords" content="[PageKeywords]" />
<link rel="stylesheet" type="text/css" href="/Content/Theme/style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div>[SiteHeader]</div>
<div>[PageHeader]</div>
<div>[Navigation]</div>
<div>[SiteLogo]</div>
</div>
<div id="content">
<div id="leftColumnThree">
<div>[LeftAreaHeader]</div>
<div>[LeftArea]</div>
<div>[LeftAreaFooter]</div>
</div>
<div id="mainColumnThree">
<div>[ContentAreaHeader]</div>
<div>[ContentArea]</div>
<div>[ContentAreaFooter]</div>
</div>
<div id="rightColumnThree">
<div>[RightAreaHeader]</div>
<div>[RightArea]</div>
<div>[RightAreaFooter]</div>
</div>
</div>
<div id="footer">
<div>[PageFooter]</div>
<div>[SiteFooter]</div>
</div>
</div>
</body>
</html>
Uploading and Referencing Files
One important thing to note here is how to access the theme files. Every theme can have files associated with it for instance CSS, JS, and image files are all typical of a theme. Uploading is easy and can be done in the Neetrix Theme editor. Please note that you can not have directories in the theme file folder. All files are all grouped into a single folder. This improves the site speed considerably, but can make things more complicated if you have a lot of files with your theme. We will be addressing this in future releases of Neetrix.
To reference a file, in your HTML layouts you only need to use the following path:
/Content/Theme/Filename.ext
Please note that when the theme is processed the path is changed to include the unique identifier of the theme. This means that the actual path when a SiteFront web page uses the your theme will actually be difference than the one above.
CSS Styling
For your convenience we have extracted the base CSS styles from each of the SiteFront Elements (Items) that users have access to. This does not include custom elements from NeetApps, however all elements are wrapped in a <div> of class "Element".
Below are some clean CSS files that have been split up into the relevant web applications for convenience. It's recommended to merge all the CSS files into one to increase the site speed and efficiency.
style.css
@import url("element.css");
@import url("blog.css");
@import url("album.css");
@import url("store.css");
body{ margin:0; padding:0; font-family:Verdana, Geneva, sans-serif;}
#wrapper{ width:960px; margin:0 auto; border:solid 1px #aaa; }
#header { height:150px; background-color:#eee; border-bottom: 1px solid #aaa}
#content { height:450px;}
#leftColumn,
#mainColumn,
#rightColumn,
#leftColumnThree,
#mainColumnThree,
#rightColumnThree
{ float:left; height:450px;}
#leftColumn { width:366px; border-right:1px solid #aaa; }
#leftColumnThree{ width:182px; border-right:1px solid #aaa; }
#mainColumn, #mainColumnThree { width:593px;}
#rightColumn { width:366px; border-left:1px solid #aaa; }
#rightColumnThree{ width:182px; border-left:1px solid #aaa; }
#footer { height:150px; background-color:#eee; border-top: 1px solid #aaa}
element.css
/* Global Class */
div.Element{} /* wrapper class for most elements */
div.ElementTitle{} /* title class for most elements */
/* Classes used by Form Element, Customer Login Form Element, Forgot Password Form Element, Store Search Box Element */
div.Form{}
div.FormResult{} /* invisible by default */
div.Failure{} /* result failure class */
div.Form dl{} /* form table */
div.Form dt{} /* label column */
div.Form dd{} /* input column */
div.FormValidation /* appear on each row that needs validation, locate inside dd just after the input tag*/
div.FormFooter{} /* bottom div for holding submit button */
div.FormFooter [type="submit"]{} /* submit button*/
/* Classes used by Blog and Gallery */
div.TextList{}
div.TextListItem{}
div.TextListItem a{}
div.RSSFeed{}
div.RSSFeed a{}
div.RSSFeed a img{}
/* TextHTML Element also used by Blog and Gallery*/
div.ElementTextHTML {}
/* Image Element */
div.ElementImage{}
/* Video Element */
div.ElementVideo{}
/* Contact Form Element */
div.ElementForm{}
div.FormCaptcha{} /* wrapper div for Captcha */
/* Site Navigation Element */
div.NavigationElement{}
div.NavigationElement ul{}
div.NavigationElement ul li{}
div.Navigationelement ul li.sub{} /* list item that has children, a good place for adding arrow */
div.NavigationElement ul li.selected{} /* active page */
div.NavigationElement ul li a span{} /* navigation link text */
div.NavigationElement ul.root{} /* first level */
div.NavigationElement ul.root li {} /* first level */
div.NavigationElement ul.root ul{} /* all child levels */
div.NavigationElement ul.root ul li {} /* all child levels */
/* Breadcrumb Trail Element */
div.ElementBreadcrumb{}
div.ElementBreadcrumb a{} /* link text */
div.ElementBreadcrumb span.separator{} /* seperator */
/* Customer Login Form */
div.ElementCustomerLoginForm{}
/* Customer Login Status */
.ElementCustomerLoginStatus{}
/* Forgot Password Form */
.ElementCustomerForgetPasswordForm{}
/* Page Title */
h1{}
blog.css
/* Blog Summary Feed Element */
div.ElementBlogSummaryFeed{}
div.ElementTitle{}
div.Date{}
div.Summary{}
div.Summary a{}
/* On This Page*/
/* Category Cloud */
a.TagLarge{}
a.TagMediumLarge{}
a.TagMedium{}
a.TagMediumSmall{}
a.TagSmall{}
/* Blog Archive */
/* About This Blog */
/* Blog Post */
div.BlogPostWrapper{}
div.BlogDate{}
div.BlogDetails{}
div.BlogTitle{}
div.BlogBody{}
div.BlogCategoryList{}
div.BlogDetailsBar{}
div.BlogSocialLinkList{}
div.BlogSocialLinkList a{}
store.css
/* Store Information Element */
/* Store Categories Navigation List Element */
ul.TextList{}
li.TextListItem{}
li.TextListItem a{}
/* Store Shopping Cart Summary Element */
div.ElementStoreCartSummary{}
div.ElementStoreCartSummary a{}
/* Store Search Box Element */
div.ElementStoreSearch{}
/* Store Featured Product List */
div.ElementStoreFeaturedProductList{}
div.InfoGrid{}
div.InfoGridItem{}
div.InfoGridItemBox{}
div.InfoGridItemTitleBox{} /* Product Title */
div.InfoGridItemTitle{}
div.InfoGridItemTitleText{}
div.InfoGridItemTitleText a{}
div.InfoGridItemImage{} /* Product Image */
div.InfoGridItemImage a{}
div.InfoGridItemStock{} /* Product Stock */
div.InfoGridItemPrice{} /* Product Price */
div.InfoGridItemPrice span.PF{} /* class for the text 'from' */
div.InfoGridItemMoreInfo{} /* Product Detail page link */
div.InfoGridItemMoreInfo a{}
/* Store Product List */
div.ElementStoreProductList{}
div.ListGridItemHeader{} /* Grid Header */
div.ListGridItemResult{}
div.ListGridItemSortBy{}
div.ListGridItemSortBy select{}
div.ListGridItemList{} /* Grid Item List */
div.ListGridItem{}
div.ListGridItemAlt{}
div.ListGridItemImage{}
div.ListGridItemImage a{}
div.ListGridItemImage a img{}
div.ListGridItemProductDetails{}
div.ListGriditemProductTitle{}
div.ListGriditemProductTitle a{}
div.ListGridItemProductSummary{}
div.ListGridItemStock{}
div.ListGridItemPrice{}
div.ListGridItemPrice span.PF{} /* class for the text 'from' */
div.ListGridItemMoreInfo{}
div.ListGridItemMoreInfo a{}
div.ListGridItemFooter{} /* Grid Footer */
div.ListGridItemFooterItems{}
div.ListGridItemFooterItems span.CurrentPage{}
div.ListGridItemFooterItems a{}
/* Store Prodcut Details */
div.ElementStoreProductDetails{}
div.DetailBox{}
div.DetailItem{} /* Product Detail*/
div.DetailItemBox{}
div.DetailManufacturerLogo{}
div.DetailItemTitle{}
div.DetailItemTitle h2{}
div.DetailItemSummary{}
div.DetailImageBox{}
div.DetailItemImage{}
div.DetailItemImage a{}
div.DetailItemImage a img{}
div.DetailItemBuyNow{}
div.DetailItemBuyNow input[type=submit]{}
div.DetailOptions{} /* Product Options */
div.DetailOptionRadioGroup{}
div.DetailOptionRadioGroup input[type=radio]{}
div.DetailOption{}
div.DetailOption div.Thumbnail{}
div.DetailOption div.Thumbnail a{}
div.DetailOption div.Thumbnail a img{}
div.DetailOption div.Name{}
div.DetailOption div.OptionDescription{}
div.DetailOption div.Stock{}
div.DetailOption div.RRP{}
div.DetailOption div.Matrix{}
div.DetailOption div.Price{}
div.DetailOption div.Measurement{}
div.DetailOption dl{} /* used for both Matrix and Measurement */
div.DetailOption dt{}
div.DetailOption dt label{}
div.DetailOption dd{}
div.DetailOption dd select{}
div.DetailOption dd input{}
div.DetailTabHeader /* Extra Informations tabs */
div.DetailTabHeader ul{}
div.DetailTabHeader li{}
div.DetailTabHeader li.CurrentTab{} /* active Tab */
div.DetailTabHeader li a{}
div.StoreProductDescription{} /* Description Tab */
div.DescriptionContent{}
div.StoreProductImages{} /* More Images Tab */
div.GalleryImageBox{}
div.GalleryImage{}
div.GalleryImage a{}
div.GalleryImage a img{}
div.StoreProductDetails{} /*Product Details Tab */
div.DetailsContent{}
div.DetailsContent div.Item{}
div.DetailsContent div.ItemName{}
div.DetailsContent div.ItemValue{}
div.DetailsContent fieldset{}
div.DetailsContent legend{}
div.StoreProductSpecs{} /*Specifications Tab */
div.SpecsContent{}
div.SpecsContent div.Item{}
div.SpecsContent div.ItemName{}
div.SpecsContent div.ItemValue{}
album.css
This is not yet available
Element HTML Layout
In the HTML code below shows the majority of Elements (items) that users can pick from in the system. This is a comprehensive list of all their structures.
/**********************************************************************
BUILDING A SITEFRONT THEME - Element HTML Structure
***********************************************************************
This contains the overall HTML structure for each of the SiteFront
element types.
**********************************************************************/
/* TextHTML Element */
<div class="Element">
<div class="ElementTextHTML"> ... </div>
</div>
/* Image Element */
<div class="Element">
<div class="ElementImage">
<div class="ElementTitle"> title goes here </div>
<img />
</div>
</div>
/* Video Element */
<div class="Element">
<div class="ElementVideo">
<div class="ElementTitle"> title goes here </div>
<img />
</div>
</div>
/* Form Element */
<div class="Element">
<div class="ElementForm">
<div class="ElementTitle"> title goes here </div>
<div class="Form">
<div class="FormResult Failure"></div>
<form>
<dl>
<dt><label/></dt>
<dd><input /><span class="FormValidation"></span><dd>
<dt><label/></dt>
<dd><input /><span class="FormValidation"></span><dd>
<!-- the rest of the form fields -->
</dl>
<div class="FormCaptcha"></div>
<div class="FormFooter"></div>
</form>
</div>
</div>
</div>
/* Site Navigation Element */
<div class="Element">
<div class="NavigationElement">
<ul class="root">
<li class="selected"><a><span>Link 1</span></a></li>
<li><a><span>Link 2</span></a></li>
<li><a><span>Link 3</span></a>
<ul>
<li><a><span>Link 3</span></li>
<li><a><span>Link 3</span></li>
</ul>
</li>
</ul>
</div>
</div>
/* Breadcrumb Trail Element */
<div class="Element">
<div class="ElementBreadcrumb">
<a>link 1</a>
<span class="seperator"> >> </span>
<a>link 2</a>
<span class="seperator"> >> </span>
<a>link 3</a>
</div>
</div>
/* Customer Login Form Element */
<div class="Element">
<div class="ElementCustomerLoginForm">
<div class="Form">
<div class="FormResult Failure"></div>
<form>
<dl>
<dt><label>Email Address</label></dt>
<dd><input /><span class="FormValidation"></span><dd>
<dt><label>Password</label></dt>
<dd><input /><span class="FormValidation"></span><dd>
</dl>
<div class="FormFooter">
<input type="submit" />
</div>
</form>
</div>
</div>
</div>
/* Customer Login Status Element */
<div class="Element">
<div class="ElementCustomerLoginStatus">
status goes here...
</div>
</div>
/* Forgot Password Form Element */
<div class="Element">
<div class="ElementCustomerForgetPasswordForm">
<div class="Form">
<div class="FormResult Failure"></div>
<form>
<dl>
<dt><label>Email Address</label></dt>
<dd><input /><span class="FormValidation"></span><dd>
</dl>
<div class="FormFooter">
<input type="submit" />
</div>
</form>
</div>
</div>
</div>
/* Page Title */
<h1>Page Title goes here...</h1>
/********************************************* Blog *********************************************/
/* Blog Summary Feed Element */
<div class="Element">
<div class="ElementBlogSummaryFeed">
<div class="ElementTitle"> title goes here</div>
<div class="Date">03 Nov 2010</div>
<div class="Summary"><a>blog summary 1</a></div>
<div class="Date">02 Nov 2010</div>
<div class="Summary"><a>blog summary 2</a></div>
<div class="Date">01 Nov 2010</div>
<div class="Summary"><a>blog summary 3</a></div>
<!-- rest of the blog posts here -->
</div>
</div>
/* On This Page */
<div class="Element">
<div class="ElementTextHTML">
<div class="ElementTitle">On This Page</div>
<div class="TextList">
<div class="TextListItem"><a>Blog Post 1</a></div>
<div class="TextListItem"><a>Blog Post 2</a></div>
<div class="TextListItem"><a>Blog Post 3</a></div>
<!-- rest of the blog posts here -->
</div>
</div>
</div>
/* Category Cloud */
<div class="Element">
<div class="ElementTextHTML">
<div class="ElementTitle">Category Cloud</div>
<div class="TextList">
<a class="TagLarge">Category 1 (10)</a>
<a class="TagMediumLarge">Category 2 (8)</a>
<a class="TagMedium">Category 3 (6)</a>
<a class="TagMediumSmall">Category 4 (4)</a>
<a class="TagSmall">Category 5 (3)</a>
<!-- rest of the blog categories here -->
</div>
</div>
</div>
/* Blog Archive */
<div class="Element">
<div class="ElementTextHTML">
<div class="ElementTitle">Blog Archive</div>
<div class="TextList">
<div class="TextListItem"><a>November 2010 (3)</a></div>
<div class="TextListItem"><a>October 2010 (10)</a></div>
<div class="TextListItem"><a>September 2010 (14)</a></div>
<!-- rest of the blog posts here -->
</div>
</div>
</div>
/* About This Blog */
<div class="Element">
<div class="ElementTextHTML">
<div class="ElementTitle">About This Blog</div>
<h2>Blog Name goes here...</h2>
<p>Blog Description goes here....</p>
<div class="RSSFeed">
<a><img alt="RSS">" RSS Feed"</a>
</div>
</div>
</div>
/* Blog Post */
<div class="BlogPostWrapper">
<div class="BlogDate">01 Nov 2010</div>
<div class="BlogDetails">
<div class="BlogTitle"><a>Blog Post title goes here...</a></div>
<div class="BlogBody"><p>Blog Post body goes here...</p></div>
<div class="BlogCategoryList">
<a>Category 1</a>" | "
<a>Category 2</a>" | "
<a>Category 3</a>
</div>
<div class="BlogDetailsBar">05 August 2010 12:05 GMT+01:00 Posted By: Author Tom</div>
<div class="BlogSocialLinkList"><a>View Article</a></div>
</div>
</div>
/********************************************* Store *********************************************/
/* Store Information Element */
<div class="Element">
<div class="ElementTextHTML">
<div class="ElementTitle">About This Store</div>
<h2>Store Name goes here...</h2>
<p>Store Description goes here....</p>
</div>
</div>
/* Store Category Navigation List Element */
<div class="Element">
<div class="ElementTextHTML">
<div class="ElementTitle">Product Categories</div>
<ul class="TextList">
<li class="TextListItem"><a>Category 1</a></div>
<li class="TextListItem"><a>Category 2</a></div>
<li class="TextListItem"><a>Category 3</a></div>
<!-- rest of the categories here -->
</div>
</div>
</div>
/* Store Shopping Cart Summary Element (empty cart) */
<div class="Element">
<div class="ElementStoreCartSummary">Your basket is empty</div>
</div>
/* Store Shopping Cart Summary Element (with items) */
<div class="Element">
<div class="ElementStoreCartSummary">
<a>2 Items | Total: £123.45</a>
</div>
</div>
/* Store Search Box Element */
<div class="Element">
<div class="ElementStoreSearch">
<div class="Form">
<div class="FormResult Failure"></div>
<form>
<dl>
<dd><input /><span class="FormValidation"></span><dd>
</dl>
<div class="FormFooter">
<input type="submit" />
</div>
</form>
</div>
</div>
</div>
/* Store Featured Product List */
<div class="Element">
<div class="ElementStoreFeaturedProductList">
<div class="InfoGrid">
<div class="InfoGridItem">
<div class="InfoGridItemBox">
<div class="InfoGridItemTitleBox">
<div class="InfoGridItemTitle>
<div class="InfoGridItemTitleText"><a>Product Title goes here...</a></div>
</div>
</div>
<div class="InfoGridItemImage"><a><img /></a></div>
<div class="InfoGridItemStock">500 in stock</div>
<div class="InfoGridItemPrice"><span class="PF">from</span>£100.00</div>
<div class="InfoGridItemMoreInfo"><a>More Info</a></div>
</div>
</div>
<! -- the rest of the items -->
</div>
</div>
</div>
/* Store Product List */
<div class="Element">
<div class="ElementStoreProductList">
<div class="ListGridItemHeader">
<div class="ListGridItemResult">Showing 1 to 10 of 82</div>
<div class="ListGridItemSortBy">Sort By:
<select />
</div>
</div>
<div class="ListGridItemList">
<div class="ListGridItem"> /* alternative row class = "ListGridItemAlt" */
<div class="ListGridItemImage"><a><img /></a></div>
<div class="ListGridItemProductDetails">
<div class="ListGridItemProductTitle"><a>Product Title goes here...</a></div>
<div class="ListGridItemProductSummary">Product Summary goes here...</div>
</div>
<div class="ListGridItemStock">713 in stock</div>
<div class="ListGridItemPrice"><span class="PF">from</span>£100.00</div>
<div class="ListGridItemMoreInfo"><a>More Info</a></div>
</div>
</div>
<div class="ListGridItemFooter">
<div class="ListGridItemFooterItems">
<span class="CurrentPage">1</span>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<!-- rest of the pages -->
<a>Next >></a>
</div>
</div>
</div>
</div>
/* Store Product Details */
<div class="Element">
<div class="ElementStoreProductDetails">
<div class="DetailBox">
<div class="DetailItem">
<div class="DetailItemBox">
<div class="DetailManufacturerLogo"><img /><!-- show logo name here if no image--></div>
<div class="DetailItemTitle"><h2>Product Title here</h2></div>
<div class="DetailItemSummary">Product Summary goes here</div>
<div class="DetailImageBox">
<div class="DetialImageBox"><a><img /></a></div>
</div>
<form>
<div class="DetailOptions">
<div class="DetailOptionRadioGroup">
<input type="radio" />
<div class="DetialOption">
<div class="Thumbnail"><a><img /></a></div>
<div class="Name">Product Option name goes here...</div>
<div class="stock">500 in stock</div>
<div class="Matrix">
<dl>
<dt><label /></dt>
<dd><select /></dd>
<!-- rest of the matrix items goes here -->
</dl>
</div>
<div class="Price">£100.00</div>
<div class="Measurement">
<dl>
<dt><label /></dt>
<dd><input /></dd>
<!-- rest of the matrix items goes here -->
</dl>
</div>
</div>
</div>
<!-- rest of the options goes here -->
</div>
<div class="DetailItemBuyNow"><input type="submit" /></div>
</form>
</div>
</div>
<div class="DetailTabHeader">
<ul>
<li class="CurrentTab">Description</li>
<li><a>More Images</a></li>
<li><a>Product Details</a></li>
<li><a>Specifications</a></li>
</ul>
</div>
<div class="StoreProductDescription"><div class="DescriptionContent">Product Descriptions goes here...</div></div>
<div class="StoreProductImages">
<div class="GalleryImageBox">
<div class="GalleryImage"><a><img /></a></div>
<!-- rest of the images goes here -->
</div>
</div>
<div class="StoreProductDetails">
<div class="DetailsContent">
<div class="Item">
<div class="ItemName">Product Name</div>
<div class="ItemValue">Product Name goes here...</div>
</div>
<fieldset>
<legend>Product Option name goes here</legend>
<div class="Item">
<div class="ItemName">Property Name</div>
<div class="ItemValue">Property Value goes here...</div>
<!-- rest of the properties -->
</div>
</fieldset>
<!-- rest of the product options goes here -->
</div>
</div>
<div class="StoreProductSpecs">
<div class="SpecsContent">
<div class="Item">
<div class="ItemName">Specification Name</div>
<div class="ItemValue">Specification Value goes here...</div>
</div>
</div>
</div>
</div>
</div>
</div>
Useful Contact Information
Sales & Support
0845 862 8800
mon-fri 9am-5pm
Registered in England and Wales, Company No. 06496242 - VAT Number GB 935 0377 24 - Contact Sales On 0845 862 8800
