Modifying content width of the Sphinx theme 'Read the Docs'
In case someone is searching for a simpler answer... combining the ideas from https://samnicholls.net/2016/06/15/how-to-sphinx-readthedocs/ and the above suggestions, I found the easiest way of getting a custom window-width is the following:
In
conf.py
, add a function that adds a custom stylesheet:def setup(app): app.add_css_file('my_theme.css')
In
conf.py
, state/adjust:html_static_path = ['_static']
Create a
_static
folder/directory if it doesn't exist.Create a file called
my_theme.css
in the_static
folder that contains the lines:.wy-nav-content { max-width: 1200px !important; }
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
The HTML option added in Sphinx 1.8.0b1 (released Sep 2018) simplifies the process. The recommendation in Read The Docs Documentation is adding custom css to the theme via the html_css_files
option in conf.py.
html_css_files = [
'custom.css',
]
Put the custom.css in the html static path folder (Default is _static folder).
Content of custom.css:
.wy-nav-content {
max-width: 75% !important;
}