Let's Learn

• Add a Header or Footer
• Navigation
• Fonts and Headings
• Background, Layouts and Buttons
• Adding Custom HTML, CSS, JavaScript, etc.

Add a Header or Footer

Step 1: In the Style Settings section, click Header & Footer

If you are using our old Tribute Layout you will want to be sure to select Regular or Mobile tabs to upload platform specific headers.  Our new template is mobile responsive so you only need to apply this to 1 set of pages. 

If you would like assistance switching to our All in One Donation & Tribute Template, contact your Account manager for assistance. 

Tip: If you do not specify an image for Mobile, the system will scale down the header image used for the regular website view.  

Choose Static Image or Interactive (HTML). 

• If you choose Static, click the browse button to upload your image.  
• If you chose Interactive (HTML), type or paste in the HTML code you want. 
• Any images that you link to should be hosted on a secure server beginning with https:// (SSL certificate) to avoid browser warning messages.
• Also be sure to update for both languages if you have both turned on

Tip: Choosing Static Image enables you to add an image to the header. Choosing Interactive (HTML)enables you to use HTML code to control the header content. For example, you could add links, Flash animation, or an image map to the header.

When finished, your header will be positioned on the top of each of your pages throughout your site. 

Tip: When launching a fundraiser, it's a smart idea to include the name of your fundraiser and date that it's taking place in your header. This way it's easily visible for each one of your registrants. 

To add a Footer to your website, click the “+” and follow the same steps.

Navigation

This section is no longer relevant to the updated page design and will be phased out in the future.  If you are using the old Tribute layout, talk to your Account Manager about converting your page to the updated layout.

Fonts and Headings

Let's Learn: 

• How to change all of your template fonts & headings to be applied as your master settings throughout your entire event. 

In the Event User Interface section, click Fonts and Headings

Tip:

• Select to customize your event's fonts and headings 
  • Note: if you are using our old Tribute layout you will need to update for Regular (big browser) and Mobile.  To convert your template to the updated mobile responsive design contact your account manager for assistance. 
• All Navigation headings and Body fonts are grouped for ease of use. To expand the list of pages, select Expand All or click “+”.

Each section can be edit with a colour picker

• To change the fonts, click one of the font names in the Font box.
• To change the font size, click either Relative or Absolute. (If you choose Relative, the font size will be set by the browser. If you choose Absolute, the font will be the specified size regardless of the browser used.) Then choose a size from the box to the right of your selection.
• To change the font colour, click the box below Font Colour. A colour-picker window appears where you can choose the colours.

Change the font colour in any of the following ways, then click away from the window to close it again.

• The small circle in the block on the left side of the colour-picker window shows the current colour. Drag the circle around to change the colour or click inside the box to change the colour.
• The arrows on the rainbow-coloured slider bar show the current colour palette. Drag the arrows up and down to change the colour palette.
• Type a hex colour number beside #.
• Type colour numbers in the R,G, and B boxes or use the spin buttons to select a number.
• Type colour numbers in the H, S, and B boxes or use the spin buttons to select a number.

Tips: When editing in Body, click the Switch to Advanced Mode link and more items will appear in the box. If you are an advanced user, this gives you more options.

Edit Advanced options such as

• Links: Hovered, Visiting, Active, etc

Click Save.

Background, Layouts and Buttons

Let's Learn

• Changing the background of your page
• Changing your main button colors

Instructions

Changing the background of your page

Step 1: Go to the Style Settings section of your event

Step 2: Click on Background, Layout and Buttons

Step 3: If you want to change the background of your template to a solid color, in the Background-Image section, change the Body Background Color and click Save. 

Here are some tips on selecting the color:

• The small circle in the block on the left side of the colour-picker window shows the current colour. Drag the circle around to change the colour or click inside the box to change the colour.
• The arrows on the rainbow-coloured slider bar show the current colour palette. Drag the arrows up and down to change the colour palette.
• Type a hex colour number beside #.
• Type colour numbers in the R,G, and B boxes or use the spin buttons to select a number.
• Type colour numbers in the H, S, and B boxes or use the spin buttons to select a number.

If you wish to upload an image for the background, In the Background-Image section, click on the Choose Image button.

  Step 4: If you are uploading an image,  Click on the Upload tab and then upload the background image

Step 5: Once the image has been uploaded, select it

Step 6: Specify the background image properties

Please note: There is a 7MB file size limit for image uploads. The smaller the file size for your background image, the quicker your pages will load in the browser.

Step 7: Click Save

  
Changing your template button colours

Step 1: Go to the Style Settings section of your event

Step 2: Click on Background, Layout and Buttons

Step 3: Utilizing the color picker, change the Button Text color, the Default State color, Hover State color, and Selected State color. 

Step 4: Click Save. 

In this example below you will see where button colours are reflected.  The First button is not hovered over but the second is - you can customize these colours based on your branding

Adding Custom HTML, CSS, JavaScript, etc.

You can access the HTML head of your event pages in the Custom HTML section under the Style Settings tab. 

Disclaimer: All code that you enter here is your own responsibility and by adding code in, you are at risk of breaking code for the entire page. This is the responsibility of the organization to fix, not FrontStream.