Documentation

Custom templates

CrowdfundHQ supports customization of all your site's templates and assets using Liquid Templates. Even database lookups and tons of built-in functions are there so you can make your site look exactly like you imagine.

Learn about how it works here:
Custom Templates and Database Access

Back to top

Adding Pages

Manage Site > Design > Pages

You can create as many HTML pages as you want, and they can be written in HTML or Markdown.

Click the Add Page button to add a page. Fill in the page title and options, then click save. Click Edit to edit the page settings.

The Meta Description field is optional, but when search engines index your site, they use your meta description when they create the summary of your site on in the search results.

Click Save when you're done. Your page is now added to the site and a link to the page is placed in the footer at the bottom of your site.

You can edit the page by changing the content and clicking the Save button or Ctrl / Cmd + S.

NOTE: If you are using a custom Footer HTML, then links will not automatically be added.
Links to dialogs

User the "d" - parameter to pop up dialogs from external sites: <a href='/?d=/campaign/new'>Create campaign</a>
<a href='/?d=/user/login'>User login</a>

If you need dialogs from within your site, use javascript: <a href='/campaign/new' onclick='hq.loadDialog(this);return false;'>Create campaign</a>
<a href='/user/login' onclick='hq.loadDialog(this);return false;'>User login</a>
Alternative option for the campaign form: <a class='new-campaign' href='/campaign/new'>Create campaign</a>
Back to top

Homepage Content

Manage Site > Design > Pages > Edit > Use on Homepage

You can add any content to the homepage above the featured campaigns section by selecting the Use on Homepage checkbox in the Edit dialog for the page you would like to have appear on the homepage.

How to Add a YouTube Video to your Homepage
Manage Site > Design > Pages > Homepage

When embedding a video from YouTube on your homepage, you have to add a special code to the end of your link to fix some Firefox and Internet Explorer bugs. To correctly embed a YouTube video:

  1. Go to the video on YouTube's site
  2. Click "Share"
  3. Click "Embed"
  4. Copy the embed code and paste it in your page content on CrowdfundHQ. Find the URL after the src attribute. It should look like this:
    ... src="http://www.youtube.com/embed/-38uPkyH9vI?rel=0" ...
  5. Now add this (&wmode=transparent) the end of the youtube link. Your code should now look like this:
    ... src="http://www.youtube.com/embed/-38uPkyH9vI?rel=0&wmode=transparent" ...
Back to top

Create Terms Page

Manage Site > Design > Pages > Edit > Use as Terms Page

In the Add new page dialog, check the Use as terms page checkbox so it will be automatically linked to on all revelant areas of your site.

Back to top

Changing Text

Manage Site > Configuration > Settings > Language > Edit Translations

To change the content of your site, search for the text you want to change, update it with text or HTML, and click outside the box to save.

This feature is incredibly powerful, allowing you to easily translate your entire crowdfunding site, or just change a few keywords to make the wording on your site just right.

Back to top

Custom Designs

Manage Site > Design

In addition to the one-click options found in Manage Site > Configuration > Appearance, you can easily customize the look & feel of you application using HTML, Markdown, CSS, Javascript and media files using our syntax highlighted online editor based on Code Mirror.

Custom CSS
Manage Site > Design > Styles / Libraries

You can use CSS to override the default theme CSS here. Choose the Base theme if you want to write a theme from scratch as it does not include a separate file.

Hint: Use a Color Picker to get the HTML Hex Values for colors.

Add your CSS to Manage Site > Design > Styles to have them appear inline in your site layout. We recommend uploading the files to Files when you are done and reference them in Manage Site > Design > Libraries like so:

<link href="url_to_your_file.css" media="all" rel="stylesheet" type="text/css">

List of Site Files

All of the assets, including images, CSS and Javascript, can be found here:

» Site Github Repository

Here are the main CSS files with a starting point file:

The Base theme is doesn't have a separate file and is the cleanest starting point if you're looking to create your own theme from scratch.

In addition to browsing the files, you can use a tool like Firebug or browser inspectors to see the styles as well.

Favicon
Manage Site > Configuration > Appearance > Images > Favicon URL

