There are three user types in UpFront:
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.
You need to understand a small number of terms, so that when you read these instructions you can understand them easily
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
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.
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.
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.
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, .
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.
Select Webpage >> Create a New Page.
To create a new webpage name (and a navigation menu item)
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).
To control the way a table looks in your published page...
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.
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
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.
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.
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
To link a webpage (hidden or not) from another within your UpFront website page
You can also link to a certain area on a webpage, by using an anchor. To learn about anchors click here.
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.
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.
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.
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.)
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
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
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.
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
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.
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
||amend via Website >>
||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
|Link Hover Background
||as Navigation Menu Hover Background|
|Link Hover Text||as Navigation Menu Text Colour|
Blue column backgrounds, as links are blue too, and might be hard to see
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.
If your organisation is also a ClubHub user, then there are some special ClubHub features available too.
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 www.clubhubssl.com. For example, if your website is called myownclub then the URL will be www.clubhubssl.com/myownclub. 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.
On the Home Page there are various functions that, while unrelated to editing your website, are nevertheless important.
|Return to Home Page||Update Contact Info
Update your personal and organisation's details
|Sign out of UpFront||About ClubHub UpFront
|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
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...
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 email@example.com if you want this turned on for your site.
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…
Bridge Scoring - click here to learn about the UpFront bridge scoring function.