Updating The Footer

When it comes to site maintenance this is the most difficult task for many reasons:

- You must be proficient in HTML when it comes to images, tables, lists and links
- If you make a mistake with the HTML that the editor cannot render it may delete the entire footer
- You must understand there is NO VERSION CONTROL. If you mess up or the editor deletes the footer you need to be prepared. If you didn't know what was there or how it worked this could be difficult.
- If using an image unless the image has no "white space" background your image MUST have a transparent background. Creating one requires an image editor capable of transparent backgrounds and beyond the scope of this page.
- For consistency the height of the images should be the same (currently 50 px). You can use html to do this but that impacts performance. It's better to resize the image which requires an image editor.
- Using the back button will unlikely undo your changes.

At a high level the site footer consists of a reference to our club detail (mailing address, phone number , email, facebook link, etc) followed by a series of image and/or text based references to our sponsors. Updating these sponsor references can be a challenge. This page provides high level objectives followed by details on how to do it.

A text reference looks as follows. To add another text reference, copy an existing td stanza and replicate it in the location you want the new reference to be. Change the text in red to represent the new sponsor. To remove a reference simply remove the entire td stanza.

<font size="2"><b>SPONSOR NAME</b></font><br>

Sponsor Address<br>

Poughkeepsie, NY 12603<br>

845 485-9999

</td>

An image reference is as follows. To create a new reference copy an existing li stanza and replicate it in the location you want the new reference to be. Change the URL link as shown in red. The tricky part is to reference the image. Unlike the rest of the site the footer user are two types of image links. When you initially put an image in the footer the link looks like <img src="/a/topsc.org/www/config/sponsor.png" border="0">. These links are much easier to use because you can find them easily based on the name of the uploaded image. However the editor converts this type of link to an internal google pointer which looks like <img src="wuid:gx:664ede4c8b1f8a8d" border="0">. You'll notice when the editor changes the image link because it will no longer display the image it will display a broken image that still works. Of course mapping this pointer back to an image can be a challenge. Using the href stanza prior to the image is about the only way to do it outside modifying HTML.

</a>

</li>

Details

Now that you understand the high level we'll show how it's done. From Manage Site -> Site Layout you should see this following. Click on edit footer content to continue ...

You should see something like the following screen.

1. Click on the <HTM icon.
2. When you get to the HTML content copy it all and save it in Google Docs as a backup. Name the file footer{date}.
3. You may also choose to edit the HTML in an editor that has more capability than the editor provided
4. If you do the step above then paste your modified HTML back into the window and preview

As shown above if you are making a text or image change copy the appropriate stanza an modify it.

Getting an image link

The recommended approach is to create a "sand box" to play in. Using the <HTM interface editor at the very bottom of the HTML add something like:

<br>

Add Image here

Make sure your cursor is at the end of the "Add image here" and add the image using the "add an image" dialogue as shown below. You should end up with something similar to

<br>

Add Image here

Copy the text in red to your li stanza above and delete your "sandbox".