1. Introduction
This tutorial covers:
1. Introduction
Due to the security concerns of processing payments and keeping client information safe, pages being built for GoFundraise must be hosted within the Event Creator system.
Event Creator is capable of incorporating any custom design objects you may want to include on your site – Social Media, video, slideshows etc.
However, because this online platform was designed with end-users and campaign managers, rather than designers in mind, its WYSIWYG interfaces do not make for the most efficient workflow for web designers.
Additionally there are styles and scripts that may conflict with design elements you are attempting to implement, if they are not declared in the right order in your HTML.
This guide is here to help you to bypass some of these problems and incorporate your fully custom, branded web design and development workflow into Event Creator to give your audience the full GoFundraise experience.
Who this guide is for
This workflow assumes that you are familiar with GoFundraise Event Creator and the functionality it offers out of the box. If not it is suggested that you first go through the videos and resources available at http://support.gofundraise.com.au, or attend one of the weekly training webinars.
It also assumes you are proficient with HTML and CSS, and use a bit of Javascript/ jQuery.
This workflow also incorporates the use of PHP – however no PHP knowledge is really required. You will need to set up a local Apache server environment to run the framework, but by following the steps described, you will see how easy this is and how much time it will save you in developing your site.
What is the GoFundraise Designer Framework?
The framework is a PHP website that acts as a simulation of a GoFundraise Event site. It contains all the pieces that make up GoFundraise pages. Due to functionality and security concerns of the GoFundraise platform, some of the elements loaded into a GoFundraise page are in the user/designer’s control, and some are system generated. In addition there is some standard CSS styling and positioning of elements that have to be overridden by the designer in order to get a completely custom look for a site. However, none of this will stop you creating a page that can look exactly how you want it to, with Javascript functionality, CSS Frameworks, responsive behavior etc., though you will find yourself having to override some of the system-generated CSS styles along the way.
Event Creator fields and how they relate to the framework
GoFundraise Event Templates are assembled from HTML code copied into a number of different input fields within the GoFundraise system (eg there are different fields for the Header, Footer, Main Content, Advanced CSS Styling etc).
Event Creator then takes your custom HTML elements, CSS styles and included Javascript and compiles your code into a single page along with the GoFundraise system scripts, CSS and layout elements.
Setting up a basic Event for customisation
First we’ll set up a basic event, containing the minimum system-generated content.
Event Creator is capable of incorporating any custom design objects you may want to include on your site – Social Media, video, slideshows etc.
However, because this online platform was designed with end-users and campaign managers, rather than designers in mind, its WYSIWYG interfaces do not make for the most efficient workflow for web designers.
Additionally there are styles and scripts that may conflict with design elements you are attempting to implement, if they are not declared in the right order in your HTML.
This guide is here to help you to bypass some of these problems and incorporate your fully custom, branded web design and development workflow into Event Creator to give your audience the full GoFundraise experience.
Who this guide is for
This workflow assumes that you are familiar with GoFundraise Event Creator and the functionality it offers out of the box. If not it is suggested that you first go through the videos and resources available at http://support.gofundraise.com.au, or attend one of the weekly training webinars.
It also assumes you are proficient with HTML and CSS, and use a bit of Javascript/ jQuery.
This workflow also incorporates the use of PHP – however no PHP knowledge is really required. You will need to set up a local Apache server environment to run the framework, but by following the steps described, you will see how easy this is and how much time it will save you in developing your site.
What is the GoFundraise Designer Framework?
The framework is a PHP website that acts as a simulation of a GoFundraise Event site. It contains all the pieces that make up GoFundraise pages. Due to functionality and security concerns of the GoFundraise platform, some of the elements loaded into a GoFundraise page are in the user/designer’s control, and some are system generated. In addition there is some standard CSS styling and positioning of elements that have to be overridden by the designer in order to get a completely custom look for a site. However, none of this will stop you creating a page that can look exactly how you want it to, with Javascript functionality, CSS Frameworks, responsive behavior etc., though you will find yourself having to override some of the system-generated CSS styles along the way.
Event Creator fields and how they relate to the framework
GoFundraise Event Templates are assembled from HTML code copied into a number of different input fields within the GoFundraise system (eg there are different fields for the Header, Footer, Main Content, Advanced CSS Styling etc).
Event Creator then takes your custom HTML elements, CSS styles and included Javascript and compiles your code into a single page along with the GoFundraise system scripts, CSS and layout elements.
Setting up a basic Event for customisation
First we’ll set up a basic event, containing the minimum system-generated content.
- Login to Event Creator, go to the Admin panel and click Edit for your event.
- 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.