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.

Sophi

According to the docs your configuration appears correct and should work. It's also consistent with the theme's documentation's conf.py. Perhaps compare your HTML and CSS against another example, specifically the sphinx_rtd_theme's docs? – Nosy

Thanks, I have done that but I cannot yet see the issue. The computed value on RTD for the logo is width: 262.1px; height: 60px; but the css shows "auto" for both. I cannot see where these figures are coming from. Adding a css file import to the conf.py as per instructions on RTD with the following (below) in the custom.css solves the problem. Note that !important is not required. I do have not found the cause of the problem and don't have css skills to diagnose. .wy-side-nav-search > a img.logo, .wy-side-nav-search .wy-dropdown > a img.logo { width: 262.1px; height: 60px; } – Sophi

Suggest using JSFiddle with your output. We cannot diagnose what we cannot see. – Nosy

I have the same issue with svg, but it just works when I convert the image to png. Does not make me happy though :/ – Proctor

Have you checked the builders? Some builders do not support .svg images sphinx-doc.org/en/master/usage/builders/index.html – Mezzo

Same problem. sphinx-rtd-theme v0.5.0, sphinx v3.4.3 – Hilly

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

Proliferate

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"

Frag

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://mcmap.net/q/622942/-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;
}

Hilly

I put this css in a file named custom.css in my _static directory and then set html_static_path = ['_static'] and html_css_files = ['custom.css'] in my conf.py and it was sorted. Many thanks! – Heterogenous