The CMS system has a piece that allows you to upload a skin file to the CMS. Doing so will make this skin available to all sites, and can be used to test the skin with the CMS content editor.

Before you upload a skin, there are a few pre-requisites the skin must follow

Prerequisites before uploading

1) Skin Name

The name of the skin will be provided to you along with the skin assets. This will allow us to keep track as we have our own naming conventions to follow. For demonstration purposes, we are using a skin name of Responsive 1 in this article.

2) Directory Structure

The skin must have the following file structure

• css - contains any css files required by the skin. This should contain the structure of the skin and default colour styling
• html - contains three html files
  • index.html
  • inside-page.html
  • widget-page.html
• images - Any images required by the skin itself. No content images as these are driven by the CMS content
• themes - Contains css required to output a skin in a specific theme. Every skin has a minimum of 1 theme
  • css - Contains CSS specific to the colour theme. This should only contain colour definitions
  • previews - A preview image 1100px (Width) X 1200px (Height)
  • thumbs - A preview thumbnail 280px X 280px
• skin.json - A json file that defines the skin. This is used by the uploader to know where to put everything

The end directory should look like the following

3) Skin.json File

This is the file that is used to define the skin. The format is as follows

Name: The name of the skin file
Publicly Available: Leave as true
Packs: Array of packs
Name: The name of the pack. Usually Skin name then Pack 1, 2, 3 and so on
Publicly Available: Leave as true
Themes: Array defining themes for the pack
Id: The id of the theme, no spaces
Name: The name of the theme as it will appear to an end user
Css File: The css file used for the theme
Thumbnail: The thumbnail image for the theme. Just a screenshot 280px X 280px
Preview: The preview image for the theme. Just a screenshot 1100px (Width) X 1200px (Height)

The above JSON is a good starting point for all themes. If you match the directory and JSON file you should be good to go.

4) Zipping the theme

In order to upload the skin into the system it has to be put into a zip file. This resulting zip file should only contain the files and folders shown above. Please refer to the following screenshot

It is very important that when zipping the file you make sure that you are highlighting the directories mentioned above and adding them to an archive. Do not zip an outer folder as it will causing the resulting zip file to have the incorrect structure.

When naming the zip file name it with the skin name ie Responsive-1.zip

That's it!

Uploading to CMS System

Now that you have the zipped up skin ready to go, it's time to upload it to the system and test the results with content from the CMS.

To do this, perform the following steps

1. Login to the Deployment Manager on the staging server (http://admin.twintiers.ca/DeploymentManager/)
2. In the menu at the top of the screen, click on Upload Skin
3. In the next screen it will ask you for the zip file. Click on Choose File
4. Select the zip file you just created
5. Click on Upload skin
6. This will take a few minutes depending on the size of the zip file
7. Once completed you will get a message back indicating the status

Once the skin is uploaded, you will be able to change your site to use this skin. To do this, perform the following steps

1. Still in deployment manager, click on the menu item for Sites
2. Select the site you are using for testing purposes and click on the Edit Deployment button
3. This will display a form. Find the select box for Skin
4. In the dropdown, choose the skin you just uploaded. This will match the name you provided in the JSON file above
5. You should see the preview thumb you also provided in the JSON file
6. The theme should default to the first theme. Leave this as-is
7. Leave all other fields as-is and click save
8. Select your site in the site list again
9. Click on Update Site

Now your site will be using this skin. 

Changing a previously uploaded skin

If you upload a skin and notice some things are not working correctly, you will then make the necessary changes to your HTML or CSS files and then repeat this process. Zip, and re-upload. Generally a developer will get a basic skin going, upload as is and test. Then make the necessary tweaks, upload again and test. This process continues until the skin is fully functional in the system. 

Note:  If you change the skin and re-upload, it will automatically pick up the changes. You will not have to edit your site to the new skin because it is already set. You may have to clear your cache to pick up any new CSS.

That's all there is to uploading a skin.