UpFront Helptext V2

This option says either

• Don't use Window Boxes or
• Use Window Boxes

Don't use Window Boxes allows edit screens to open in large windows while Use Window Boxes opens the edit screen as a small screen within the UpFront.

Click the name of your website to open it in a new browser tab

Normally this will say
No changes since publishing
and you can start an edit session by pressing the New button.

If another user is editing the website you will see and message like
Currently being edited by Adam Apple, last updated 51 seconds ago

This means that they have made changes to the website, but have not published those changes. Only one set of changes is permitted at a time so either

1. you leave the other editor to finish their changes
2. you use the Takeover button to start an edit session including their changes
3. you use the Discard button to throw away their changes and then start an edit session.

Please be careful, and communicate with the other user. Note that in some cases they may inadvertently made a change e.g. they opened a page for edit and changed nothing, but saved the page as if they had.

If you were editing the website previously and did not publish your changes (perhaps you left your edit session and the system timed out) you will see
Your last update was 59 minutes ago
You are locking this site for Adam Apple

Use the Continue button to resume editing, or the Discard button to abandon those changes.

Action

Your edit authority does not allow you to delete the website. Pressing Remove Site will tell you to request that through ClubHub Support.

The Editor button appears for the primary editor only, and this allows new editors to be created, existing editors to be deleted, and passwords to be reset. If the new editor is to be limited in the pages they are allowed to edit then click Change Privileges, untick May Access All Pages, and press Save Changes. Doing this means that the link Manage Page Access will now appear for that person, and this will give access to manage the pages this person can edit.

The Copy button allows one website copy to be created. Use this if you want to experiment with UpFront without compromising the real website. Once you have made the copy start a New session, ignore the ugliness (it has no CSS), and find and press the Publish button, and then experiment with the settings as required, and Delete when finished with it. This will NOT affect your real website.

Page >> Create a New Page

Select this to create a new page. The page can be a normal one with menu access, or a hidden one with no menu access.

Once a normal menu access page is created use Site Map to move the page within your menu structure.

For a hidden page you will need to tell people how to find it e.g. via a link in another page, or using a link in an email. 

Why have a hidden page? An example is that you don't want your menu to be too complicated so you may want to have newsletters all as hidden pages and then link to them from a page that is on your menu called News letters.

Select this to edit your page.

See page Editing Tips below for specific techniques.

As Edit This Page, but the editing windows opens full screen. This might be useful when the page is large.

Note that there is no Close link on a full screen editing session - use the back arrow to return if you do not want to save the page.

Use this function if you have made changes to a page, but decide you don't like it, and want to change it back to the way it was. This is only possible if the change has not been published.

Note that using this function a second time restores the page to the previous state.

You can rename a page if you want. You can rename either or both of the navigation description and the file name. For example you create a page called Contact Us and later want to show Contact on the navigation menu.

Note that it might not be a good idea to change the file name since, if the page has been previously published, users may have bookmarked the page, and now be unable to find it.

Page >> Delete This Page

Select this to delete the page currently being displayed. Once you have deleted a page you cannot recover it, other than by discarding all changes via the Quit function.

Page >> Browser Optimisation

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 page 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 page should have a key phrase of 1 to 3 words, e.g. Bird Watching NZ
2. you should include that phrase
3. in the page Title and page Meta Description (below)
4. as many times as possible in the text of the page
5. in the alt tag of images you have on the page (right-click the image when editing the page, and select Image Properties)
6. if you can influence it, then the links other websites have from their pages to your page should include this phrase in the title of their link
7. other keywords (e.g. ornithologist, twitching) should be included in the page 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 page >> 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.

Page >> Image Collection

You may add images to a page in a light-box format (showing clickable thumbnails), or in a slideshow format (images change automatically).

Firstly, type & gallery or & slideshow (for light-box and slideshow format respectively) into the page in the position required, then save the page. Note that there should not be a space between the & and the text but if we don't put one here we can't show you the tag!

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

You may add new images from your computer, select already loaded images, 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 page associated to this image collection.

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

• png
• gif
• jpeg
• jpg.

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 different browsers that might display your website. This is somewhat automated in UpFront since images are always loaded no larger than 500 pixels wide.

Your website is "responsive" so 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.

Warning on Slideshows

While UpFront permits slideshows they aren't really a very good idea for small devices, since

1. they will use up your customer's bandwidth, potentially annoying them
2. a small device has little room to get your message across, and showing a slideshow will reduce the chances of getting your message across.

Page >> Bad Links

Use this to have UpFront check that your page has no bad links. A bad link is a link to a page that does not exist.

