Basic User Help

UpFront User Types

There are three user types in UpFront:

About  Browsers

We have tested UpFront editing using the latest versions of these browsers

We recommend that you use one of these browsers when editing your website. Other browsers may not display pages appropriately.

For viewing of the published website of course, any browser on any device may be used.

Terms Used

You need to understand a small number of terms, so that when you read these instructions you can understand them easily

Quick Links within this document

Editing the Website
Change a Webpage
Abandon a Webpage's Changes
Abandon All Changes
Delete a Webpage
Add a Webpage
Controlling How Tables Display
Add or Edit an Image Collection
Manage Navigation Menu Items
Hidden Webpages
Linking Webpages Internally (within your Website)
Edit Left Column
Edit Right Column
Change Text Font, Size and Colour
Change Logo Image
Change Logo Background
Update Search Optimisation Values
Site Map (for your users)
About Website Colours
What Else Can I Do
Publish the Website
Home Page
About Small Screens and your Website
Special Functions

Editing the Website

While this may look daunting on first glance, it's actually very easy to set up and remove webpages, and it's very easy to amend the text.

Editing is split into three conceptual areas

Change a Webpage

If you wish to change the text and images in the Centre Column then click the Navigation Menu on the webpage you wish to change, and select Webpage >> Edit This Page.

A new, smaller window will open, and allow you to edit the text in a similar way to a word processing program.

