es2’s customisable skins are designed to enable you to quickly and easily create a unique look and feel for your es2 website.
A number of pre-defined skin designs are provided. There is also an es2 base skin and an es2 default skin. The es2 default skin is not editable. Use the es2 base skin as the starting point for your own design. The pre-defined skins also can all be fully edited.
You will find that all the instructions and guidance you need are provided within the ‘Design and manage skins’ area of your Control Panel.
Note: The Custom Skin you use is applied to all of the pages on your web site.
All graphics used in your skin are PNG or JPG files and you will either need to have suitable software to create these files or engage someone who can do it for you.
Note: Files you create and upload will be renamed automatically to ensure that they are correctly linked to the skin style sheet.
Layer 1 is the back-most graphic of your web page and everything else will sit on top of this image.
File name: t3_background-layer1.png
Size: 980px wide x 1000px deep
Note: Depth can be greater than 1000px if you wish.
TIP: To avoid white space at the bottom of the image, sample the colour at the bottom edge and use this as your ‘Page Background’ colour. If you are using a background photograph, fade the bottom of the photograph into a harmonious colour and use that as your page background. This will ensure a seamless background when the length of your web page extends beyond the bottom of the image or photograph that you use.
Layer 2 sits above layer 1 and below layer 3.
File name: t3_background-layer2.png
Size: 980px wide x 280px deep
Layer 3 is the front-most graphic of your web page.
File name: t3_background-layer3.png
Size: 980px wide x 200px deep
Browser Window background
You can add repeating patterns or single images to the browser background to compliment your web pages. This PNG or JPG file can be any size you like and will depend on the effect you want to achieve. Often, this file is used to create a tiled backdrop to your site.
File name: t3_bodybg.png
When you select the Browser Window background from the drop down list, further options are revealed that allow you to set how you wish the browser window background image to be displayed.
To create an image that fills the browser window at any size, create a JPG image to this size: 1280px wide x 720px high. The image should be 72 dpi and the JPG should use low to medium compression to create a file of about 150-175 KB*. Use the following settings that are available when you select ‘Browser background …’ from the drop down when uploading your new image:
Background image position = ‘No repeat’
Background image size = ‘Cover’
Note: File size will vary depending on the subject. i.e. images with large flattish areas of colour will tend to be smaller than images with a lot of contrasting detail
To upload your customised images, select the appropriate image you intend to replace from the drop down menu, browse to the new PNG or JPG file and click ‘Upload/Save’. Your new PNG image file will be uploaded to the server and replace the default image.
Note: All of the default images provided with the Skin you are working with are automatically backed-up and can be reinstated by clicking the ‘Reset ALL’ Button
Note: PNG images should be compressed and flattened or they may not upload.
Note: JPG images should be compressed low/medium and be 72dpi
Compression and image suitability
All PNG and JPG images should be compressed to a small size. Image quality may be reduced by compression so a balance that suits the subject matter needs to be found between file size and image quality.
You can change the skin theme colours by selecting colours from the pop-up colour selector or by entering a hex value for the colour you wish to use.
Info: Hexadecimal notation (hex) is a ‘base 16 number system’ that uses the numbers 0-9 and the letters A-F to represent values. It represents the RGB values in a set of three double character codes. For example: white is represented by FFFFFF and black by 000000, Red is represented by FF0000.
When you have made your changes, click ‘Save changes’ to save your new colours.
When using flat colours in your design you may need to change the transparency setting for some areas.
To set an area to be transparent, tick the box. Un-ticking an option means that the area will use a colour you have set. In order to see the colour the associated image will need to be disabled in the ‘Image Tool Box’. Colours you set are opaque.
Note: Any colours you set for an area will not be used if transparency is set.
The following options are available:
Select the font you wish to use from the drop-down menu and click ‘Save changes’ to save your choice.
Images used on template skins can be disabled and enabled to further expand the possibilities to customise the look of your site.
When adding flat colours to your design you may need to disable some of the images. Images that are enabled are indicated with a ‘>>’.
Changes you make in this section will not be displayed on your live site until you click the ‘Make your changes live!’ button. But you can preview the images, colours and fonts you have chosen by opening the ‘Preview’ pane.
When you first start to work on a Custom Skin, you might not see any images at all in the preview. Click the ‘Load the default set of images’ link to load all of the skin images.
You can view a preview on the page or a full page version in a browser window by clicking the ‘long’ preview button. Note: most links are disabled in this view and not all elements are fully rendered. This is intended to preview your design and not your content or the website functionality.
PROBLEM: I can’t see my changes when previewing. SOLUTION: Use the browser’s ‘Refresh’ button or ‘F5/ctrl F5’ on your keyboard, to reload the page.
Warning: Some browsers (i.e. IE10) may not effectively refresh, reload or clear the internet cache. Using the ‘long’ Preview button and refreshing seems to work OK in IE10.
When you are ready to update your live pages with your new design, click the ‘Make your changes live!’ button. Your changes will immediately be displayed on your live site.
To reset to the default skin images tick the box ‘Reset to default preview images’ and click ‘Upload/Save’.
To reset your theme colours and font to the skin defaults, tick the box ‘Reset to default colours and font’ and click ‘Save changes’.
To reset ALL images, colours and fonts to their skin defaults click the ‘Reset ALL’ button.
IMPORTANT: Your uploaded images will be overwritten if you click the ‘Reset ALL’ button and they cannot be restored. KEEP A BACKUP OF YOUR IMAGES ON YOUR OWN SYSTEM in case you need to upload them again.
Page last updated: Friday 13 June 2014