Search code examples
htmlthemeswidthpython-sphinx

Modifying content width of the Sphinx theme 'Read the Docs'

I am using 'Read the Docs' Sphinx theme for my documentation. In the original theme, given below

Read the Docs Sphinx Theme

the content or main layout width is designed to be mobile friendly. However, for my project I would like this to be a bit more wide. I do not know HTML and hence would appreciate if any one could give me some clues to increase the content (layout) width.

Solution

  • Another option is to create a stylesheet in source/_static with just the css you want, e.g.

    .wy-nav-content {
    max-width: none;
}

    or

    .wy-nav-content {
    max-width: 1200px !important;
}

    Make sure the directory is referenced in source/conf.py - I believe by default there's a line to do this, i.e.

    # Add any paths that contain custom static files (such as style sheets) here,
# relative to this directory. They are copied after the builtin static files,
# so a file named "default.css" will overwrite the builtin "default.css".
html_static_path = ['_static']

    Then create a custom layout in source/_templates/layout.html and do something like this to include your stylesheet

    {% extends "!layout.html" %}
{% block extrahead %}
    <link href="{{ pathto("_static/style.css", True) }}" rel="stylesheet" type="text/css">
{% endblock %}

    Assuming you called your stylesheet style.css