Your settings for your custom event should be left as simple as possible:

1. Use the default styles for text (Foreground Color), Links and Background when you are creating a custom event. They can all be overwritten by the custom stylesheet you create if you wish.
2. Choose to have a Default (Full Width Banner) for both Layout Options and homepage Settings – it will give you the most flexibility top layout your custom header area.
3. Check the Display Menu checkbox if you wish – it will generate DOM elements for your site pages (though it may output system-generated CSS may then have to override in your custom stylesheets later.

The Manage Menu tab contains the settings for you Navigation menu – you can set up a custom menu here, or do it later – it won’t affect our designing/ CSS styling workflow.

Content input in Event Creator

Now we have our basic event, I can walk you through the various fields in the Event Creator admin dashboard which you are going to need.

Using the GoFundraise Custom Framework provided, you

• develop a GoFundraise site on your local machine
• host your resources (such as images, scripts, media, external stylesheets etc) on an FTP server, and link them into your layout using absolute links eg src=”http://www.yoursite.com/images/image.jpg”.

Once you the site functioning locally, you will be required to copy and paste your code into various locations in Event Creator in order to get it working with the GoFundraise system.

Including GoFundraise widget codes in your custom HTML for secure Forms, Leaderboards, Amounts Raised, will then pull your event data into your custom pages. These widget areas can also be styled however you wish.

Below are the various locations we will be referring to on Event Creator throughout this documentation:

1. Menu & Content > Pages & Content > Advanced Styling

This field is where you will paste your custom CSS styling for your site.

2. Menu & Content > Pages & Content > Layout Options > Header

Code for the Custom Header can be pasted into this field. You will want to paste the code for your top banner <div>s into this area. The header can be further customized for individual pages as well (more on that later).

You may choose to include Javascript resources here, or draw in other external resources. Loading jQuery plugins requires a specific script in order to include them – see the 04-CUSTOM-HEADER.php notes in the Framework Files section.

Click the Layout Options > Edit button, then click Header, then the Source button in order to paste your code.

Code for the customizable part of the site Footer can be pasted into this field.

The footer can be customized for individual pages as well (more on that later).

You can include <script> tags for Javascript resources here also if required.

Click the Layout Options > Edit button, then click Footer, then the Source button in order to add code.

Individual Pages have a Main Content area where you can paste the bulk of your HTML elements for the site.

<style> and <script> tags can be included as well at any point, depending on your needs. **

Make sure ‘Main Content’ is selected under Page Settings, then click the Source button in the main content window to add code.

Pages can have individual styling applied to them with their own Advanced Styling styles. These will be applied in addition to the site-wide Advanced Styles mentioned earlier. **

Pages can also have a unique Header and Footer. These will REPLACE the default Header and Footer, so you will need to copy and paste all the HTML you require for the page header and footer.

Make sure ‘Header’ or ‘Footer Content’ is selected under Page Settings, then click the Source button in the main content window to add code.

** It is recommended, that you try to keep all your styles limited to the Advanced Styling field, accessed from the Pages & Content page.

It is also best that you place all <scripts> in one place, in your Custom Header. jQuery scripts will have to be loaded at window.onload – see notes below on how to get these working.

GoFundraise Designer Framework

What is the framework

This small framework enables you to simulate a GoFundraise Event site on your local machine, so that you can confidently develop the look-and-feel and functionality of the site, and know that it will work when you paste your code into the Event Creator system.

In order to get an efficient workflow happening so you can develop your site on your local machine, you will do best to:

• set up a basic local Apache server running PHP on your local computer – XAMMP on OSX and Windows;
• set up a Virtual Host for your site in your server environment eg. http://testsite.dev, running fro example from a local folder Sites/testsite.dev
• This folder can now contain all the php, image and javascript files you need to a create a development environment for a GoFundraise site.

XAMPP is available for free from https://www.apachefriends.org/download.html. Basic setup instructions are available in the screencast.

You don’t need to know PHP for use in this setup – it is really the same as working with HTML pages, but using PHP allows us to split our HTML pages into manageable bits for developing for the GoFundraise platform.

NOTE: GoFundraise does not provide helpdesk support for setting up local server environments or PHP beyond the basic instructions in the screencast. You had best talk to your IT people at work if you have any problems getting this working. There are also heaps of resources available on the internet – just Google it!

We can email the GoFundraise Designer Framework files to you or your designer on request