Login
SmartEshop

Create a customised template

Last edited: 2009-09-26

Background to design a customised template

The customised template feature is intended for advanced user familiar with HTML and CSS scripting language only. Non-programmer may find it hard to get the template layout right.

The customised template comes in two parts, the HTML part and the CSS file. The HTML code should be entered in the text area provided in the "Customised Storefront Layout" page. There are a number of components that are required in the HTML code to make it works. These include the CSS file location, and the special tags for automatic insertion of site content and information. The CSS file location is provided in the "Customised Storefront Layout" page. Use the following code in the header section of your HTML code:

<link href="your_css_file_location.css" rel="stylesheet" type="text/css" />

The following are special tags that required for automatic insert of information. Do not copy and paste the source code from your browser into the HTML coding, the template will not work that way. Click here to see an example of HTML code using the special tags.

{page_title} - Automatic insertion of page title on the browser. Optional.
{meta_description}
- Automatic insertion of meta description in the header. Meta tag is important for search engine ranking. Optional.
{meta_keywords}
- Automatic insertion of meta keywords in the header. Meta tag is important for search engine ranking. Optional.
{page_script}
- Automatic insertion of script you have entered in the "Look & Feel" interface, Additional header script section. Required if you have scripts.
{page_header} - Automatic insertion of page heading you have entered in the "Look & Feel" interface. You can design your header in the HTML code directly.
{top_navigator} - Automatic insertion of navigation link on the top of the page. Optional.
{menu_left} - Automatic insertion of menus you have defined in the "Look & Feel" interface. You can design your menus in the HTML code directly.
{menu_right} - Automatic insertion of menus you have defined in the "Look & Feel" interface. You can design your menus in the HTML code directly.
{page_content} - Automatic insertion of the page content. Required.
{page_footer}
- Automatic insertion of the page footer. You can design your menus in the HTML code directly.

CSS is stand for Cascading Styles Sheets. The CSS file should be uploaded via the "Images & Files" interface. There are a number of CSS elements used in the store, which you can change the way the information is being displayed in your store. Click here for an overview of CSS used in your store. Some websites, such as w3schools.com, Sitepoint, and HTML Dog, provide useful tutorials on how to design with CSS. You may want to download the CSS cheat sheet for your reference.

Changing background of one of the standard template

To add a background image to one of the standard template provided, you do not have to use a customised template. Instead, enter the following script in the "Additional header script" section in the "Look & Feel" interface. Make sure you have uploaded your background image via the "Images & Files" interface.

<style type="text/css"><!--
body { background-image:url('background_image.gif'); }
--> </style>

Alternatively, you can use the following script to change the background colour (example showing a black background).

<style type="text/css"><!--
body { background:#000000; }
--> </style>

Changing the font/colour of one of the standard template

If you want to change the colour or the font (size/colour/type) of one of the standard template provided, click the HTML link provided underneath the template image, and copy the HTML code. Paste the copied code to the text area provided in the "Customised Storefront Layout" page, and change the CSS file location to the correct location provided as shown:

<!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" xml:lang="en" lang="en">
<head>
<title>{page_title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="{meta_description}" />
<meta name="keywords" content="{meta_keywords}" />
<link href="folder/shop_id/style.css" rel="stylesheet" type="text/css" />
{page_script}
</head>

<body>
...
...

Then, return to the template page and click the CSS link. Copy the CSS script and paste it to a text editor, such as Notepad, and save it as "style.css". To modify the background colour, replace the colour code of "background" with your preferred one. The colour code should start with a hash #, follow by six numbers. The first two are for red, the next two are for green and the last two are for blue. You can find the colour code here. Similarly, to change the font colour enter your preferred colour code to the "color" element. To change the font size, enter the size in pixels. Examples below show you how to change the font color, type and size.

The following CSS elements define the font properties within a paragraph (p), and the background of menu (#menu):

p { color: #000000; font: normal 12px Arial; }
#menu { color:#FFFFFF; background:#666666; }

The following CSS elements modify the font type above from Arial to Times, font size from 12px to 10px and make it bold. The colour is also changed to red. As for the menu, the font color is now changed to gold, on a black background.

p { color: #FF0000; font: bold 10px Times; }
#menu { color:#FFCC00; background:#000000; }

You may also use the following CSS elements to achieve the same

p { color: #FF0000; font-weight: bold; font-size: 10px; font-type: Times; }
#menu { color:#FFCC00; background:#000000; }

Once you have done with your modification, save the CSS file and upload it via the "Images & Files" interface.

Designing a completely new template

This is intended for advanced users familiar with HTML and CSS only. We recommend you to find a web designer to assist you with a template. If you are a web designer want to know more about our system, or to design a template for our clients, please contact us directly. We will create a dedicated account for you to test your template.


store template, customised storefront, CSS template

Related articles:

  1. Quick-start guide
  2. Email form construction for web site
  3. Point a domain name to your store
  4. Create a customised template
  5. Modify default content of sales transaction
  6. Add custom checkout form fields
  7. Setting up Cookie Control on your web store
  8. Supported Payment Gateways