diff --git a/doc/images/custom-css.png b/doc/images/custom-css.png new file mode 100644 index 00000000000..1f25440bc0e Binary files /dev/null and b/doc/images/custom-css.png differ diff --git a/doc/images/more-custom-css.png b/doc/images/more-custom-css.png new file mode 100644 index 00000000000..e757b85f6d1 Binary files /dev/null and b/doc/images/more-custom-css.png differ diff --git a/doc/theming/css.rst b/doc/theming/css.rst index 4bfbc4f6652..5a0a9b27f67 100644 --- a/doc/theming/css.rst +++ b/doc/theming/css.rst @@ -36,8 +36,12 @@ extended to link to custom CSS files (any code in the styles block will appear in the ```` of the HTML page). Restart the development web server and reload the CKAN page in your browser, -and you should see the background color of the account masthead change. This -custom color should appear on all pages of your CKAN site. +and you should see the background color of the account masthead change: + +.. image:: /images/custom-css.png + :alt: The account masthead with some custom CSS. + +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 @@ -54,6 +58,9 @@ 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): +.. image:: /images/more-custom-css.png + :alt: A partial imitation of the datahub.io theme, circa 2013. + .. literalinclude:: /../ckanext/example_theme/v14_more_custom_css/public/example_theme.css .. todo::