Change your documentation’s appearance

The templates for django-sphinxdoc consist of of three top-level div 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 following examples demonstrate how you can change the appearance of your documentation.

The “¶” sign after headings

To only show the headings’ “¶” sign if you hover above the heading, add something like this to your 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>. To work around this, you can just change the font sizes of the Sphinx headings, so that Sphinx’ <h1> matches your <h2>:

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.:

#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.