From d065a5733fe8abfb9839636ee6af59bab07afd50 Mon Sep 17 00:00:00 2001 From: Sean Hammond Date: Tue, 17 Dec 2013 15:37:25 +0100 Subject: [PATCH] [#847] Add some links to some CSS tools --- doc/theming/css.rst | 32 ++++++++++++++++++++++---------- 1 file changed, 22 insertions(+), 10 deletions(-) diff --git a/doc/theming/css.rst b/doc/theming/css.rst index e55d7467f37..ba762b62189 100644 --- a/doc/theming/css.rst +++ b/doc/theming/css.rst @@ -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 `_ + These include a Page Inspector and a Style Editor + + `Firebug `_ + Another web development toolkit for Firefox + + `Chrome developer tools `_ + Tools for inspecting and editing CSS in Google Chrome + + `Mozilla Developer Network's CSS section `_ + 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:: @@ -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 `_ theme (circa 2013):