How it works

How the custom layout skin works

The skin system provides a window or frame to show your content in. Distinguishable parts are the header (with logo, links, tabs), left column (optional, menu and other blocks), right column (optional, blocks like shoppingcart) and the footer (with links, copyright notice).
As with every layout in the myShop system, it is possible too choose from default layouts, or make your own using custom layouts. How these custom layouts work will be explained here.

One skin layout consists of three files, these are:

• HTML Skin
• Skin Stylesheet (CSS)
• Theme Stylesheet (CSS)

None of these templates are mandatory. Each template that is missing will automatically be replaced by the (chosen) default layout, that way you can, for example, use the default HMTL and Skin Stylesheet with a custom Theme Stylesheet template.

HTML Skin

This HTML template provides the building block of the skin, it contains all the information the skin should have like the menu, logo’s / banners, header, footer and so on. This template only defines what content there is and in what order. Positioning and makeup should be left to the two following css templates.

Skin Style sheet

This CSS template contains all the positioning information the page needs to be made up properly. There are predefined classes which are used in all generated content (for when you use myshop-extensions in the skin template or no skin template at all).

Theme Style sheet

The Theme CSS template contains the markup of the page like colours, fonts and possibly even pictures (background pictures defined in CSS).

Using these three templates makes the basic building blocks of the skin very easy to maintain, because each part of the data is separate. However, it is possible to create for example only one HTML Skin template with all markup and positioning in this file, as inline css. In that case the inline css will still be interpreted correctly.When using the default class names and identities as provided in the example templates there will be no overlaps with the content of the different pages (like productlist, moreinfo or orderproces pages). If you whish to customize these content pages please use the templates that correspond to those particular screens.Also when using other templates in conjunction with the skin custom layout, be aware of the fact that from the content pages’s templates only the contents of the body tag will be used, the head tag is omitted. Therefore all css style and scripting should be included in the body tag, or if preferred, in the skin file(s).

To start using the skin system and learn about the possible myshop-extensions, see this link too.