Site Styling Help

Overview

Usually building a website and keeping it updated requires knowledge of html coding or use of specialist software. With GPUK.net's automated system you need no technical knowledge at all, and yet you can have a personalised practice website fully built in a few minutes, and you can update it using simple onscreen editing forms - no coding required.

Once you have signed up free to GPUK.net we instantly and automatically make you a website. You can then click on a link to review it. If you want to make any changes e.g. add/remove features, edit text, change backgrounds and logos, and so on, then you don't have to do any coding, you just use our point and click management forms.

The best thing is to just try it. Sign up is free, you can then try it out and see that it really is as easy as we say.

Page Maintenance

The Style setting options set the style, backgrounds, and logo for the whole site.

Use the Easy Style Selections page (follow the link from your Admin page) to simply select a whole new style for your website, or use the Detailed Style Editing page instead if you wish to fine-tune the result.

Set the Style of the Menubar/Frame

The border/menubar for the pages can have different styles. Select the style that you prefer.

You may remove the frame by setting the colour below to white or transparent, or you may select one of the styles offered.

One style has rounded corners to the panel where the text is displayed. Another has a rectangular panel with sharp corners but a drop shadow border effect. Other styles may be made available in the future.

Set the Style of the Menu Links

The menu links may be either text links or button links. Button links appear neater and should be your usual choice. Select text links if you need to use descriptions which are too long to fit on a button.

Be careful if you use a link which is too long or which only just fits on a button, or if it wraps and appears as two lines on a button. This will appear satisfactory only to users of Internet Explorer. For users of other browsers the text will appear truncated and may be meaningless.

Set the Colours for the Navigation Frame/Menu and Background

The border of the page is referred to as the "navigation frame" or menu (sometimes abbreviated to "navbar" or "menubar") since it has the navigation links on the left-hand side. The "panel" within the frame is the main area for your text and information.

You may fundamentally alter the appearance of your site by changing the colour of the navigation frame, and also the background colour behind the text in the "panel". Just choose a colour combination and try it out, but ensure that you choose contrasting colours for the panel and navbar text, or else you won't be able to see anything!

Most often the colour of the panel should simply be white, and this is the usual recommendation for clarity, but with care you can sometimes use a coloured and textured background.

We offer many colours, and also an option to use absolutely any colour you wish using hex notation. If you want more colours added to the selection list then email support and say what colour you'd like.

To set your own colour instead of using one of the provided colours: Instead of clicking one of the radio buttons to select a colour, you should enter the code for your choice of colour in the box provided at the bottom of the colour chart. The code should be in hex notation, a six digit number using characters a-f and 0-9. Whilst you may try any colour that you like, to ensure that it appears as you expect in your visitor's browser it is safest if you use one of the 256 "web-safe" colours - see the chart at Visibone.

For the background to the "panel" you may prefer to use an image instead of plain colour. In that case use the box at the bottom of this section to enter the name of the file that you wish to use. This should be a suitable image file e.g. jpg or gif format, and it will be tiled to cover all the visible area. You will need to upload a file of this name to your backgrounds directory, or else the background will be shown as plain white.

Set the Font Style and Colour for the Main Text and the Home Page Header

Use the left-hand section to select a font style to be used for the text in your "panel" i.e. the main text that is on your pages.

Use the right hand section to select the font to be used for the name and address which by default appears as a header on the home page. If you do not wish this header to be displayed then you may click the button to disable it.

Then select the colour to be used for each of these parts of the page, typically black for the main panel text, and black or coloured to match the Navigation Frame for the Header.

As with the Navigation Frame and Panel Background above, if you prefer you may enter a colour code in hex notation (see above).

Set the Style for the Panel Links

Select colours by clinking next to your choice, or click next to the empty boxes below the colour samples and enter the code for another colour.

Using the left-hand column you set the colour for the links in the body of each page.

Using the right-hand column you set the "hover" colour, which is the colour to which the link changes when the visitor places their mouse over the link.

As with the other colour sections above, if you prefer you may enter a colour code in hex notation (see above).

Set the Style for the Link Buttons

You may select your choice for any of the settings listed below. The buttons have a 3D effect, and so the buttons may be the same colour as your Navigation Frame, or you may choose a contrasting colour. Take care to choose a text colour which contrasts well with the button colour. Usually, but not essential, you would choose the same font style for the button text as for the rest of the navbar text.

• Colour of the (background) of the menu buttons
• Colour of the text on the menu button
• Button width
• Button height
• Text size
• Text font

Set the Style for the Navigation Frame Links

Select colours by clinking next to your choice, or click next to the empty boxes below the colour samples and enter the code for another colour.

Using the left-hand column you set the colour for the text and links in the Navigation Frame. This applies both to text such as the page name and doctors name, and also to the links if you are not using button links.

Using the right-hand column you set the "hover" colour, which is the colour to which a link changes when the visitor places their mouse over it. (This does not affect text such as the doctors name, but only applies to text hyperlinks).

Usually, but not essential, you would choose the same font style for the button text as for the rest of the navbar text.

As with the other colour sections above, if you prefer you may enter a colour code in hex notation (see above).

Add an Search Box to your Menubar

You may display a search box on below your menu entries on the left navigation bar. This helps your visitors to find their way around your site.

Use the utility "Configure Search Facility" on your Admin page. Select the option to remove the search box, or to show it.

