.. _change_appearance:

Change your documentation’s appearance
======================================

The templates for ``django-sphinxdoc`` consist of of three top-level ``div``’s
with the following classes:

``pagination-top``
    The upper pagination bar with breadcrumbs and links to the previous and
    next section.
    
``sphinx``
    The stuff generated by ``Sphinx``.
    
``pagination-bottom``
    Like the upper pagination bar, but also contains the build date.
    
The ¶ sign after headings
-------------------------

To only show the headings’ ¶ sign, add something like this to your CSS:

.. sourcecode:: css

    #content .sphinx a.headerlink {
        font-size: 0.8em; 
        padding: 0 4px 0 4px; 
        text-decoration: none; 
        visibility: hidden;
    }
    #content .sphinx *:hover > a.headerlink { visibility: visible; }
    
    
Changing font sizes for headings
--------------------------------
    
Another style-problem for your site might be, that the Sphinx stuff starts with
``h1`` as top level heading, but that your site uses ``h1`` for the site title
and ``h2`` as top level content heading.

I haven’t found a way to modify Sphinx’ behavior and make it use ``h2``. If you
won’t change your behavior either, you can just change the font sizes of the
Sphinx headings, so that Sphinx’ ``h1`` matches your ``h2``, e.g.:

.. sourcecode:: css

    h1 { font-size: 40px; } /* This is your blog title */
    h2 { font-size: 22px; } /* This is used for page and post titles */
    h3 { font-size: 18px; }
    
    /* Changes for Sphinx */
    #content .sphinx h1 { font-size: 22px; }
    #content .sphinx h2 { font-size: 18px; }
    

Changing the appearance of references and class names
-----------------------------------------------------

You can also change the appearance of references of class and method
descriptions, e.g.:

.. sourcecode:: css

    #content .sphinx a.reference { text-decoration: none; }
    #content .sphinx a.reference tt.literal {
        border-bottom-width: 1px; 
        border-bottom-style: dotted;
    }
    #content .sphinx a.reference em { font-style: normal; }

    /* Smaller desc (default was 14px) and bold class name */
    #content .sphinx .descclassname { font-size: 13px; }
    #content .sphinx .descname { font-weight: bold; }
    

Other elements
--------------

It’s very easy to change the style of other elements. Just search for the
elements and their CSS class names in the HTML output and add them to your CSS
file. Remember to precede each style definition with ``#content .sphinx`` to
avoid side effects to non-Sphinx stuff.