You may

  1. Amend the text (click here for further help)
  2. Insert links and load files (click here for full help, or here for quick help that'll get the document loaded ASAP)
  3. Load images, and select images to display (click here for full help, or here for quick help that'll get the image loaded ASAP)
  4. Add an image collection (see separate section below).

A very important part of your website are the images, and it's very important to have images of the right size. Images that are large will make your website difficult to use and unpopular. Please read about image sizing to learn what UpFront does when you load an image, and what you can do if the default size option is not what you want.

You may also want to read up on issues when pasting from Microsoft Word and other word-processing programs.

When you have finished editing your webpage press the Save icon, close the small window, and press F5 to see how it looks.

You might also want to run the Webpage >> Broken Links function. If any links don't exist they will be listed. Note: if you wish to check every page in your website then you can ask ClubHub Support to send you the results.

Note: links to redirected webpages will reported as failed. Use direct links to avoid such reporting.

If you are happy with it, and that's all you want to do, then press Publish. 

Note: the cursor your browser uses for content editing can potentially clash with the background colour of the area being edited. For example, if your cursor is grey and the area you are editing has a grey background, then the cursor may seem to disappear. If this problem occurs and affects your ability to edit accurately, then consider changing the background colour temporarily.

Abandon a Webpage's Changes

You might make changes one or more webpages, but decide you don't like one or all of them, and want to change it back to the way it was.

Click the Navigation Menu item for the webpage you wish to revert back to its old version, and select Webpage >> Undo Last Page Edit.

This function only goes back one version, and only applies to amended webpages (not deleted webpages, added webpages, left and right column changes, image collection changes, nor site changes).

Note that clicking Webpage >> Undo Last Page Edit again restores the webpage to the previous state in case you decide you do want the changes you made after all i.e. it toggles between the changes you just made and the webpage before you made those changes.

Once the website is published all change history is lost, and this function will have no effect.

Abandon All Changes

If you make several changes to one or more webpages, the default text, the background colours etc, and then decide the changes aren't needed, click Quit in the Website Editing Menu.

However any image collection changes (or CSS changes for advanced users) you may have made cannot be undone, .

Delete a Webpage

Click the Navigation Menu on the webpage you wish to delete, and select Webpage >> Delete This Page.

Once you have deleted a webpage you cannot recover it, other than by discarding all changes via the Quit function.

Add a Webpage

Select Webpage >> Create a New Page.

To create a new webpage name (and a navigation menu item)

  1. tick A webpage with a navigation menu item
  2. enter the navigation menu item name required, the page file name that should be used for this webpage (normally the same but with any spaces removed) and 
  3. press Create.

A webpage with default text will open, and you may make changes to it using the text editor.

The item in the Navigation Menu is created automatically for this webpage type and positioned in the menu as the last menu item. You probably want to move the menu item somewhere else. Click Site Map, find and select the new menu item, and move it where you want using the Site Map tools.

Note that the webpage has been created even if you click Close without saving it. If you decide that you don't want that page then refresh the browser, select it, and delete it.

You can also add 'hidden' webpages by ticking A webpage with no navigation menu item. These webpages will not show on the navigation menu when published. See section Hidden Webpages. Note that you cannot add a navigation menu item to a hidden page later - if required save the source for the hidden webpage, delete the hidden page and create a new page with a navigation menu item (and the copied source).

Controlling How Tables Display

To control the way a table looks in your published page...

  1. Create the table within the editor by clicking the table icon (the default width is 95% which you may adjust, but don't leave the % off else it'll be very small)
  2. Click somewhere in the table
  3. Click the grey word table at the end of the popup window (within  body  table  tbody  tr  td) you are editing in (this selects the whole table)
  4. In the Styles dropdown at the top of the popup window you are editing within, select one of the table styles
  5. Enter the text required in the table cells
  6. Save the page
  7. Refresh the page to see how it looks.

Note that when you edit the webpage again the table will shown a dotted border. This is a feature that allows tables with no border to be viewable in the editor - the table will show the selected border style when saved and published.

Information: if you don't see those table entries in the Styles dropdown then you need to clear your browser's cache and then retry – Google how to do that.

Note that you can change the way a cell (one box in your table) displays - select the cells that you wish to change, right click within those cells, then select Cell >> Cell Properties.

Add or Edit an Image Collection

You may add images to a webpage in a lightbox format (showing clickable thumbnails), or in a slideshow format (images change automatically).

Firstly, type &gallery or &slideshow (for lightbox and slideshow format respectively) into the webpage in the position required.  

To add to, or delete images from, an image collection, click the Navigation Menu on the webpage you wish to change, and select Webpage >> Image Collection.

You may add new images from your computer, or delete existing images. Note that there are limits on the number of images and their size.

When all images have been loaded you need to recreate the gallery or slideshow. There are two ways to do this

  1. click Recreate below the list of images
  2. close the image collection page, and edit and save the webpage associated to this image collection.

Your image collection should appear on your webpage when you refresh it. The images appear in alphabetical order. Permitted File Types are

For slideshows we recommend that your images all have the same dimensions as this will help retain consistency of display across the 100's of browsers that might display your website.

If your website is "responsive" then the slideshow is designed to display on tablets and smartphones as well as PCs and laptops, and the slideshow dimensions will vary according to the size of the device displaying it. Note that you cannot be in complete control of the dimensions of your slideshow since every browser makes different display decisions based upon the particular dimensions of your device and of the images i.e. you might lose a little off the top or sides of your slideshow. 

Under Website >> Slideshow Dimensions you can change the size of the slideshow using pixels, or the percentage of the published webpage width. Experiment to get the required dimensions.
If your website is "fixed" then it won't change proportions when displayed on small devices.

Manage Navigation Menu Items

Click Site Map to see all navigation menu items. From here you can

If you delete a navigation menu item then all attached navigation menu items and webpages are moved to the top level.

Click here to see an example of an UpFront user creating a newsletter structure.

Hidden Webpages

You can create 'hidden' webpages by ticking A webpage with no navigation menu item when adding it. You cannot see these webpages while editing the website unless you select Webpage >> Hidden Pages (and the option is not available unless you have hidden pages).

Webpages created like this cannot be accessed by website users except by

  1. the user knowing the URL e.g. you send  it to them in an email
  2. another webpage links to it
  3. being found via a web search.

Linking Webpages Internally (within your Website)

To link a webpage (hidden or not) from another within your UpFront website page

  1. Make a note of the webpage's file name e.g. contactus.php (select Webpage >> Rename this page if you don't know what it is)
  2. Click the navigation menu item for the webpage where you want the link to appear, and click Webpage >> Edit This Page
  3. Type something like 'Click Here' and select that text with your mouse
  4. Click the Insert/Edit icon
  5. Change Protocol to <other>
  6. Type the webpage name e.g. contactus.php into the URL (make sure you include the .php or .htm suffix)
  7. Press OK.

You can also link to a certain area on a webpage, by using an anchor. To learn about anchors click here.

Edit Left Column

To change text and images displayed in the left column beneath the Navigation Menu select Website >> Edit Left Column, and proceed as if you were changing the centre column.

Note that on websites that use the "responsive" menu this column will disappear when the webpage is viewed on a small device like a smartphone. In this case you should be careful that this column does not contain crucial data.

Edit Right Column

To change text and images displayed in the right column select Website >> Edit Right Column, and proceed as if you were changing the centre column.

Note that on websites that use the "responsive" menu this column is not available.

Change Text Font, Size and Colour

If you want to change the font on your website select Website >> Change Website Font.

Select the font, size, and colour required, and press Update Website Font.

Change Header Image

You can change the logo displayed on your website, and it may be any size that you wish. However an image that is too big may not display very well. We recommend 1000 pixels wide, and up to 180 pixels deep.

To change the header image select Website >> Header Image. Select a file from your computer, enter a description (will be used when the image is hovered over), and press Load Image.

Note that on websites that use the "responsive" menu the header image will not display, and we recommend that the home page have some text like "Welcome to the XXX Club" or similar (or you can provide a small image to display on small devices.)

Change Header Background

You can change the background colour for the logo displayed on your website. It will only be visible if the header image is less than 1000 pixels.

To change the header background select Website >> Header Background, click one of the colours displayed, and press Update Header Background.

Alternatively you may enter the hex value of the colour required manually, and press Update Header Background.

You can also

Update Search Optimisation Values

You want your website to look attractive and relevant when someone sees it in the list produced by a search engine like Google, and you want your webpage to appear as high as possible in the list.

Getting these values right is called Search Engine Optimisation (SEO).

To meet these goals

  1. each webpage should have a key phrase of 1 to 3 words, e.g. Bird Watching NZ
  2. you should include that phrase
    1. in the Webpage Title and Webpage Meta Description (below)
    2. as many times as possible in the text of the page
    3. in the alt tag of images you have on the page (right-click the image when editing the webpage, and select Image Properties)
  3. if you can influence it, then the links other websites have from their webpages to your webpage should include this phrase in the title of their link
  4. other keywords (e.g. ornithologist, twitching) should be included in the Webpage Meta Description tag, and also appear frequently in the text. This value should be a nicely composed sentence of less than 160 characters, with correct punctuation and capitalisation.

To change these details select Webpage >> Search Optimisation, and enter the values required (they are explained on the update page), and press Make Change.

So that new pages, and pages with no value set, have sensible values, you should tick and update the Make these my default settings for all new pages value for the Home page.

Site Map (for your users)

If you look for hidden pages in your new site you'll find one called Site Map. This page lists all the non-hidden webpages in your site. Users of your website can get to this page via a link in the footer.

A site map is especially useful for anyone using an old style browser which might not be able to display the menu type you have selected as well as modern browsers.

The site map page gets updated automatically whenever pages are created or deleted, or renamed.

To update it manually 

1.    Webpage >> Show Hidden Pages
2.    Click on Site Map (hidden)
3.    Webpage >> Edit this page
4.    Click the Save icon
5.    Publish.

You can delete the site map webpage if you wish, but note that the Site Map link in the footer will show an error when clicked.

Note that, like other hidden webpages, the Site Map link does not work while you are editing your site.

About Website Colours

You have direct control on the colours of some sections of your website, while some colours are inherited. Here are the colours of your website...

 Header Background Where Set  
Header Background  amend via Website >> Change Header Background 
Left and Right Column Background
amend via Website >> Layout
Text Colour
amend via Website >> Change Website Font
Navigation Menu Hover Background If the menu is Top, below banner and the Header Background is a light colour - black

If the menu is Top, below banner and the Header Background is a dark colour - white

If the menu is Left menu and the Left and Right Column Background is a light colour - black

If the menu is Left menu and the Left and Right Column Background is a dark colour - white
Navigation Menu Text Colour
If Navigation Menu Hover Background is black, this value is white

If Navigation Menu Hover Background is white, this value is black
Links always blue
Link Hover Background
as Navigation Menu Hover Background
Link Hover Text as Navigation Menu Text Colour

Be careful with     

  1. Blue column backgrounds, as links are blue too, and might be hard to see

What Else Can I Do

Anything really. When you click the Source icon while editing a page you'll see that you have access to the html behind the text. You can, if you have the skills, put in html code yourself. 

You can see some examples at the UpFront Tips website.

We also have some special "tags" to include things like google analytics, slideshows and RSS feeds. Click here to read more. Note that you cannot add javascript and similar html tags directly to a webpage for security reasons. 

If your organisation is also a ClubHub user, then there are some special ClubHub features available too.

Publish the Website

Once you have made all your changes, you must "publish" the website to make it available to your users. 

Users with premium features enabled publish via FTP to their hosted domain. See this for more information.

Users with only basic features enabled publish to a level below For example, if your website is called myownclub then the URL will be The value myownclub may be altered using Website >> Location.

Note that any documents and images that basic users have uploaded previously will be deleted from the UpFront servers when they are no longer referenced in your website.

Home Page

On the Home Page there are various functions that, while unrelated to editing your website, are nevertheless important.

Home My Details Logout Help
 Return to Home Page Update Contact Info
Update your personal and organisation's details
Sign out of UpFront  About ClubHub UpFront
Version information

Change Login Name
If you don't like the username allocated you may change it

A place where you can find out more about UpFront

You may change your password if required
Another link to these instructions
Terms of Use
The current UpFront terms of use
      Contact Support
How to get in touch with ClubHub personnel

Against each website on this page you'll some buttons

Note 1: users cannot  make changes at the same time, so you may need to consider how edit conflicts are managed in your organisation.

Note 2: limited users may not take over or discard other user's changes. They are simply told that they cannot edit the website now, and who has made the changes that are stopping them editing. 

Note 3:  if  person 1 has to make a change to the website, while person 2 is partially through a change on a different webpage, the partial change  can be manually saved, abandoned, and then restored later...

  1. person 2 edits webpage and clicks Source icon
  2. person 2 cuts out the source code and saves in a text file (external to Upfront)
  3. person 2 Quits from the edit session (thus losing their changes)
  4. person 1 edits and publishes
  5. person 2 starts a new edit session, edits their webpage, clicks the Source Icon, pastes in the saved code from the text file, and saves the webpage.


Breadcrumbs is a feature available to premium UpFront users. It allows users to know where they are within a website, and to quickly navigate back. See here for an example of a breadcrumb, together with some explanatory text. Please contact if you want this turned on for your site.

About Small Screens and your Website

Your users are likely to be looking at your UpFront website on a variety of devices, from PCs with large monitors, to laptops, tablets, and down to 4 inch smartphones.

The original UpFront website may not display very well on a small screen since the text will appear in a very small font as the browser attempts to display the whole page. To find the data the user probably needs to pinch and scroll, and will generally find this a frustrating exercise.

UpFront now provides a "responsive" menu where your website will appear appropriately on devices of different sizes. We are happy to discuss moving your website to be "responsive". Note that some compromising of the design may be required…

Special Functions

Bridge Scoring - click here to learn about the UpFront bridge scoring function.