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

Question

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

http://read-the-docs.readthedocs.org/en/latest/theme.html

Answer 1

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'