How to add a logo to my readthedocs - logo rendering at 0px wide

Question

This happens locally via sphinx running readthedocs theme, it also happens in readthedocs.io.

I have added an svg logo (actually it's just the downloaded rtd logo.svg copied from their site for testing).

I've added the settings to conf.py and html builds fine.

html_theme = 'sphinx_rtd_theme'
html_static_path = ['_static']
html_logo = 'logo.svg'
html_theme_options = {
    'logo_only': True,
    'display_version': False,
}

If I inspect the logo class in Firefox it is set to "auto", if I add a width in px, the logo appears.

I feel as if I am missing something about the configuration of the readthedocs theme in the conf.py file?

Surely I should not have to hack at the CSS manually: I see no indication of altered CSS in the Readthedocs.io site when looking at their source.

I'm looking for an elegant solution - I do not want updates to readthedocs theme to break my site because I have been overriding the theme's CSS.

Answer 1

You're doing correctly

html_theme = 'sphinx_rtd_theme'
html_static_path = ['_static']
html_logo = "mepro_headshot.png"
html_theme_options = {
    'logo_only': True,
    'display_version': False,
}

I just added the logo in my docs/source/ and when you run make html, it copies your pngor svg files into docs/html/_static/. As mentioned in the documentation: New in version 0.4.1: The image file will be copied to the _static directory of the output HTML, but only if the file does not already exist there.

├── docs
│   │   └── html
│   │       ├── _static
│   │       │   ├── mepro_headshot.png
│   │       │   ├── mepro_headshot.svg
│   └── source
│       ├── _images
│       ├── _static
│       ├── _templates
│       ├── conf.py
│       ├── index.rst
│       ├── mepro_headshot.png
│       ├── mepro_headshot.svg

and it seems both

svg

and

png works

Answer 2

I had a similar issue, I've resolved it by adding the _static directory at the html_logo parameter.

html_theme = 'alabaster'
html_static_path = ['_static']
html_logo = "_static/logo_rw.png"

Answer 3

Same problem with .svg width auto zero px. For anyone that does want to set the css here is a solution:

sphinx-rtd-theme v0.5.0, sphinx v3.4.3

docs/_build/html/_static/css/custom.css:

/* 
`width:auto` was rendering 0px wide for .svg files
https://stackoverflow.com/questions/59215996/how-to-add-a-logo-to-my-readthedocs-logo-rendering-at-0px-wide
*/
.wy-side-nav-search .wy-dropdown > a img.logo, .wy-side-nav-search > a img.logo {
    width: 275px;
}