{"__v":13,"_id":"555e66ed750e240d00cc2f46","category":{"__v":12,"_id":"556f6216ebba950d008e94e6","pages":["556f6a29fc3aa80d00e1ac1a","556f6a58ebba950d008e9514","556f6a67ebba950d008e9516","556f6aee9893290d00988caa","556f76669893290d00988cf8","5581e3cc8625220d00429ec0","5583149fea39a9390022436a","5584a55bbb43b42300f11c78","5592041c5248431900977161","5631081d242cda1900198b50","5647785436961e0d005c6278","56c1f006d9e8a90d00f8890f"],"project":"555e500957fe0a0d00c8f1e7","version":"555e500957fe0a0d00c8f1ea","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-06-03T20:22:46.897Z","from_sync":false,"order":6,"slug":"advanced-setup","title":"Advanced Customization & Integrations"},"parentDoc":null,"project":"555e500957fe0a0d00c8f1e7","user":"550c941bd1063b2d00359239","version":{"__v":13,"_id":"555e500957fe0a0d00c8f1ea","project":"555e500957fe0a0d00c8f1e7","createdAt":"2015-05-21T21:37:13.474Z","releaseDate":"2015-05-21T21:37:13.474Z","categories":["555e500957fe0a0d00c8f1eb","555e5fcedf54680d001800db","555e60d7df54680d001800fb","555e6766df54680d00180118","556f4d5debba950d008e9462","556f60959893290d00988c5b","556f6216ebba950d008e94e6","556f6b2aebba950d008e951a","556f71b6fc3aa80d00e1ac55","5570a30bcc189a21001ab44c","56ba3656ce5d540d00e2d789","56bce73a3ad5140d00055345","592874f7bdc27e1b00e571b1"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-05-21T23:14:53.566Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":true,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"Tilt/Open provides nearly complete control over the look and feel your crowdfunding campaign.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Adding Your Own HTML Elements\"\n}\n[/block]\nTo really customize the look and feel of your crowdfunding page, start by clicking 'edit campaign' and scrolling to any one of the following sections:\n\n* Primary Call to Action Description\n* Campaign Description\n* Checkout Sidebar Content\n* Confirmation Page Content\nFrom any of these sections, click \"source\" to switch to the HTML editor as shown in the following screenshots.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/QVHVKd4bRvGiLhSdIen1_Screen%20Shot%202014-12-14%20at%202.32.40%20PM.png\",\n        \"Screen Shot 2014-12-14 at 2.32.40 PM.png\",\n        \"708\",\n        \"376\",\n        \"#8b5d50\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nNow click the Source tab.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/ZeVUOHIgSLGJl4KJXXy8_Screen%20Shot%202014-12-14%20at%202.32.49%20PM.png\",\n        \"Screen Shot 2014-12-14 at 2.32.49 PM.png\",\n        \"709\",\n        \"351\",\n        \"#856359\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nFrom here, you can use headers, paragraphs, images, divs, and script tags to add your own navigation bars, libraries, image galleries, and other features.\n\nTo style these elements, head to the 'Customize' tab. \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Customizing with CSS\"\n}\n[/block]\n\n**Resources for identifying CSS hooks**-\n* [Google Chrome Developer Tools](https://developers.google.com/chrome-developer-tools/)\n* [Mozilla Firefox Page Inspector](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector)\n* [Apple Safari Developer Resources](http://www.apple.com/safari/features.html#developer)\n\nInspecting elements is simple with Google Chrome:    \nJust right click on the element you want to inspect and choose 'inspect element' from the menu.\n\n![Chrome Inspect Element gif](https://s3.amazonaws.com/crowdhoster/github_assets/inspect.gif)\n\n**Resources for hex color values**-\n* [FlatUIColors.com](http://flatuicolors.com/)\n* [BrandColors.com](http://brandcolors.net/)\n* [Adobe Kuler (iPhone)](https://itunes.apple.com/us/app/adobe-kuler/id632313714?mt=8)\n\n***\n\n## Where do I place custom CSS?\nPaste all custom CSS into the text field found under the \"Customize\" tab in the admin panel.\n\nIt is easiest to edit the CSS in a text editor and paste in the code once you're happy with it.\n\n![Paste your custom CSS in the space provided under the \"Customized\" tag](http://i.imgur.com/63oA1fP.png)\n\n## Contribute button color\n\n![](https://s3.amazonaws.com/crowdhoster/github_assets/conrtibute-button-pre.png)\n\nReplace every instance of `#34495e` in this code snippet with the hex color value of your choice to change the button color.\n\n```\n.blue_button {\ndisplay: inline-block;\ncolor: #fff;\ntext-shadow: 0 -1px 1px rgba(0,0,0,0.37);\n-moz-box-shadow: 0 1px 1px rgba(255,255,255,0.92),inset 0 -1px rgba(0,0,0,0.22);\n-webkit-box-shadow: 0 1px 1px rgba(255,255,255,0.92),inset 0 -1px 1px rgba(0,0,0,0.22);\nbackground-image: #34495e;\nbackground-image: -moz-linear-gradient(90deg, #34495e 0%, #34495e 100%);\nbackground-image: -o-linear-gradient(90deg, #34495e 0%, #34495e 100%);\nbackground-image: -webkit-linear-gradient(90deg, #34495e 0%, #34495e 100%);\nbackground-image: linear-gradient(90deg, #34495e 0%, #34495e 100%);\n}\n\n.blue_button:hover {\ncolor: white;\n-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(0, 0, 0, 0.22);\n-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(0, 0, 0, 0.22);\nbox-shadow: 0 1px 1px rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(0, 0, 0, 0.22);\nbackground-image: #34495e;\nbackground-image: -moz-linear-gradient(90deg, #34495e 0%, #34495e 100%);\nbackground-image: -o-linear-gradient(90deg, #34495e 0%, #34495e 100%);\nbackground-image: -webkit-linear-gradient(90deg, #34495e 0%, #34495e 100%);\nbackground-image: linear-gradient(90deg, #34495e 0%, #34495e 100%);\ntext-decoration: none;\n}\n```\n\n## Progress bar color\n\n![](https://s3.amazonaws.com/crowdhoster/github_assets/progress-bar-pre.png)\n\nReplace every instance of `#1392dc` in this code snippet with the hex color value of your choice to change the button color. This color should match the color selected for both Call To Action (aka \"Contribute\") buttons.\n\n```\n#campaign #funding_area #progress_bg #progress {\nheight: 40px;\n-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.59);\n-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.59);\nbox-shadow: 0 1px 1px rgba(0, 0, 0, 0.59);\nbackground-image: -moz-linear-gradient(90deg, #1392dc 0%, #069df4 100%);\nbackground-image: -o-linear-gradient(90deg, #1392dc 0%, #069df4 100%);\nbackground-image: -webkit-linear-gradient(90deg, #1392dc 0%, #069df4 100%);\nbackground-image: linear-gradient(90deg, #1392dc 0%, #069df4 100%);\n-webkit-border-radius: 30px;\n-moz-border-radius: 30px;\nborder-radius: 30px;\nmin-width: 2%;\nwidth: 100%;\nmax-width: 100%;\ndisplay: inline-block;\n}\n```\n\n## Campaign title font and color\n\n![](https://s3.amazonaws.com/crowdhoster/github_assets/titles-pre.png)\n\nChange font and size. Find font options in this [MIT document](http://web.mit.edu/jmorzins/www/fonts.html).\n```\n#campaign #funding_area .campaign_title {\nfont-family: Helvetica;\nfont-size: 42px;\nfont-weight: bold;\nletter-spacing: -.05em;\n}\n```\nChange font color by replacing `#323232` with the hex color value of your choice.\n```\n#campaign #funding_area .campaign_title a {\ncolor: #323232;\ntext-decoration: none;\n}\n```\n\n## Background color\n\n![](https://s3.amazonaws.com/crowdhoster/github_assets/background-color-pre.png)\n\nChange page background color by replacing `#f6f6f6` with the hex color value of your choice.\n```\n#campaign #funding_area {\nbackground: #f6f6f6;\n}\n```\n\n## Hide an element\n\n![](https://s3.amazonaws.com/crowdhoster/github_assets/hide-element-pre.png)\n\nHide an element by adding `display: none;` under the selector of the element that you want to hide.\n\n```\n#campaign #funding_area #backing #backers {\ndisplay: none;\n}\n```\n\n## Adding a Custom Header/Banner\n\n![](https://s3.amazonaws.com/crowdhoster/github_assets/custom_header_screenshot.png)\n\nAdd a custom header by replacing the value of `background-image` and `height` in the snippet below.\n\n* Replace `'https://s3.amazonaws.com/crowdhoster/github_assets/header_example.png'` with a URL to the image of your choice. Your image should be served over a secure connection (https).\n\n* Replace `277px;` with the height of your image.\n\n```\n#header {\n    width: 100%;\n    padding: 0px;\n    position: relative;\n    background-image: url('https://s3.amazonaws.com/crowdhoster/github_assets/header_example.png');\n    background-repeat: no-repeat;\n    background-position: center;\n    height: 277px; /* height of the linked background image */\n}\n\n#header .container h1 {\n    display: none;\n}\n```\n***\n\nStill have questions? Email us at [questions:::at:::crowdtilt.com](mailto:questions@crowdtilt.com).","excerpt":"You've already got the foundation. Now, make it your own.","slug":"customizing-your-page","type":"basic","title":"Crowdfunding Customization"}

Crowdfunding Customization

You've already got the foundation. Now, make it your own.

Tilt/Open provides nearly complete control over the look and feel your crowdfunding campaign. [block:api-header] { "type": "basic", "title": "Adding Your Own HTML Elements" } [/block] To really customize the look and feel of your crowdfunding page, start by clicking 'edit campaign' and scrolling to any one of the following sections: * Primary Call to Action Description * Campaign Description * Checkout Sidebar Content * Confirmation Page Content From any of these sections, click "source" to switch to the HTML editor as shown in the following screenshots. [block:image] { "images": [ { "image": [ "https://files.readme.io/QVHVKd4bRvGiLhSdIen1_Screen%20Shot%202014-12-14%20at%202.32.40%20PM.png", "Screen Shot 2014-12-14 at 2.32.40 PM.png", "708", "376", "#8b5d50", "" ] } ] } [/block] Now click the Source tab. [block:image] { "images": [ { "image": [ "https://files.readme.io/ZeVUOHIgSLGJl4KJXXy8_Screen%20Shot%202014-12-14%20at%202.32.49%20PM.png", "Screen Shot 2014-12-14 at 2.32.49 PM.png", "709", "351", "#856359", "" ] } ] } [/block] From here, you can use headers, paragraphs, images, divs, and script tags to add your own navigation bars, libraries, image galleries, and other features. To style these elements, head to the 'Customize' tab. [block:api-header] { "type": "basic", "title": "Customizing with CSS" } [/block] **Resources for identifying CSS hooks**- * [Google Chrome Developer Tools](https://developers.google.com/chrome-developer-tools/) * [Mozilla Firefox Page Inspector](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector) * [Apple Safari Developer Resources](http://www.apple.com/safari/features.html#developer) Inspecting elements is simple with Google Chrome: Just right click on the element you want to inspect and choose 'inspect element' from the menu. ![Chrome Inspect Element gif](https://s3.amazonaws.com/crowdhoster/github_assets/inspect.gif) **Resources for hex color values**- * [FlatUIColors.com](http://flatuicolors.com/) * [BrandColors.com](http://brandcolors.net/) * [Adobe Kuler (iPhone)](https://itunes.apple.com/us/app/adobe-kuler/id632313714?mt=8) *** ## Where do I place custom CSS? Paste all custom CSS into the text field found under the "Customize" tab in the admin panel. It is easiest to edit the CSS in a text editor and paste in the code once you're happy with it. ![Paste your custom CSS in the space provided under the "Customized" tag](http://i.imgur.com/63oA1fP.png) ## Contribute button color ![](https://s3.amazonaws.com/crowdhoster/github_assets/conrtibute-button-pre.png) Replace every instance of `#34495e` in this code snippet with the hex color value of your choice to change the button color. ``` .blue_button { display: inline-block; color: #fff; text-shadow: 0 -1px 1px rgba(0,0,0,0.37); -moz-box-shadow: 0 1px 1px rgba(255,255,255,0.92),inset 0 -1px rgba(0,0,0,0.22); -webkit-box-shadow: 0 1px 1px rgba(255,255,255,0.92),inset 0 -1px 1px rgba(0,0,0,0.22); background-image: #34495e; background-image: -moz-linear-gradient(90deg, #34495e 0%, #34495e 100%); background-image: -o-linear-gradient(90deg, #34495e 0%, #34495e 100%); background-image: -webkit-linear-gradient(90deg, #34495e 0%, #34495e 100%); background-image: linear-gradient(90deg, #34495e 0%, #34495e 100%); } .blue_button:hover { color: white; -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(0, 0, 0, 0.22); -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(0, 0, 0, 0.22); box-shadow: 0 1px 1px rgba(255, 255, 255, 0.92), inset 0 -1px 1px rgba(0, 0, 0, 0.22); background-image: #34495e; background-image: -moz-linear-gradient(90deg, #34495e 0%, #34495e 100%); background-image: -o-linear-gradient(90deg, #34495e 0%, #34495e 100%); background-image: -webkit-linear-gradient(90deg, #34495e 0%, #34495e 100%); background-image: linear-gradient(90deg, #34495e 0%, #34495e 100%); text-decoration: none; } ``` ## Progress bar color ![](https://s3.amazonaws.com/crowdhoster/github_assets/progress-bar-pre.png) Replace every instance of `#1392dc` in this code snippet with the hex color value of your choice to change the button color. This color should match the color selected for both Call To Action (aka "Contribute") buttons. ``` #campaign #funding_area #progress_bg #progress { height: 40px; -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.59); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.59); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.59); background-image: -moz-linear-gradient(90deg, #1392dc 0%, #069df4 100%); background-image: -o-linear-gradient(90deg, #1392dc 0%, #069df4 100%); background-image: -webkit-linear-gradient(90deg, #1392dc 0%, #069df4 100%); background-image: linear-gradient(90deg, #1392dc 0%, #069df4 100%); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; min-width: 2%; width: 100%; max-width: 100%; display: inline-block; } ``` ## Campaign title font and color ![](https://s3.amazonaws.com/crowdhoster/github_assets/titles-pre.png) Change font and size. Find font options in this [MIT document](http://web.mit.edu/jmorzins/www/fonts.html). ``` #campaign #funding_area .campaign_title { font-family: Helvetica; font-size: 42px; font-weight: bold; letter-spacing: -.05em; } ``` Change font color by replacing `#323232` with the hex color value of your choice. ``` #campaign #funding_area .campaign_title a { color: #323232; text-decoration: none; } ``` ## Background color ![](https://s3.amazonaws.com/crowdhoster/github_assets/background-color-pre.png) Change page background color by replacing `#f6f6f6` with the hex color value of your choice. ``` #campaign #funding_area { background: #f6f6f6; } ``` ## Hide an element ![](https://s3.amazonaws.com/crowdhoster/github_assets/hide-element-pre.png) Hide an element by adding `display: none;` under the selector of the element that you want to hide. ``` #campaign #funding_area #backing #backers { display: none; } ``` ## Adding a Custom Header/Banner ![](https://s3.amazonaws.com/crowdhoster/github_assets/custom_header_screenshot.png) Add a custom header by replacing the value of `background-image` and `height` in the snippet below. * Replace `'https://s3.amazonaws.com/crowdhoster/github_assets/header_example.png'` with a URL to the image of your choice. Your image should be served over a secure connection (https). * Replace `277px;` with the height of your image. ``` #header { width: 100%; padding: 0px; position: relative; background-image: url('https://s3.amazonaws.com/crowdhoster/github_assets/header_example.png'); background-repeat: no-repeat; background-position: center; height: 277px; /* height of the linked background image */ } #header .container h1 { display: none; } ``` *** Still have questions? Email us at [questions@crowdtilt.com](mailto:questions@crowdtilt.com).