Administration Site Help Documentation Page Layouts: How to completely change the look and feel of your siteUpload you own custom CSS styling file, Background Image and Header Image

Upload you own custom CSS styling file, Background Image and Header Image

 

Your site will be styled according to a main site theme which sets up the colours of the text through to the text font and header images.

An example of a Custom Page Layout with no styling changes (you can see the Sections, Tabs and Small Links)

This is an example of the Page Layout with the a different Header Image, Background Image and Styling sheet (changed the text colours)

This is an example of the Page Layout with the a different Header Image, Background Image and Styling sheet (changed the text colours)

 

For your custom Page Layout you can set your own style, header and background images. To do this, you use the custom document upload fields

For your custom Page Layout you can set your own style, header and background images. To do this, you use the custom document upload fields

 

You can upload a different styling sheet. The styling sheet that we are using is based on the main theme of the site, but we are changing the colour of some text and the link for the Background Image

You can upload a different styling sheet. The styling sheet that we are using is based on the main theme of the site, but we are changing the colour of some text and the link for the Background Image

To add in a Custom CSS styling sheet, you need to have created one based on the main labels, styles etc that are currently referenced in the system. We can send your through a styling sheet to use as a basic template if you require. However, this is difficult to update so we recommend ONLY qualified design/web staff attempt these changes.

#1: Click on Choose File

#2: Select the css file from your computer

#3: Click on upload

You can upload your own background image to appear with this Page Layout. The background image will need to be large enough to cover the entire Site so it you have an image, ensure you enlarge it correctly. It should be about 2000 x 865 pixels

You can upload your own background image to appear with this Page Layout. The background image will need to be large enough to cover the entire Site so it you have an image, ensure you enlarge it correctly. It should be about 2000 x 865 pixels

Choosing the correct image can be very difficult. Often most images are too "noisy" and their content distracts from the main sections and modules available on the site. Getting the correct image, image size, transparency and colour can require a lot of time. Ask a design professional for assistance if you need it.

You can also upload any header images that you have as well.

You can also upload any header images that you have as well.

You can upload header images to appear in the header at the top of the page. Choosing the correct image can be difficult. Getting the correct image, image size, transparency and colour can require a lot of time. Ask a design professional for assistance if you need it.

Now Save the Page Layout changes.

Now Save the Page Layout changes.

 

This is an example of the Page Layout with the new Header Image, Background Image and Styling sheet (changed the text colours)

This is an example of the Page Layout with the new Header Image, Background Image and Styling sheet (changed the text colours)

You can see that when you change the styling page, the header and the background image there are significant differences in the style of the page (compared to the original theme displayed in the step below).

Getting the styling, the background image and the header image to work correctly is NOT easy. Issues arise if:

You do not know the basics of how to create and update a css styling sheet

The header image is smaller than the header image from the main theme

The Background image is too small

The Background image has too much "noise in the background"

Original Theme-without the new header image or background image

Original Theme-without the new header image or background image

 

You can choose to leave the styling, header and background images as blank. This just means the main site styling will appear (e.g the styling that appears in the image in the step above).

You can choose to leave the styling, header and background images as blank. This just means the main site styling will appear (e.g the styling that appears in the image in the step above).

If you do not feel confident changing the images or the styling then leave these fields blank.

If you have changed the style and the images and they look terrible, simply delete the files by:

1: Click on "Replace file"

2: Click the "Delete" button

3: Save the changes

0 Comments

Add your comment

E-Mail me when someone replies to this comment