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

Solution 1:

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

Solution 2:

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:

1. In conf.py, add a function that adds a custom stylesheet:

   def setup(app):
       app.add_css_file('my_theme.css')
   

2. In conf.py, state/adjust:

   html_static_path = ['_static'] 
   

3. Create a _static folder/directory if it doesn't exist.

4. Create a file called my_theme.css in the _static folder that contains the lines:

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

Solution 3:

First of all I must say, that during my sphinx quickstart I chose the option of separate folder for my sources and for my build.

It's a 3 steps process:

1. Create a document for your styles:

Where?

1. In the same directory where my conf.py lives, (in my case source), I created a folder for my custom static files (stylesheets, javascripts). I called it custom.
2. Inside it I created a subfolder for my stylesheets: source/custom/css.
3. In this subfolder I'm gonna create my custom styles: source/custom/css/my_theme.css.

2. Telling sphinx about it

Now we have to tell sphinx to spit this document inside build/_static/css, the same directory where is the stylesheet included in the Read The Documents theme. We do that adding the following line to conf.py:

html_static_path = ['custom']       # Directory for static files.

Done. Now, if we build, we will have the RTD styles (theme.css), and our custom my_theme.css in the same directory, build/_static/css.

3. Selecting our custom theme

Now we are gonna tell sphinx to use our custom my_theme.css, instead of the RTD one. We do that adding this line in conf.py:

html_style = 'css/my_theme.css'     # Choosing my custom theme.

In our custom stylesheet, the first line should import the styles of theme.css with @import url("theme.css");.

And we are ready to start overwriting styles.

UPDATE: THERE IS AN EVEN SIMPLER WAY.

1. Put your customizations inside source/_static/css/my_theme.css.

In your custom stylesheet, the first line should import the styles of theme.css with @import url("theme.css");.

This way, you don't have to worry about messing up the default styles, if your custom stylesheet doesn't work, delete and start again.

2. Add the following line in conf.py:

html_style = 'css/my_theme.css' 

Solution 4:

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;
}