Whenever you edit the content of your pages you should run the "Reindex" option on this menu so as to incorporate your changes into the search database. If the search box is currently switched off then running Reindex will also make it display once again.

Select Background Colour/Texture

You can choose your own background for your pages. This can be a plain colour, or a textured pattern.

• The simplest option is to just click the select button next to your choice. When you rebuild the page by pressing the Update button at the foot of the page then this background will be installed.
  
  
• You can upload additional backgrounds of your choice. Use the uploads link on the Customised Website link on the Admin page, and upload your backgrounds into the backgrounds directory. They will then become available for you to select on this page.
  
  
• Only jpg files with a jpg filename extension are supported e.g. filename.jpg. However if the background of your choice is in another format e.g. gif file, then you can use a graphics program to convert it to jpg before uploading it.
  
  
• You can make your own backgrounds using a graphics program. You can paint a small panel in a single colour and save it in jpg format, or you can try to make a textured background but these are difficult to get right because of the need to get the edges to blend when the small panel is tiled over the screen.
  
  
• When you sign up for an account a few extra background files are put in your background directory and these can be chosen from your homepage updating screen. We have a much larger selection of backgrounds available, including some of the more garish ones!
  
  
• You can download by ftp from ftp://ftp.gpuk.net/backgrounds/ but that way you do not get a preview of the files.
  
  
• Or you can browse all the files available on this page but be warned that it will take a few minutes to download as it includes many images (background samples).
  
  

Be careful when selecting a background. Too dark a background or too bold a pattern can make the text on the pages difficult to read. Too large a file will make your pages slow to load. The plain backgrounds supplied here will load very quickly, the textured patterns a little slower.

Select Homepage Logo

When you first sign up with GPUK.net your homepage has an NHS logo at top left. If you have your own practice logo, or perhaps a picture or drawing that you want to use, then you can upload it into your logos directory (Use the uploads link on the Customised Website link on the Admin page) and then it will become available for you to select here to make it your homepage logo. Logos must be uploaded in gif format, if your logo is in another format you can use graphics software to convert it to gif format.

Please note the guidelines on the use of the NHS logo. We provide a version of the logo with the specified size of border for use when you are placing a logo against a background that is other than white.

Advertising Logos

GPUK.net does not and will not place any adverts on your pages, but you yourself may do so if you wish e.g. if you have obtained sponsorship from local pharmacies or physiotherapists.

We provide an automated facility for you to display sponsors logos on the bottom section of the left navigation bar.

1. Obtain the images from your sponsor. Recommended size is 120x45 pixels in format gif, jpg. or png. 120x60, or other sizes, are also possible but will not fit so well.
2. Upload the logo files to your images directory.
3. Create the links to the logos using the utility on the admin page.
   • For "Target" enter the link required when a visitor clicks on the logo e.g. www.oursponsorswebsite.com or www.gpuk.net/oursurgery/sponsordetails (where sponsordetails is a page on your site giving details of your sponsor's business).
   • For "filename" enter the filename of the logo image that you have already uploaded to the images directory.
   • For "Alt text" enter a brief phrase to describe where the link leads e.g. "click to visit our sponsor" - this has several uses: When the visitor hovers their mouse over the image the text is displayed, usually against a yellow background; until the image has finished loading this text is displayed in place of the image; if the visitor has image loading turned off then this text will display in place of the image; lastly but perhaps most importantly, visitors with specialist equipment such as screen readers for the blind will know from this text what the link might be even though they cannot see the image.

Select a Stylesheet

The Stylesheet sets the style for your pages - font face, size, colour. We have prepared a few alternative stylesheets that you can select from the screen. You can click next to the one that you want to try. If you don't like the effect you can try another one. If you get in a mess then you could simply use the Styles Selection screen and select a new style, since this will automatically update your stylesheet to one that matches the colour scheme selected.

If you are feeling more adventurous you can write your own style sheet, or download and edit the ones that we provide. You can upload the finished result using the file upload utilities on the admin page for the users of customised websites. You should upload to the root directory, which is the first one that you are offered when you use the upload utility. Your file must have the extension .css but should not be called "default.css" unless you want it to overwrite your current stylesheet.

Rebuild the Automated Pages

When you have made your selections in all the areas above, if you want to rebuild your pages to incorporate these changes then enter your Admin Code Name and Password if requested and press the button to proceed.

If you have uploaded a custom built homepage index.html or a links page then activating the update will have no effect on these. If you wish to revert to the automated pages then you should delete your index.html and /links/index.html files since these take precedence over the automated pages.

In any sections where you make no selection then no changes will be made.

View the Result

Sometimes when you go to have a look at your newly changed pages it seems that there is no change. Most likely this is because you are looking at an old version of the page in a cache, either on your computer or from your ISP.

1. Try closing down your browser and restarting it, most often this will cause you to fetch the latest version of the page.
   
   
2. Set your browser to load a page every time you visit it, e.g.
   
   
   • In Internet Explorer go to Tools|Internet Options|General|Settings|"Every Visit to the Page".
     
     
   • In Netscape go to Edit|Preferences|Advanced|Cache and set "Document in Cache is compared to document on network" to "Every Time".
     
     
3. Sometimes, particularly with Freeserve, your ISP is caching the page and may give you an old copy. There's not much you can do about this except try again later. Sometimes disconnecting and redialling will connect you to a different cache machine which may work better.