4. Index.PHP
This tutorial covers:
4. Index.PHP
Framework Files
Below is a quick run-down on the individual files in the framework and how they contribute to simulating a GoFundraise event page. (The files you will be editing are marked in orange.)
Main Files
index.php
This file is the key to the framework – it uses a simple php ‘include’ script to pull all the separate HTML files into a single page when the site loads in the browser, simulating the process of the GoFundraise system when it generates your event page.
Note: If you are developing multiple pages for your site, you will at some point be duplicating this file and modifying it for your other pages. There is an example of this technique in the framework – see notes on about.php, the about (folder). Also see the notes for 05-header.php should you want to set up navigation menu items.
01-header.php
Displays the GoFundraise default header (which features for every GoFundraise event).
Adds a number of key stylesheets and styles loaded for the GoFundraise system – these are include in the system-styles folder and the Content folder. Some of these stylesheets are quite extensive, but you should easily be able to override them using the .custom-design prefix for your styles – see notes for 04-CUSTOM-HEADER.php.
Note that the <body> tag occurs in this file, and many <style> elements and scripts are included within <body>, though this shouldn’t cause any problems.
02-ADVANCED-STYLING.css
Put all your custom styles in here. For accurate overriding of GoFundraise styles, ensure that you add ‘.custom-design ‘ as a prefix to all of your styles.
See notes on 04-CUSTOM-HEADER.php and less/02-ADVANCED-STYLING.less.
Event Creator Location: copy and paste into Menu & Content > Pages & Content > Advanced Styling
03-header.php
Starting tag for the visible header/banner <div> for your event.
If you have set up your blank event correctly in Event Creator this should simply be a full-width div.
04-CUSTOM-HEADER.php
This part of the framework has a number of purposes:
1) In this file you can include the HTML elements for your custom banner for the page (though you may have other ideas and not want to have a banner as such at all. It’s completely up to you.
2) As part of the setup to get your styling in 02-ADVANCED-STYLING.css working without conflicts, it is important to leave in the included javascript line which adds the class of “custom-design” to your body tag, allowing for custom styling.
document.getElementsByTagName('body')[0].className+=' custom-design';
3) This section is also a good spot to include any custom javascript for the page. Of course this is quote early in the DOM structure for the page to be including javascript, so you may need to add some commands within the window.onload listener. This is crucial if you are wanting to use the jQuery library included in the bundle.js / bundled scripts that Event Creator loads into the page. Don’t load jQuery or modernizr yourself – these are already included in the bundled scripts in the footer.
4) If you want to load a jQuery plugin, such a slideshow script (example included in the framework is Nivo Slider http://dev7studios.com/plugins/nivo-slider/), this obviously needs to happen after the jQuery library has loaded. As you cannot include the script with a <script> tag further down the page, the workaround for including jQuery plugins is to use the jQuery .getScript() function with window.onload:
<script type="text/javascript">
window.onload = function(){
// load/include plugin script
$.getScript("http://media.gofundraise.com.au.s3.amazonaws.com/custom-framework/nivo-slider/jquery.nivo.slider.js",
// and once loaded, initialise
function( data, textStatus, jqxhr ) {
$('#slider').nivoSlider();
});
}
</script>
Because of the way Event Creator pages are locked down, this is the only way to include and run your jQuery and jQuery plugins. It’s a workaround, but works well.
Event Creator Location: copy and paste into Menu & Content > Pages & Content > Layout Options > Header
05-header.php
This closes the div#header
Adds the EventCreator generated menu with all styles. Because these styles are included after your own ADVANCED-STYLING.css, it is important to have the .custom-design prefix to all your custom styles if you wish to override these.
This file also contains the <div class=“navigation”>, the generated menu of Event Creator pages. For the purposes of testing your design, you could modify the links in the <div class=”gf-menu-eventcreator”>, just be aware you will need to set these pages up manually in Event Creator once you copy over your design. See notes on about.php and about(folder).
Start of div#mainContent.
06-MAIN-CONTENT.php
The main HTML elements of your page.
Event Creator Location: copy and paste into Menu & Content > Pages & Content > My Pages > Edit > Page Settings > Main Content
07-style-tag.php
Closing tag for div#mainContent. Starting style tag or individual Page custom styles.
08-PAGE-STYLES.css
Each page on the GoFundraise site has its own Advanced Styling field, which can be used to add further page-specific styling if you wish.
I don’t think there is any particular advantage in including styles separate to your main site-wide stylesheet in ADVANCED-STYLES.css, but the option is here.
Event Creator Location: copy and paste into Menu & Content > Pages & Content > My Pages > Edit > Page Settings > Advanced Styling
09-footer-tag.php
Closing Styles tag. Opening div.footerContent tag.
10-CUSTOM-FOOTER.php
Add HTML elements for your custom footer here.
Event Creator Location: copy and paste into Menu & Content > Pages & Content > Layout Options > Footer
11-footer-gf.php
Closing div for custom footer. bundle.js is included here, containing a number of scripts used by GoFundraise events.
GoFundraise default footer also inserted here (appears below your custom footer).
For reference
Below is a list of the javascripts that make up the bundled scripts included in GoFundraise. For notes on referencing these files with your own javascript, see the notes in 04-CUSTOM-HEADER.php.
jquery-1.7.2.min.js
json2.js
stacktrace.js
modernizr-latest.js
jquery-ui-1.8.21.min.js
jquery.form.js
jquery.pnotify.js
jquery.validate.js
jquery.validate.unobtrusive.js
jquery.ba-bbq.min.js
jquery.mtz.monthpicker.js
kendo/kendo.all.min.js
kendo/kendo.aspnetmvc.min.js
kendo/cultures/kendo.culture.en-AU.js
kendo/cultures/kendo.culture.en-NZ.js
kendo/cultures/kendo.culture.en-GB.js
kendo/cultures/kendo.culture.en-US.js
kendo/cultures/kendo.culture.fr-FR.js
Other items
All of the below files may be modified as needed
extras (folder)
The extras folder contains HTML elements for mocking up styles for GoFundraise Widgets.
GoFundraise Widgets are the ‘shortcodes’ that add data from the GoFundraise system to your page based on your account/ event, such as Leaderboards, Amounts Raised etc. These may be included at any point in Header, Footer or Main Content. Normally users use a button in the Event Creator WYSIWYG to generate these, but they are very easy to set up manually. Examples of these are included in a file Reference > Widget_Codes as part of the GoFundraise Custom Framework. eg
[fundraiser eventId = 3435 size = 3 mode = Individual renderCss = false]
These shortcodes will pull in data related to your event according to the ‘eventId’ that you enter.
They can also contain the parameter renderCss = false so that styles are not generated which you will have to override.
This folder contains examples of HTML elements as they would be generated by GoFundraise widgets. These are provided so you can temporarily paste these into your pages for developing styles for these system-generated elements.
Note: once you have finalised your design and before you copy your code to Event Creator these placeholder widget HTML elements will have to be removed from your template and replaced with the required GoFundraise Widget code, so that these elements can be system-generated and linked to your data within the GoFundraise system.
- form-register.php
- widget-amount-raised.php
- widget-fundraisers.php
about.php
If you have several different pages to your GoFundraise site, you will want to follow these steps:
- copy the index.php file and give it the name of your new page eg about.php
- create an empty folder with your pages name eg about
- copy the files 04-CUSTOM-HEADER, 06-MAIN-CONTENT and 10-CUSTOM-FOOTER into that folder, then rename them with your page name as a suffix eg 06-MAIN-CONTENT-about
- modify your new about.php to point to your new custom files eg
<?php include '01-header.php'; ?>
<?php include '02-ADVANCED-STYLING.css'; ?>
<?php include '03-header.php'; ?>
<?php include 'about/04-CUSTOM-HEADER-about.php'; ?>
<?php include '05-header.php'; ?>
<?php include 'about/06-MAIN-CONTENT-about.php'; ?>
<?php include '07-style-tag.php'; ?>
<?php include '08-PAGE-STYLES.css'; ?>
<?php include '09-footer-tag.php'; ?>
<?php include 'about/10-CUSTOM-FOOTER-about.php'; ?>
<?php include '11-footer-gf.php'; ?>
Your new page will now be available locally at yoursite /about.php.
If you want to also modify the GoFundraise navigation menu, you can do this in 05-header.php – just look for the <div class=”gf-menu-eventcreator”>. Again, be aware that the actual menu for the site will need to be manually set-up in Event Creator when you copy over your design code to Event Creator.
about (folder)
See above about.php notes.
Files:
- 04-CUSTOM-HEADER-about.php
- 06-MAIN-CONTENT-about.php
- 10-CUSTOM-FOOTER-about.php
less (folder)
If you are used to developing with a CSS preprocessor such as LESS or SASS, you could use the included LESS file for creating your advanced styles.
The advantage of this is obviously that you would not need to manually add .custom-design to all of your styles – your preprocessor will do this for you. Preprocessors also have the advantage of being able to include browser prefixes and a whole lot of other timesavers.
Files:
- 02-ADVANCED-STYLING.less
NOTE: GoFundraise does not provide support for SASS, LESS or preprocessor issues.
Reference (folder)
- Some reference files for setting up a Virtual Host with XAMPP
- Examples of the GoFundraise Widget codes and the HTML they generate.
Files:
- hosts (Windows).rtf
- httpd-vhosts.conf (XAMPP).rtf
- WidgetCodes.html