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

Adding 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.

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>

Homepage Content

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

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" ...

Create 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.

Changing Text

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.

Custom Designs

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

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:

• Starting point file
• Main application file
• Responsive mobile styles

• ---

• Universal styles
• Icons
• The grid system
• CSS Reset
• Blog
• Uploader

• ---

• Neue theme
• Stream theme
• Breeze theme
• Corporative theme
• Academia theme
• Dark theme
• Light theme
• Fresh start theme
• Open sky theme
• World arts theme

• ---

• Classic badge
• Icons badge
• Neue badge

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

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

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

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.

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.

Customize 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.

Custom Form 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.

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.

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.

Setup 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.