###################################################
Customising look-and feel
###################################################


Using available themes, we can customise the look and feel of the generated web sites. The list of availbale themes for Sphinx are described here : `Sphinx themes catalog <https://sphinx-themes.org/>`_

If your virtual environment is not running, go to the sphinx directory and activate it.


.. code-block:: bash

    usr1:server:~$ cd ~/sphinx
    usr1@Dserver:~/sphinx$ source .venv/bin/activate

Then install the theme that you like. In this example we are installing the ``Read the docs`` theme

.. code-block:: bash

    (.venv) usr1@server:~/sphinx$ pip install sphinx-rtd-theme


Once the theme is installed edit the ``docs/source/conf.py`` and change the following lines

.. code-block:: python

    html_theme = 'sphinx_rtd_theme'
    # html_theme_options specific to rtd theme
    html_theme_options = {
        'analytics_id': 'G-XXXXXXXXXX',  #  Provided by Google in your dashboard
        'analytics_anonymize_ip': False,
        'logo_only': True,
        'display_version': True,
        'prev_next_buttons_location': 'bottom',
        'style_external_links': False,
        'vcs_pageview_mode': '',
        'style_nav_header_background': '#0CB3A2',
        # Toc options
        'collapse_navigation': False,
        'sticky_navigation': True,
        'navigation_depth': 5,
        'includehidden': True,
        'titles_only': True
    }


Now that the changes are made, you need to rebuild the project and deploy the new pages for the webserver to render them.

.. code-block:: bash

     (.venv) usr1@server:~/sphinx$ sphinx-build -M html docs/source/ docs/build/
     (.venv) usr1@server:~/sphinx$ cp -R -v docs/build/html /var/www/{website directory}/


Go to the url of your website and refresh. You should see the following page dispayed

.. image::   /_static/img/readthedocs-first.png
  :width: 400
  :alt: First web site

You have successfully installed the ``ReadTheDocs`` theme !