19

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
Joel Marks
  • 211
  • 2
  • 3
  • According to the [docs](https://sphinx-rtd-theme.readthedocs.io/en/stable/configuring.html#other-configuration) your configuration appears correct and should work. It's also consistent with the theme's documentation's [`conf.py`](https://github.com/readthedocs/sphinx_rtd_theme/blob/a3ab477aaa23f3b7ab7d62c7abc2cc74102ab2b8/docs/conf.py#L44-L49). Perhaps compare your HTML and CSS against another example, specifically the sphinx_rtd_theme's docs? – Steve Piercy Dec 06 '19 at 23:08
  • 2
    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; } – Joel Marks Dec 10 '19 at 21:52
  • Suggest using [JSFiddle](https://jsfiddle.net/) with your output. We cannot diagnose what we cannot see. – Steve Piercy Dec 11 '19 at 10:48
  • 2
    I have the same issue with svg, but it just works when I convert the image to png. Does not make me happy though :/ – Tomas Greif Mar 13 '20 at 16:13
  • 1
    Have you checked the builders? Some builders do not support .svg images https://www.sphinx-doc.org/en/master/usage/builders/index.html – 465b Jun 05 '20 at 17:23
  • Same problem. sphinx-rtd-theme v0.5.0, sphinx v3.4.3 – Kermit May 12 '21 at 12:18

3 Answers3

13

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

enter image description here and

png works

enter image description here

Anu
  • 3,198
  • 5
  • 28
  • 49
3

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"
RobertAalto
  • 1,235
  • 1
  • 9
  • 12
1

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

enter image description here

Kermit
  • 4,922
  • 4
  • 42
  • 74
  • 2
    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! – Mad Feb 04 '22 at 15:19