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
Go back to the test page, reload it, and select the skin
[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
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
[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
Then edit or create the file
Go back to the index page for skins and look at the entry for
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.