Individualising fundraising campaigns with CSS and Javascript

Back to the homepage

Individualising fundraising campaigns with CSS and Javascript

You can match the look of your Fundraising Campaign Tool individually to the website using custom CSS statements. Individual styling allows you the greatest possible flexibility in the design.

Please note that Fundraising Campaign Tools are not included in all FundraisingBoxes. For more information, please see our pricing page.

Procedure
You can style the corresponding donations action tool with your desired CSS and pictures on the basis of our current HTML /CSS . Please do not copy our entire CSS, but only change the places you want. Our CSS should serve as an aid for the IDs and classes only, which you can also find out, for example by using Firebug on Firefox.

The URL for the fundraiser CSS file is:
https://secure.fundraisingbox.com/fundraisingPage/css/style.css

The resulting CSS has to be entered into the  theme Settings of your fundraising campaign tool. It will automatically be embedded as the last CSS in addition to all others, by which you can override or expand all previous definitions.

If you subsequently make changes to your CSS, they are immediately visible. If you do not want to use the existing design template and rather style everything from scartch yourself, select "Don't load default stylesheets" in the settings.

SSL encryption
The Fundraising Campaign Tools are delivered with SSL encryption ("https"). If you want to use your own elements, such as images and fonts, you must also upload these to a server with SSL support (or SSL-enabled storage solutions, such as AWS S3 or CloudFront) and absolutely reference your CSS accordingly. If you use items without SSL encryption, the browser no longer recognises the page as secure.

Since not everyone owns an SSL certificate or wants to buy it just for this, you also have the option to upload items to your FundraisingBox. Go to Settings > My Customer Account and there to the tab Documents & Files. Now select "Direct Link file" and upload the files.

Normally files uploaded here are not visible or accessible from the outside, with these files however you now see a so-called "direct link", which makes the file available to the public via a "key". You may now use this HTTPS address as a path in your CSS.

CSS Examples
Please refer to our seperate Help Center article with CSS examples .

Javascript
With the help of our own JavaScript you have almost full access to the Fundraising Campaign Tool and can adjust it according to your wishes. Since you can change the HTML with Javascript almost limitless possibilities of individualisation are available to you.

Your own Javascript can be entered under Settings > Fundraising campaign tool in the tab design . The Javascript library jQuery is already loaded and ready to use by default.

It is possible to use wildcards, which will then be replaced with the appropriate values. The following placeholders are supported:

{{expires_at}}
{{expires_at_de}}
{{has_image}}
{{fundraiser_name}}
{{fundraising_page_title}}
{{description}}
{{days_left}}
{{link}}
{{admin_link}}
{{project_id}}
{{project_name}}
{{category}}
{{status}}
{{organisation_name}}
{{received}}
{{goal}}
{{goal_de}}
{{goal_en}}
{{received_de}}
{{received_en}}
{{salutation}}
{{title}}
{{first_name}}
{{last_name}}
{{full_name}}
{{formal_greeting_de}}
{{salutation_de}}
{{address}}
{{postcode}}
{{city}}
{{country}}
{{country_de}}
{{email}}
{{action_info}}   "New" after the creation of a campaign

For example, if a tracking code should only be installed on the success side, this can be done as follows:

{% if action_info == "new" %}
// Tracking code
{% endif %}

Please note that your own Javascript should be created only by experienced Javascript programmers because an incorrect code could affect the functioning of the Fundraising Campaign Tool.

JSON
If you even want to create a completely individual fundraising Campain Tool, you can achieve this with the help of JSON. JSON is a generally accepted standard in the Internet that can be easily processed by all programming languages. Using the displayed address, you can always get the latest information about the campaigns in your programming.

You do this under Settings > Fundraising Campaign Tools > JSON address.

Please refer to our Developer Zone for Technical information:
https://developer.fundraisingbox.com/v1.0/docs/fundraising-page-json-api

Note:
The "Javascript" and "JSON" function are not available in all FundraisingBoxes.

Export to PDF