Monday, 27 March 2017

Events

  • Open panel button
  • Close panel button
Duck  in bubbles

You can add content here too!

Add text, links, tables, bullets and images. Position your content here or after the Contact box (if you are using it!).

This image is over 800 pixels wide - es2 has automatically changed its size so it fits neatly in this column.

Contacts

es2 Information & Support Tel: 0300 065 8888

View pages in a different language

Search site

Download a PDF version of this page.

Using Custom Skins in es2

es2’s customisable skins are designed to enable you to quickly and easily create a unique look and feel for your es2 website.

You can:

  • Change background images
  • Change colours
  • Change the font
  • Position your name and logo/symbol in different positions

You cannot:

  • Alter the basic layout of your page. You cannot move or change the positions of provided web parts such as menu and contact boxes.
  • Change the type of layout that is used. es2 templates are all designed to be fixed width.

Provision of Custom Skins

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.

Getting started

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.

Changing graphics

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.

es2 Skins use the following files

Note: Files you create and upload will be renamed automatically to ensure that they are correctly linked to the skin style sheet.

Layer 1

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

Layer 2 sits above layer 1 and below layer 3.

File name: t3_background-layer2.png
Size: 980px wide x 280px deep

Layer 3

Layer 3 is the front-most graphic of your web page.

File name: t3_background-layer3[0].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

Uploading PNG or JPG images

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.

Changing colours

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.

Background transparency

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:

  • Set masthead background colour to be transparent
  • Set page background colour to be transparent
  • Set content background colour to be transparent
  • Set browser background colour to be transparent
  • Remove transparancy effect from site features (Menu, Contact and Search panels)

Changing font

Select the font you wish to use from the drop-down menu and click ‘Save changes’ to save your choice.

Image Tool box

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 ‘>>’.

Preview changes to your layout using the Preview feature.

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.

Committing your new layout setting to the live site

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.

Resetting your changes to the skin default

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

es2 website builder and content management system designed by EiS Kent. Tel: 0300 065 8800. Copyright 2017 Kent County Council. About Cookies