Page >> Hidden Pages

Use this to access all hidden pages (since they don't have a menu item to access them).

Sitemap

Click Site Map to see all navigation menu items. This is where you can modify the layout of your menu. You can

• move a selected navigation menu item and/or page so that the menu item for it appears in a different place.
• delete a selected navigation menu item and/or page.
• rename a selected navigation menu item and/or page so that the description on the navigation menu can be changed.
• create a new navigation menu item - this is a menu item that you want to list pages under, or another navigation menu item. Note that navigation items are shown in red, pages in black.
• If you delete a navigation menu item then all attached navigation menu items and pages are moved to the top level.
• Note: try not to have too many top level menu items - with too many on a small browser menu will wrap and not look attractive. Make your browser window larger and smaller to test the menu wrapping.

Website >> FTP Details

If your website is published locally then only the name is required.

If your website is published to your own domain then the access details are shown here.

Website >> Edit Template Area

This option gives edit access (just like for a web) to three very important areas

1. the Sidebar
2. Footer
3. the Stick to Top.

You will understand Sidebar and Footer conceptually.

Stick to Top refers to website content that is

1. part of the sidebar (at the top) when the website is viewed on a large device
2. on the top of every page when the website is viewed on a small device.

Why? It's not a problem when your website is displayed on a large device since there's plenty of room to see everything.  But when the user has a small device you do not want a large sidebar displaying at the top of every page, since every page would look exactly the same.

So UpFront allows you to nominate the most important parts of the sidebar content via Stick to Top On a large device it's just the top part of the sidebar, but on a small device Stick to Top is at the top of every page with the rest of the sidebar at the bottom of the page. We recommend you keep this very small, just a Register button for example.

Website >> Position Sidebar

This option allows you to change the sidebar from left to right and vice versa (on large devices), or to decide not to have a sidebar on your website.

Note that changing your website to not have a sidebar will delete any content you had in the sidebar.

Website >> Style Settings

This option allows users to change the look and feel of the website.

Some options are just text, such as

• Words across the header - Small device
• Words across the header - Larger device

and you may change them as required.

For other settings, if you do not know what CSS means then you should tell ClubHub Support what you are trying to do, and we will help you style your website.

If you understand what CSS means then you can change some values if required. Note that the UpFront default values are shown, to allow you to fix any values you may have broken, and as long as you haven't published since a change you can reset all Style Settings back to the default values.

If you are a CSS coder then you should also have access to the CSS available via Website >> CSS. You'll see tokens in the CSS that will be replaced by the content here in Style Settings. Our goal is to have you leave the CSS alone, and only have you change these values.

If you think that you need to change the CSS please check this example first, and if this can't do what you want then contact ClubHub Support explaining what you need to do. We will tell you how to, or we will consider adding a Style Settings token.

Note: If your site unexpectedly looks very different then it is probably an error in the last style change you made via Website >> Style Settings.

Go back in there and undo it or reset to the default for that particular style option you changed.

Website >> Edit CSS

You may copy the standard CSS and alter it as you wish. We do not recommend this unless you are a trained CSS coder.

These changes are at your own risk, and ClubHub Support is unlikely to be able to assist you with CSS changes.

Website >> File Housekeeping

Sometimes you will upload images to UpFront that you later stop using, and you'll have pages that were important once but are now deleted from UpFront.

These files remain in your FTP folder. UpFront does not delete files it no longer refers to since they could be files loaded directly into your FTP folder by you.

So you may need to use this function occasionally to remove them.

Website >> Image Manipulation

All images are loaded at 500 pixels wide or smaller. This is generally quite sufficient for a website, and enormous images files are a bad idea since you'll be using up the data cap of those viewing the website.

If the image you load must be greater than 500 pixels then use this function to reload it in a larger resolution.

You may also rotate your image. Note that the original (non-rotated) image will most likely be stored in your browser cache so you may have to clear the cache to see the image correctly.

Header Image

The header image can be set via Website >> Style Settings and Header Background. If it's too tricky just send ClubHub Support the image. Header images should not include the name of your organisation because Google and other search engines cannot search images to index your organisation - instead you will enter your organisation name into Style Settings (with a shorter version for small devices if appropriate).

Note that the menu text colour needs to be selected based upon the predominant colour of the header image, or be a bright colour if the image has both light and dark areas.

Note how the image changes size as you make the browser smaller and larger.

The header should NOT include any logos or text, since that will not look very nice against the text.

Of course the header image isn't that important any more, since it doesn't display on shall devices where the majority of your organisation's traffic will be.

The two names for your organisation may be updated via Website >> Style Settings. They are

• Words across the header - Small device
• Words across the header - Larger device

Font and colours

ClubHub have set your website up with standard colours and fonts, with names like Paragraph, Heading 1 and Strong Emphasis. These are listed in the first editing dropdown in sections that indicate how they work...

• Block Styles apply to all the text in the paragraph
• Inline Styles apply only to the text you select
• Object Styles (only appears when editing a table) applies to the whole table.

For the sake of consistency we strongly recommend that you use these, rather than changing text in some way using the font, colour and size dropdowns. Doing so will ensure that your website retains a smart and consistent look and feel.

You can change the font your website uses if you wish

1. amend the CSSFONTFAM value via Website >> Style Settings to one of
   1. Arial
   2. Courier
   3. Georgia
   4. Lucida
   5. Tahoma
   6. Times New Roman
   7. Trebuchet
   8. Verdana
2. Tell ClubHub Support what Google Font you would like
3. Provide ClubHub Support with the font required. This process involves technical changes and will incur charges.

When a font is changed you need to test that font on all devices - Windows PC, Android, iOS etc because not all fonts work on every device. For example the common font Tahoma is not recognised by iPhones and the device's default font will be used i.e. old-fashioned Times New Roman.

Note for techos using Website >> Style Settings. The website is based upon a 16 point font. Don't use pixels if amending Style Settings, instead use percentage or em units, for example, 0.5em for half the font size, 2em for twice the size etc.

The little image that displays on a tab e.g.

can be changed. Send the image required to ClubHub Support who may be able to turn it into the required format.

Pasting Text

If you paste text from a word processing application like Word it will carry lots of font information with it. That's bad because

• the fonts won't agree with your organisation's standard
• it'll look odd
• it might display differently in different browsers and devices i.e. your page might look terrible.

Instead paste your clipboard's text via

1. the Paste as plain text icon, or
2. paste as normal but highlight the new content and then click the Remove Format icon.

Once you have removed the formatting style, then use the Paragraph dropdown to select the style required if necessary.

If you have existing webpages with suspect formatting then use the Remove Format option to correct.

Loading Images

Make sure the image is handy on your hard-drive

1. Start an edit session in UpFront
2. Edit the page in question
3. Put the cursor where you want the image
4. Press the Insert/Edit Image icon (picture of a mountain)
5. Click the Upload tab
6. Find the image on your local drive via the Browse button
7. Press Send it to the Server and wait a few seconds (or longer if it's a large image) until the screen changes and you are on the Image Info tab
8. Press OK
9. Size the image as required - see the following section for important information
10. Save the page
11. Press Refresh (and check you are happy with the result)
12. Press Publish

Note that the image has been loaded at 500 pixels wide, which is an appropriate size for the web. If that's too big or too small then refer to Image Manipulation.

The image (and any others previously loaded) can now be used on other pages without further upload. If the image is already in place and you want it on a different page as well then

1. Start an edit session in UpFront
2. Select the page for edit
3. Put the cursor where you want the image
4. Press the Insert/Edit Image icon (picture of a mountain)
5. Press Browse Server
6. Select the image
7. Press OK
8. Size the image as required - see the following section for important information
9. Save the page
10. Press Refresh (and check you are happy with the result)
11. Press Publish

Permitted File Types

• png
• gif
• jpeg
• jpg

Other file types that you might expect to be listed are not present because they are not universally used, or are very large, and many of your users would not be able to view them. We recommend that you save those images as one of the above types, and then upload that new image.

Note: some users find it useful to have a hidden page called ImageStore and to load all images there first.

For full help on loading images refer to the help for the editor used in UpFront.

Images display differently in your UpFront website depending on the size of device being used. The default is for the image to display at 90% on a small device like a mobile phone, and 60% of the browser dimensions on a PC. Thus, as you make the PC's browser bigger or smaller, the images grow or shrink.
 
When an image is placed onto a webpage while editing you should click the image and select the display style required from the Styles dropdown. UpFront provides 4 styles by default, and we can amend these 4 styles to suit your needs if requested.

Image 1: small device at 90%, large device at 60%, no border
Image 2: small device at 90%, large device at 60%, thin black border
Image 3: small device at 90%, large device at 400 pixels, no border
Image 4: small device at 90%, large device at 400 pixels, thin black border

We recommend using large device percentages where possible, and that will work well if all your images are a similar size. If they are different sizes, but you want them to appear at the same size on a PC, then using pixel sizing may be appropriate.
 
Here are the image loading options you can employ, and the likely display effect.

Do not attempt to resize an image that you have applied a style to. You'll get unexpected results. If you do this then apply style Image 5 to undo the changes, then apply the style required.

If you want the default image styles changed, then please contact ClubHub Support, or do it yourself in Website >> Style Settings (hint: search for 'image').

Loading Documents

Make sure the document is handy on your hard-drive. Note that having the document in PDF format will give much better results, especially on small devices.

1. Start an edit session in UpFront
2. Edit the page in question
3. Put the cursor where you want a link to the document
4. Type the text that you want the link to state e.g. 2016 Annual Report
5. Highlight that text with your cursor
6. Press the Link icon (picture of a chain link)
7. Click the Upload tab
8. Find the document on your local drive via the Browse button
9. Press Send it to the Server and wait a few seconds (or longer if it's a large document) until the "Your file has successfully been loaded" message appears, then press OK.
10. Now you are on the Document Info tab
11. Select the Target tab, select New Window in the dropdown (doing this means that the link will open in the new tab when clicked) then press OK
12. Save the page
13. Press Refresh (and check you are happy with the result)
14. Press Publish.

The document (and any others previously loaded) can now be used on other pages without further upload. If the document is already in place and you want it on a different page as well then

1. Start an edit session in UpFront
2. Edit the page in question
3. Put the cursor where you want a link to the document
4. Type the text that you want the link to state e.g. 2016 Annual Report
5. Highlight that text with your cursor
6. Press the Link icon (picture of a chain link)
7. Press Browse Server
8. Select the document
9. Press OK
10. Now you are on the Document Info tab
11. Select the Target tab, select New Window in the dropdown (doing this means that the link will open in the new tab when clicked) then press OK
12. Save the page
13. Press Refresh (and check you are happy with the result)
14. Press Publish.

Permitted File Types

• doc
• pdf
• xls.

Other file types that you might expect to be listed are not present because they are not universally used, or are very large, and many of your users would not be able to view them. We recommend that you use PDF in every case.

Note: some users find it useful to have a hidden page called DocumentStore and to load all documents there first.

For full help refer to the help for the editor used in UpFront.

Spreadsheets

You can load spreadsheets in UpFront but we do not recommend it, since they will display quite differently, and sometimes poorly, on some devices. Convert them to be a PDF file and you will have no display problems on any device.

Tables

Normal tables are not a good idea in a responsive website, since they will not look nice on a small device like a smartphone.

If you need a complex table with many columns and rows then we suggest that you save the content as a PDF, upload that in UpFront, and have a link to it wherever required. PDFs look great on small devices, and your users will probably already know how to navigate around them.

If you have a simple table, by following these instructions you get a table that adjusts its display depending on the size of the device being used.

1. while editing a page press the table icon
2. set the rows and columns required
3. set Headers to 'First Row'
4. press OK
5. populate your table
6. save (UpFront will do a conversion of the table into the responsive format)
7. publish
8. test on a PC and a smartphone.

Note that you cannot easily add new columns or change the headers once UpFront has converted to the responsive table format. Either update the table via the Source icon, or add a new table with the right columns (then delete the old one), or don't add set the header to First Row until the table format is assured (First Row is the trigger to convert the table).

Note that your table is the default style that can be changed if required - use Style Settings to do that.

This is another sort of table that normally ClubHub Support will set up for you. It makes each cell of the table take up whatever room is available, so that the table could be 5 cells wide on a PC, and 1 cell wide on a smartphone. See here for an example.

To use this

1. Create the table within the editor by clicking the table icon entering the rows and columns (leaving Headers as None) - the default width is 95% which you may adjust, but don't leave the % off else it'll be very small
2. After the table is created 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 Table Flex
5. Enter the text required in the table cells
6. Save the page
7. Refresh the page to see how it looks
8. Publish
9. Test on a PC
10. Test on a small device.

Note that when you edit the page again the table will be shown with a 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.

The standard table in UpFront has rows of different colours e.g. light grey and dark grey as an aid for the person viewing the data to read it easily. If you don't want these colours then create a transparent table. 

To use this

1. Create the table within the editor by clicking the table icon entering the rows and columns (leaving Headers as None) - the default width is 95% which you may adjust, but don't leave the % off else it'll be very small
2. After the table is created 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 Table Transparent
5. Enter the text required in the table cells
6. Save the page
7. Refresh the page to see how it looks
8. Publish
9. Test on a PC
10. Test on a small device.

Note that when you edit the page again the table will be shown with a 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.

UpFront allows up to 20 tables in a webpage. Exceeding that will mean you can't save your changes.

If you are anywhere near that limit you are doing it wrong - your webpage will be slow to load and hard to read. Consider the PDF advice in the Tables section above.

When a table is first created it may be difficult to see the cells. We recommend these steps to ensure you can find the cells

1. put your mouse cursor into the top left of the table
2. type xx
3. tab
4. type xx
5. continue until all cells are populated.

Then put the content required in place.

Source

When you edit a page you'll see a Source icon available. This leads you to the HTML source. There may be occasions when some users want to access this directly.

Changing a page from Hidden (and vice versa)

There is no way to do this directly, but it's easy to do indirectly.

If you have a page that has a menu option and you want it to be hidden then

1. edit the page
2. press the Source icon
3. copy all the text you find into your clipboard
4. exit that page and delete it via page >> Delete This Page
5. create a new hidden page in the normal way
6. edit it
7. press the Source icon
8. delete the text in there, and replace with your copied text
9. Save
10. Publish
11. test.

If you have a page is hidden and you want it to have a menu option then

1. edit the hidden page
2. press the Source icon
3. copy all the text you find into your clipboard
4. exit that page and delete it via page >> Delete This Page
5. create a new normal navigation page
6. edit it
7. press the Source icon
8. delete the text in there, and replace with your copied text
9. Save
10. Publish
11. test.

Getting a new font

Perhaps you want a font that is not already provided by UpFront. We can add a new font if required, though there may be a small charge for the time it takes.

If you want a new font then go and pick a Google font here and advise ClubHub Support

1. the name of the font
2. the font attributes for the one selected e.g. Bold 700
3. the pixel size
4. the colour required
5. where it should be used in the website i.e. all text, heading 1 and 2 etc

Once complete you'll need to test the font on many devices.

Note: if it's a paid font then your organisation will be meeting the costs.

Centring text and images

You can centre text by clicking into the line to be centred, and then press the Center icon.

You cannot centre an image, but you can centre the style that it appears in, which will have the desired result. So to centre an image click to the right of the image so that the cursor is touching it, then press the Center icon.

Sponsors

Sponsors want your organisation to promote their products and services, and previously having their details on your website was a good idea.

With small devices it's not a good idea to have sponsor images, since your organisation's message may not be seen because of sponsor image.

Consider other ways to get that message across.

If you want your users to be able to navigate around a page, or if you want a link to a particular part of a page then you need an anchor.

You can add an anchor by putting your cursor in the position you would like it to appear, then use the Flag icon on the editor toolbar. Let's assume you entered the name Anchor1 when you created it.

If you want to put a link to this anchor within the same page then:

1. Start an edit session for the page

2. Where you want them to jump from type go to my anchor (or similar)

3. Highlight this text and press the Link icon
4. Create a link of type Link to Anchor in the Text
5. Select Anchor1 in the first dropdown
6. Press OK
7. Save the page and publish
8. Test.

Alternatively, if you want to link to the anchor from a different page then

1. Find the name of the page containing the anchor e.g. helptext.php
2. Go to the page you want to link from and start an edit session

3. Where you want them to jump from type go to my anchor (or similar)

4. Highlight this text and press the Link icon
5. Create a link of type Other, and enter pagename.php (your page of course) immediately followed by #Anchor1 (no spaces)as the destination
6. Save the page and publish
7. Test.

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 Page >> 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 Page >> 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
6. Type the webpage name e.g. contactus.php into the URL (make sure you include the .php or .htm suffix)
7. Press OK.

If your organisation uses ClubHub's member management software then it's possible to share that data with your website. Existing examples of this are

• List member contact details
• List merchandise or classes for sale and allow click to purchase
• Show player profiles

We can develop further data sharing functions on request (development charges may apply).

Every website in UpFront should have a hidden page called sitemap containing nothing other than the text & sitemap (leave out the space between & and sitemap).

Why? Because search engines want to use it to index your website (so that people can find you on the web).

And we recommend that you put a link to it at the bottom of your sidebar (or bottom of your home page if you don't have a sidebar). It's useful to you when looking for pages, and it's useful to ClubHub Support when trying to give you support.

It's good practice to name webpages, images and PDF documents in a way that helps search engines understand the content. For example an image named dsc123.png means little to Google, but naming it football-player-scores.png makes it more likely to be highly ranking. Using a dash between the names is recommended.

If your webpages, images and PDF documents are not named in this way you may change them using functions

• Page >> Rename This Page
• Website >> Image File Names
• Website >> PDF File Names.

Notes

1. if it's likely that users have bookmarked existing pages a name change might confuse
2. after changing names and publishing use Website >> File Housekeeping to delete the old versions of pages, images or documents that have now been recreated with new names (where your website publishes to a domain).