i
This is our new documentation center, which is currently a work in progress to serve you better. Can't find help that you need? Search our old community site.

Create your website skin (theme) file

The following instructions assumes that you know basic HTML, CSS, Javascript. Alternatively, you can use the Skin Builder to create your skin (theme) without coding.
  • The skin or theme sets the look of your website. Typically, a skin contains all the common elements of the website and is applied to all the pages but if you want a unique skin for your homepage, you have that option too.

Terminologies

  • The template is the part of the page that remains consistent from page to page. This is the main page file (template.ascx) found in the skins/Skin_(SkinID) folder.
  • The stylesheet refers to the CSS document that contains the style rules for your website. The stylesheet controls fonts, colors, layouts and more.
  • The topic is the block of HTML content that can be it's own page or a section that can be placed in different areas on your website.
  • The token refers to the small bits of code that renders out HTML content.
  • The XMLPackage renders out dynamic blocks of code. They usually render out HTML but they can be used to render other outputs. XML Packages are responsible for the product and category layouts as well as other data-driven content from the Connected Business eCommerce module.

Skin Structure

When creating skins, you will be working most of the time with the files within the skins folder. It would help to have a shortcut of this folder on your file browser.

Skin structure

Template File Structure

In reality, the template file is just an HTML file that has a few special lines added to its header with an .ascx extension. Open the template.ascx and the homepagetemplate.ascx file of the default skin to understand its structure before creating the skin file or converting an HTML design into a template file.

Header lines
Body lines

Create a new skin

New skins are usually created from a copy of the default skin, Skin_1, that comes with the installation of the Connected Business eCommerce component. When creating a new skin, it is a good idea to have a backup of the default skin so that you can refer to it.

Create a new skin
Set the website to use the new skin

Modifying the homepage template

Ideally, the homepage template should contain the headline (using  a header image or carousel) that briefly explains what the web store is about, primary calls to action e.g. Sign Up, Buy Now etc, and success stories such as customer testimonials, milestones, awards and notifications. We recommend customizing the template for the homepage (homepagetemplate.ascx) then the template for the rest of the pages (template.ascx).

Open the homepage template file
Add a company logo
Customize the menu
Customize the carousel area (homepage template)
Customize the main content area
Customize the footer

Modifying the template

The template file should contain elements that you want to show on the rest of pages e.g. the top navigation, the side menu and footer. If you already modified these elements on the homepage template, you can copy them over to the template file and remove the homepage-only elements. We recommend modifying the homepage template (homepagetemplate.ascx) first then the template for the rest of the pages (template.ascx)

Open the template file
Add a company logo
Customize the menu
Customize the main content area
Customize the footer

Modify the skin layout

For the layout modification, you will be working heavily with the skin CSS files. If you are familiar with jQuery UI and want to implement themes or UI elements, you can reference additional CSS and Javascript to use on the template.

Modify the skin layout

Set a skin for different areas of the site

Apart from having a skin for your homepage and a skin for all other pages, you can set a different skin for entity pages (category, department or manufacturer) or non-entity pages like the bestsellers.aspx, account.aspx etc giving you more options to add sections and unique elements to a page. This requires a separate .ascx template file for each entity or page. A modified skin template is only available to the skin where it is defined. e.g. if the definition of the new template is on Skin_1, template switching has no effect if Skin_2 is set as the default skin.

Enable Template Switching
Create a new template file
Set template to use for the entity
Set the template to use on a page

Leave a Reply

Your email address will not be published. Required fields are marked *

Looking for help?

Our support staff is here to help you. SUBMIT A TICKET

Have a sales question?

Our sales staff is here to help you. CONTACT SALES

Need more help?

Our customer service is here to help you. CALL US