Docs

The Basics

Customization through Javascript and CSS

Your _preferences list should have a card named includes. The includes card is a special card that controls the links you'll have in your main site menu.

Every file or link you add as an attachment to the includes card will be included in your page, I mean CSS and Javascript files, so if they're named anything.css they will be included as CSS files, and if they're named anything.js they will be included as Javascript files. There's no guarantee of where these files will be included, or if they are going to be loaded synchronously or asynchronously.

Also, for any checklists you create in the includes card, all checked items in these checklists will also be included in your site, if they are URLs. These checked items can also take the form of a canonical Markdown link, i.e., [Text of the link](http://example.com/script.js), if they are in this format, only the linked URL will be included.

With included Javascript and CSS you can do all sorts of magical things, for example, adding a Javascript commenting system, web-analytics or amazing widgets.

Themes

The main use of the includes card is to apply themes to your site. Besides the themes we have already included, as options, in your includes card, you can also write and change themes. The themes must consist of pure CSS and Javascript files that will be applied to the same basic HTML template. For more information about themes see Writing themes.

There are also some themes that will fit any Websites for Trello generated website here. You can just link to their CSS and JS files directly in a includes checklist.

To customize the themes just a little bit, you can use independent CSS and JS files, which you can host anywhere and link to by adding the link to a checklist in your includes card; or you add it as an attachment to that same card easily using our Attachment Editor tool.

Widgets

We have included some of the most common widgets you might want, such as Google Analytics and Disqus comments, in your includes card. If you want to activate one of them, just mark them as completed and edit the URL with your data (your Google Analytics tracking code, your Disqus username etc.).

Utils

Besides these external widgets, we have also included some small utilitarian scripts that do some basic customization. For example, hiding the author information from the page, or changing the footer text from "powered by Websites for Trello" to any other text. These small scripts can serve as inspiration for other mighty customizations you may want to do to your website.

If you deleted some script or want to see if we have come up with new scripts, we have them all listed at http://websitesfortrello.github.io/includes/. You can just copy these links and paste them in your includes card.

If you want to customize them slightly you can also click on these links and use our Attachment Editor to add your modified util version to your includes card.

Adding custom CSS and Javascript

You upload any CSS or Javascript file you want directly to the includes card, or you can host them elsewhere and link to them. For example, you can host them as Gists and get a raw link to them at RawGit which you can finally add to some checklist at the includes card.

For quick customization, you can also create and edit files directly in your browser and upload it to the includes card using our Attachment Editor tool.


Related articles: