Change Your Website Skin

Skins are fun!  "Skin" is the term used to describe the visual appearance and layout of your website's pages.  And you can change them with a few simple clicks!

A Skin can be very simple or very elaborate.  It can provide for horizontal or vertical Menus, supply different styles of Containers (like skins for Modules), provide for different layouts, etc.  Its all up to the designer who assembled the skin.

Here's an example of a few Skins included with Swirlhost.  More skins are available from other sources (both free and commercial).  Skins can even be custom designed for your website.

Step By Step: Changing Your Default Skin

Your website's default Skin is managed on a page accessible only to Administrators.  This setting applies to your entire website and to all new pages that you create.

1.   Select Skins from the Admin menu.

On the Skins page, you have an area to view and select both Skin and Container options for your website.

2.   Choose a Skin collection to view from the dropdown lists on the top of the page.

The Host and Site checkboxes indicate that you wish to see skin options provided by your Host (for everyone) and/or those that belong only to your site.  Those selected will appear in the dropdown lists.  When you select one, the page will refresh to display that collection of Skins and/or Containers.

3.   (Optional Step)  At the bottom of the page you may indicate whether your Skin selection should apply to your public Portal or only to the Admin areas of your website.

The Portal and Admin checkboxes indicate that you wish to apply your skin choice to both types of Pages (this is the default).

4.   Choose the Skin that you would like as the default for your website and click Apply.

If the Skin includes an image, it creates a thumbnail view which you can click top see a larger image.  You can also click Preview which will popup a window showing the home page of your website with the skin applied (be sure to close that window when you're done previewing).

Your website will now have a changed default Skin (as illustrated below).  You may also want to apply a default Container which compliments your skin (note the blue container is still the default below).

Step By Step: Changing Your Default Container

Your website's default Container is managed in the same way as the Skin.  Similarly to skins, this setting applies to your entire website and to all new Modules that you create.  It is possible to specify a different Container on individual Modules (if you want to).

We'll repeat steps 1, 2 & 3 from above and then specify our default Container (instead of Skin).

1.   Select Skins from the Admin menu.

2.   Choose a Skin or Container collection to view from the dropdown lists on the top of the page.  Usually the skin collection will contain complimentary containers that you will want to select from.

3.   (Optional Step)  At the bottom of the page you may indicate whether your Container selection should apply to your public Portal or only to the Admin areas of your website.

4.   Choose the Container that you would like as the default for your website and click Apply.

If the Container includes an image, it creates a thumbnail view which you can click top see a larger image.  You can also click Preview which will popup a window showing the home page of your website with the skin applied (be sure to close that window when you're done previewing).

Your website will now have a changed default Container (as illustrated below).  Having completed both a Skin and Container change, your new look is complete!

Step By Step: Changing the Skin/Containers for a Single Page

It is possible to specify a different Skin and default Container for individual Pages in your website.  Please note that if you set the skin and/or containers at the page level, these settings are not affected when you change the defaults.

When you change the default Container for a single Page, that container is applied by default to any Module that is added to that page.

1.   Navigate to the Page whose Skin or default Container you wish to change.

2.   Select Settings from the Page Functions are of the Control Panel.

3.   On the Page Management page, expand the Advanced Settings group by clicking the symbol.  Scroll to the Page Skin and Page Container settings in the  Appearance section.

4.   The Host and Site radio buttons indicate that you wish to see skin options provided either by your Host (for everyone) or those that belong only to your site.  When you select one, the page will refresh to display that collection of Skins or Containers.

Choose (select) the Skin and/or default Container that you would like to apply to this Page.

The Preview button works as it does on the Skins page, providing a popup window with a view of your website Home page with the option applied.

5.   When you have finished with these steps, scroll to the bottom of the page and click Update to save your changes!