Create your own skin

Although MX Kollection3 ships with a variety of skins, with versions for both link and button-style links, to achieve complete integration with the particular look of your site, a custom skin will have to be created.

Before starting to create a new skin, here are some the things you should know :

• All skins are stored in the includes > skins folder

• Each skin is a folder, containing the following elements:
  · The images folder - this is where all images used in the CSS must be placed
  · A preview.gif picture - this is the picture that is displayed in InterAKT Control Panel > CSS Skins. This should be representative for the skin, to ease selection.
  · The nav.css file - this file stores the CSS settings for the navigation pack elements
  · The nxt.css file - this stores CSS settings for the NeXTensio List and Form.
  · The tng.css file - this stores CSS settings regarding transaction engine elements that can use skins
  · The wdg.css file - this stores CSS settings for the widgets.
  
  
   

• Besides the files in this folder, in the skins root, you can find the following files:
  · common.css - this file stores common CSS settings for all skins
  · style.js - this is a JavaScript library, controlling the effects and transformations. Edit this file only if you have solid JavaScript knowledge.
  · mxkollection3.css - this stores only references to the current skin. When a new skin is selected in the Control Panel, references inside this file are changed, and it has to be uploaded to the remote server.

• Creating a skin requires CSS manipulation, therefore, basic knowledge about CSS concepts is recommended. To start learning about CSS, read this W3C CSS Primer.

To create a new skin, follow the next steps:

1. Copy an existing skin's folder into the skins directory. Rename the new folder to the skin's desired name.

2. Replace the preview.gif image with the new skin's preview. You must create this image using a photo editing software of your choice. The maximum size for the image is 100x200 [height/width]

3. You also need to replace all of the files in the images folder with the files you have created for the new one. If you use the same file names for the same elements, you will not have to edit the CSS file in order to replace the names. Otherwise, open each CSS file in the folder to search and replace the image file's names.

4. Edit the CSS files and adjust the properties for  each desired CSS selector. Save each edited file.

5. Open a page of the site you need customized. Go to InterAKT Control Panel -> CSS Skins and select your now skin in the drop-down menu. Click OK to apply the skin.

6. Save the page and upload the includes/skins folder to the remote server. Now browse the site, and the new skin should be in effect.

Note: Due to different implementation of the CSS Standard on the various browsers available, some of the CSS options might only be correctly rendered on some of the browsers, while on some the result can be null or even damaging to the design. Therefore, when creating your own custom skin, and altering the CSS file to suit your particular needs, be careful of the used options, and the different rendering of the CSS on different browsers.