A favicon is the small (16, 32 or 64 px height/width) icon next to the url on your browser. You can add your own favicon by uploading your ico or png file to the files section of your account, then copy/pasting the URL into the favicon input.

Custom Navigation / Footer
Manage Site > Design > Navigation / Footer

To change the header or footer HTML, click the Load defaults button to automatically have all the current HTML from your Header / Footer. To revert back to the default CrowdfundHQ HTML, just clear the field and save it.

Custom Javascript
Manage Site > Design > Scripts

You can add custom javascript to your site, no problem.

We do not help troubleshoot or fix your javascript. If you break your site, delete the custom javascript field and save it.

Back to top

Using Markdown

Content added to your CrowdfundHQ site can be formatted using HTML or Markdown. Markdown converts what you write into HTML. MarkDown formatting is used when adding pages, campaigns, updates, and comments. Here are the basics:

This is a Large Headline (H1)
=============================

This is a paragraph. This is _italic_ and this is __bold__. This is also *italic* and **bold**.

This is a new paragraph. Here's a link example: [my link text](http://www.yoursite.com).

Images are formatted like this (you can leave the "Title" out if you want): ![text if the image doesn't load](http://www.URLofTheImage.com "Title of the Image")

This is Smaller than the Large Headline (H2)
--------------------------------------------

* Here's a list
* List item 2
* Another list item

### This is an even smaller Headline (H3)
1. This is an ordered list
2. These lists have numbers
3. A third item


Give it a try- you'll get the hang of it quickly. Alternatively, any markdown area can also take HTML.

Back to top

Customize Emails

Manage Site > Design > Emails

The Emails tab allows you to modify emails that your site sends. You can send test emails and easily use the allowed tags for each email (ex - %campaign.url).

Click "Load defaults" to automatically add all the current email text to the field so you can simply modify, save, and test your custom crowdfunding site emails.

Back to top

Custom Form Fields

Manage Site > Configuration > Fields

You can add custom form fields when a user signs up and when a user creates a new campaign. This enables you to collect more information about users.

Checkboxes explained:
  • Enabled: Check to enable this form field.
  • Required: Forces the user to enter a value.
  • Editable: The user can change the content of this field later, when logged in to their account.
Note that you can always change the content of all fields for all users from Manage Site > Campaigns / Users
Advanced: Custom form behavior or validations

Paste this into Manage Site > Design > Scripts to add an onclick handler to the email field for the site sign up form:

<script class='loadscript' data-repeat='true'>
  var signupForm = document.querySelector('#dialog_content form[action="/user/create"]');

  if(signupForm) {
    var emailInput = signupForm.querySelector("input#email");
    emailInput.addEventListener('click', function() { alert("Hello from input"); });
  }
</script>

Then go to the Sign up form on your site and click the email input to see the alert.

NOTE: The loadscript class makes sure the script gets loaded once when you load a dialog.
The data-repeat option makes sure the script gets loaded every time.

Back to top

Embedding Content

Most textareas support embedding content by entering a normal link (URL). The link automatically converts into HTML that shows as embedded content on the page (video, player or map). We currently support Youtube, Vimeo, Ted, Google Maps and Soundcloud.

NOTE: Check "Autoconvert" in the page edit form to use this on a custom page.

Examples of what the links should look like to be properly converted:

  • Youtube: https://www.youtube.com/watch?v=FO9OmFIavog
  • Vimeo: http://vimeo.com/59992287
  • Ted: http://www.ted.com/talks/stephen_wolfram_computing_a_theory_of_everything.html
  • Soundcloud: https://soundcloud.com/the-fishbowl-w-scrubfish/fishbowl-show-with-scrubfish
  • Google Maps: https://maps.google.com/maps?q=oslo&hl=en&sll=37.020098,-95.712891&sspn=50.018647,92.724609&hnear=Oslo,+Norway&t=m&z=11

Google recently updated their maps to a new format. To make embedding google maps work, first switch back to Classic Google Maps.

Looking for how to embed campaign badges? Check out this tutorial.

Back to top

Setup Ads

Manage Site > Configuration > Sharing > Ads

There are 5 spaces at the bottom of the layout where you can add linked images. You can use these to promote campaigns, other websites, or anything you want.

Back to top

Menu