[CKAN-support] URGENT: FW: CKAN setup/info

Tue Aug 27 13:18:51 UTC 2013

Hi Aaron,

Regarding your question about theming CKAN, I've consulted our front-end
developer and got this answer for you. Changing the background image is
just a simple CSS change. there are 3 ways to change the CSS of a CKAN
instance:

1. Within your CKAN instance's sysadmin panel (click on the hammer icon
in the top-right corner of the web interface, when logged-in as a
sysadmin) there is a Custom CSS field. See the docs here:

http://docs.ckan.org/en/latest/getting-started.html#the-admin-page

If you are simply trying to change one or two display things on your
instance this is the simplest way to do it.

So for example adding:

    .hero { background: red; }

would replace the homepage squares with a red background.

To change the background image the element you'll want to target is
`.hero` and you'll need to change the `background-image` on it. For
example:

    body .hero { background-image: url("http://placekitten.com/300/300"); }

would give you a wonderful repeating cat background. The MDN docs on the
`background-image` attribute are a good start if you wan't to understand
more:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

2. Editing the file ckan/public/base/less/custom.less. This is the
recommended approach if you just want to change a few default theme colours,
fonts, backgrounds, etc.

Edit the custom.less file, then run `./bin/less` (or `./bin/less
--production` if you are running CKAN with debug == false in your config
file). See our front-end documentation for more details on this:

http://docs.ckan.org/en/ckan-2.0/frontend-development.html

3. Creating a custom extension. This is more in depth but best way of
customising your CKAN instance.  It's also the most supported and
documented. See the docs here:

http://docs.ckan.org/en/ckan-2.0/theming.html