English Design handbook

How to derive a new skin?

Most often, it is more efficient to not start from scratch. This is particularly true with skins and visual stuff. The best bet, for your next server, is to derive a skin of your own from an existing one.

[title]Select an existing skin[/title] The first thing to do is to visualise skins installed at your server. You don't have to change the skin through configuration panels again and again.

Instead, go to the Control Panel and select the skins module. Then, from the index page for skins, select the 'Test page' command below page title.

On the test page, use top controls to change the skin under test.

Select the skin that is closer to your expectation from a layout perspective. Do not take colors into account, these are usually very easy to change.

[title]Duplicate the basic skin[/title] For example, if you have selected the skin boxesandarrows, create a new brother directory my_own_skin. Copy all files from skins/boxesandarrows to skins/my_own_skin.

Go back to the test page, reload it, and select the skin my_own_skin to ensure everything is going fine.

[title]Change the skin to fit your needs[/title] At this step you should trigger a text editor and play with PHP and CSS files under the skins/my_own_skin directory.

Modify colors, layouts, etc. On each important change switch to the browser window and reload the test page.

After 2 trillions of changes (maybe less, since you are gifted) you should begin to feel comfortable with the result of your hardwork.

[title]Activate the new skin[/title] To activate the new skin from the test page click on the 'Use this skin' command below page title.

Or go to the Control Panel and click on the 'Configure' command. Select the radio button for my_own_skin and save the new configuration. Load the home page to ensure the copy is ok.

[title]Finalize your skin[/title]

To add a professional touch to this, make a screen capture of the new skin. If you don't have a tool to do that, you may consider XnView, which is free and perfectly suited for this usage.

Save a preview of your skin into the skins/my_own_skin. Up to now I keep quite small images, with an horizontal size of 320 pixels.

Then edit or create the file skins/my_own_skin/manifest.php to describe the skin, add any copyright information, link to the preview image. Save your work.

Go back to the index page for skins and look at the entry for my_own_skin. The preview image should appear lovely, with adequate information text above.