2. Framework & Event Creator
This tutorial covers:
2. Framework & Event Creator
1. Login to Event Creator, go to the Admin panel and click Edit for your event.
2. Go to the Menu & Pages tab and choose Pages & Content from the drop-down.
Your settings for your custom event should be left as simple as possible:
- 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.
- 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.
- 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).
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).
Click the Layout Options > Edit button, then click Footer, then the Source button in order to add code.4. Menu & Content > Pages & Content > My Pages > Edit > Page Settings > Main Content
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.5. Menu & Content > Pages & Content > My Pages > Edit > Page Settings > Advanced Styling
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. **6. Menu & Content > Pages & Content > My Pages > Edit > Page Settings > Header / Footer Content
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.Set up a development environment with local Apache server (XAMPP)
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
XAMPP is available for free from https://www.apachefriends.org/download.html. Basic setup instructions are available in the screencast.No PHP knowledge required
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!Downloading the GoFundraise Designer Framework
We can email the GoFundraise Designer Framework files to you or your designer on request