[ckan-dev] How to add custom CSS file

Tue Sep 20 18:33:30 UTC 2011

On 20 September 2011 14:27, Philipp Lämmel
<philipp.laemmel at fokus.fraunhofer.de> wrote:
> Hey folks,
>
> I'm currently working on the Berlin OpenData portal and have a question on
> how to add my own CSS file.
>
> We wrote our own extension, which adds a new public path to the config file:
>
>    rootdir = os.path.dirname(os.path.dirname(here))
>    our_public_dir = os.path.join(rootdir, 'ckanext', 'berlin', 'theme',
> 'public')
>    config['extra_public_paths'] = ','.join([our_public_dir,
> config.get('extra_public_paths', '')])

Just to be clear you don't need an extension to do this. You can just
use a config option:

<http://docs.ckan.org//en/latest/configuration.html#extra-public-paths>

See also: <http://docs.ckan.org/en/latest/theming.html>

> This directory contains our file 'extra.css', which changes the background
> color . According to your documentation, I should edit layout.html:
>
> <html xmlns="http://www.w3.org/1999/xhtml"
>      xmlns:i18n="http://genshi.edgewall.org/i18n"
>      xmlns:py="http://genshi.edgewall.org/"
>      xmlns:xi="http://www.w3.org/2001/XInclude"
>      py:strip="">
> <py:def function="optional_head">
> <link rel="stylesheet" href="${g.site_url}/css/extra.css" />
> </py:def>
> <xi:include href="layout_base.html" />
> </html>
>
>
> But every time I add my own CSS-file, some features stop working (e.g.
> tagcompletion or the name suggestion according to the title).

Hmm, that's a bad piece of doc because defining optional head there
prevent its use elsewhere and that's what breaking tag completion.

> Do I miss any basic steps in adding my own CSS-file? Could you please
> provide a small how to? Is there any other way with which I could change the
> layout ?

Due to the power of the genshi templating language doing what you want
is actually quite simple. Rather than change layout.html as you have
done above instead do:

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:i18n="http://genshi.edgewall.org/i18n"
  xmlns:py="http://genshi.edgewall.org/"
  xmlns:xi="http://www.w3.org/2001/XInclude"
  py:strip="">

  <head py:match="head">
    ${select('*')}

    <link rel="stylesheet" href="${g.site_url}/css/mycss.css" />
  </head>

  <xi:include href="layout_base.html" />
</html>

More on this here: <http://genshi.edgewall.org/wiki/GenshiRecipes/HtmlTransform>

While this is relatively simple I'm not sure it is trivial :-) so to
make this simpler I think we should add a config option for adding
some material to the end of head in the next release (we already have
such a config option to add arbitrary html before </body> tag. It is
called ckan.template_footer_end).

Rufus

PS: I've committed a fix for both these docs issues
<https://bitbucket.org/okfn/ckan/changeset/922d442664bd>