Theming guide

Changed in version 2.0: The CKAN frontend was completely rewritten for CKAN 2.0, so most of the tutorials below don’t apply to earlier versions of CKAN.

The following sections will teach you how to customize the content and appearance of CKAN pages by developing your own CKAN themes.

See also

Getting started

If you just want to do some simple customizations such as changing the title of your CKAN site, or making some small CSS customizations, Getting started documents some simple configuration settings you can use.

Note

Before you can start developing a CKAN theme, you’ll need a working source install of CKAN on your system. If you don’t have a CKAN source install already, follow the instructions in Installing CKAN from source before continuing.

Note

CKAN theme development is a technical topic, for web developers. The tutorials below assume basic knowledge of:

• The Python programming language
• HTML
• CSS
• JavaScript

We also recommend familiarizing yourself with:

• Jinja2 templates
• Bootstrap
• jQuery

• Customizing CKAN’s templates
  • Creating a CKAN extension
  • Replacing a default template file
  • Jinja2
  • Extending templates with {% ckan_extends %}
  • Replacing template blocks with {% block %}
  • Extending parent blocks with Jinja’s {{ super() }}
  • Template helper functions
  • Adding your own template helper functions
  • Template snippets
  • Adding your own template snippets
  • HTML tags and CSS classes
  • Accessing custom config settings from templates
• Adding static files
• Customizing CKAN’s CSS
• Adding CSS and JavaScript files using Fanstatic
• Customizing CKAN’s JavaScript
  • Overview
  • Initializing a JavaScript module
  • this.options and this.el
  • Default values for options
  • Ajax, event handling and CKAN’s JavaScript sandbox
  • Error handling
  • Pubsub
  • jQuery plugins
  • Internationalization
  • Testing JavaScript modules
• Best practices for writing CKAN themes
  • Don’t use c
  • Use url_for()
  • Use {% trans %}, {% pluralize %}, _() and ungettext()
  • Avoid name clashes
  • JavaScript modules should have docstrings
  • JavaScript modules should unsubscribe from events in teardown()
  • Don’t overuse pubsub
  • Use {% snippet %}, not {% include %}
  • Snippets should have docstrings
• Custom Jinja2 tags reference
• Variables and functions available to templates
• Objects and methods available to JavaScript modules
• Template helper functions reference
• Template snippets reference
• JavaScript sandbox reference
• JavaScript API client reference
• CKAN jQuery plugins reference