Skip to content

Commit

Permalink
[#847] Add some links to some CSS tools
Browse files Browse the repository at this point in the history
  • Loading branch information
Sean Hammond committed Dec 17, 2013
1 parent a9d62f0 commit d065a57
Showing 1 changed file with 22 additions and 10 deletions.
32 changes: 22 additions & 10 deletions doc/theming/css.rst
Expand Up @@ -2,6 +2,27 @@
Customizing CKAN's CSS
======================

.. seealso::

There's nothing special about CSS in CKAN, once you've got started with
editing CSS in CKAN (by following the tutorial below), then you just use the
usual tools and techniques to explore and hack the CSS. We recommend using
your browser's web development tools to explore and experiment with the CSS,
then using any good text editor to edit your extension's CSS files as
needed. For example:

`Firefox developer tools <https://developer.mozilla.org/en-US/docs/Tools>`_
These include a Page Inspector and a Style Editor

`Firebug <https://www.getfirebug.com/>`_
Another web development toolkit for Firefox

`Chrome developer tools <https://developers.google.com/chrome-developer-tools/>`_
Tools for inspecting and editing CSS in Google Chrome

`Mozilla Developer Network's CSS section <https://developer.mozilla.org/en-US/docs/Web/CSS>`_
A good collection of CSS documentation and tutorials

Extensions can add their own CSS files to modify or extend CKAN's default CSS.
Create an ``example_theme.css`` file in your extension's ``public`` directory::

Expand Down Expand Up @@ -46,16 +67,7 @@ and you should see the background color of the account masthead change:
This custom color should appear on all pages of your CKAN site.

Now that we have CKAN using our CSS file, we can add more CSS rules to the file
and customize CKAN's CSS as much as we want. There's nothing special about CSS
in CKAN, you just use the usual tools and techniques to explore and hack the
CSS.

.. todo:: Link to some tools?

e.g. Firefox inspector etc (or Chrome? Firebug?)

e.g. Some online CSS reference.

and customize CKAN's CSS as much as we want.
Let's add a bit more code to our ``example_theme.css`` file. This CSS
implements a partial imitation of the `datahub.io <http://datahub.io/>`_ theme
(circa 2013):
Expand Down

0 comments on commit d065a57

Please sign in to comment.