12.4. Skin components
A typical skin folder will contain a selection of files and
folders. The exact number of files and folders can vary, but the default
skin in Kartris will look something like this:
The Template.master is the key template file;
this contains the HTML structure of the site layout, and contains links
to the various stylesheet and image files. Every skin must have a
Template.master
page.
HomePage.master is an optional file. If present in a skin, the home page of the site (Default.aspx) will use this template instead of the main Template.master file. It is quite common for sites to have a different layout on the home page to that used throughout the rest of the site, hence this feature. It is however possible to use different templates for various other parts of the site too. More details later in this section.
The .css files are cascading-stylesheet files. These control the styling of the various page elements that make up a Kartris page, such as fonts, colours, the position of the various layout columns, the width of the page and so on. CSS is a web standard way of formatting web pages, it isn't proprietary to Kartris. There is a vast amount of information on the web about using CSS. In our skins, we tend to divide the CSS up into several files:
HomePage.master is an optional file. If present in a skin, the home page of the site (Default.aspx) will use this template instead of the main Template.master file. It is quite common for sites to have a different layout on the home page to that used throughout the rest of the site, hence this feature. It is however possible to use different templates for various other parts of the site too. More details later in this section.
The .css files are cascading-stylesheet files. These control the styling of the various page elements that make up a Kartris page, such as fonts, colours, the position of the various layout columns, the width of the page and so on. CSS is a web standard way of formatting web pages, it isn't proprietary to Kartris. There is a vast amount of information on the web about using CSS. In our skins, we tend to divide the CSS up into several files:
- template.css
- controls the position of various page elements within the
Template.master
page
- general.css
- sets the appearance of fonts, form controls and various other elements
used throughout
Kartris
- sections.css
- controls the appearance and layout of various elements used in
particular parts of Kartris, such as the layout of products and the
checkout
- menus.css
- controls the appearance of menu systems such as the dropdown
navigation menu and the categories
menu.
The Images
folder holds images used within the CSS (background images) as
well as the site logo and any other images embedded within your
.master templates.
12.4.1. The 'Templates' folder
Some payment systems allow you to serve back HTML in response to
a callback. For some, the HTML served back should be nothing more than
a simple message, which they will insert into the confirmation page
they show to users. For others, the callback page should serve back
the full HTML of a page that they will relay to
customers.
In order to handle this, HTML templates can be added here. Kartris will look for these automatically in the live skin, based on the following naming criteria:
Callback_[name].html
Where [name] is the name of the payment system's folder in the /Plugins folder of Kartris. Not all payment systems can return HTML from the callback to the customer, so this feature only works where the payment system supports it.
A simple callback template will look as follows:
In order to handle this, HTML templates can be added here. Kartris will look for these automatically in the live skin, based on the following naming criteria:
Callback_[name].html
Where [name] is the name of the payment system's folder in the /Plugins folder of Kartris. Not all payment systems can return HTML from the callback to the customer, so this feature only works where the payment system supports it.
A simple callback template will look as follows:
<html>
<head>
<title>Order Confirmation</title>
</head>
<body>
[orderdetails]
</body>
</html>The [orderdetails] tag is where the text
summary of the order contents will appear. If no template is present
in the skin, the order details will appear on their own, without any
skinning.