Jump to content

Welcome to DevFuse Forums

Sign In  Log in with Facebook

Create Account
Welcome to DevFuse Forums, like most online communities you must register to view or post in our community, but don't worry this is a simple free process that requires minimal information for you to signup. Be apart of DevFuse Forums by signing in or creating an account.
  • Start new topics and reply to others
  • Subscribe to topics and forums to get email updates
  • Get your own profile page and make new friends
  • Send personal messages to other members.
Guest Message by DevFuse

Tutorial info Visit support topic

  • Added on: Mar 13 2011 07:18 AM
  • Views: 3981

Skin Import Guide

A highly visual, step by step guide to assist new administrators with their first skin import.

Posted by AndyF on Mar 13 2011 07:18 AM
A reasonably common question from new administrators is "How do I import a skin?" so here is a detailed step by step guide to assist with that. :) , I have based this on the CleanCut skin, available from your Client Centre.

1. Having downloaded the .zip / .rar to your desktop, extract it:

Posted Image

2. Having extracted the .zip, lets take a look.

Its the skin_files folder we are interested in, but sometimes the actual skin files are just inside the zip. Other items you may find inside the zip are .psd files for creating your own logos and additional images. If there is a readme file included, examine that too as the skin author may have special instructions for the skin import.

Posted Image

3. Looking in the skin_files folder, we can see the xml's. Sometimes there are more than two as a replacements file is quite common too. Do not attempt to extract these xml's, leave them as they are.

Posted Image

4. Login to your boards admin control panel. Click the Look / Feel tab along the top. This will open the Skin Manager. Now click the 'Import New Skin Set' button:

Posted Image

5. There are a few sections on this page. Always start with the top one the 'Import Skin Set' section. Using the browse button near the 'Upload XML(Archive) Skin Set' browse for and upload the skin xml file, in this example you are looking for cleancut.xml.gz

Once you have it selected, ensure the rest of those options match what is shown, especially 'Use Image Set' should be empty and then click 'Import Skin Set'

Posted Image

6. All being well, you will be shown a message similar to this:

Posted Image

7. Now we have to return and do the images. This is usually the cause of most confusion. Scroll down a bit to the 'Import Image Set' section. Browse for the skin file, in our example this is images-clean.xml.gz. Leave the next two box's empty as per the screenshot.

Important: With the 'Apply To Skin Set' it is vital that you choose the skin you just imported here before clicking to import it. You will be able to easily identify the skin from its name here.

Once you have selected the appropriate skin, click 'Import Image Set'

Posted Image

8. You should see a message similar to this, indicating the image import was successful:

Posted Image

9. Click the Look / Feel tab again now or click 'Manage Skin Sets & Template's on the left hand side to return to the Skin Manager page. You will see your newly imported skin listed. Click the grey button next to it and choose 'Edit Settings':

Posted Image

10. There are a lot of options here, and I shall only explain the essential ones as some are beyond the scope of this article. The most important ones are which groups will see the skin and if you wish to hide it from the skin chooser or not. You can see these in the 'Set Permissions' section:

Posted Image

11. For this example, let us set the skin to show in the skin chooser and be available to all groups. Check the 'Select All current and future groups' and the 'Make this the default skin' checkbox's and change the 'Hide this skin from the dropdown list?' to no. You should at this stage have something like this:


12. Scroll to the end of the page and click to save the changes. You will see a message similar to this, indicating the skin was recached:


13. Congratulations, that's it. :) , view your board to see your new skin:


Extra notes: On the Skin Manager page, you can quickly click the blue HTML text to set a particular skin as default. You can also click the small binocular / globe icon to hide / unhide it from the skin chooser too.

Powered by Tutorials 1.5.1 © 2017, by Michael McCune