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.
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
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"
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;
}
Related
I am using Sphinx to generate HTML documentation and have a structure similar to the following:
docs/
├── _static/
├── _templates/
├── guide/
│ ├── index.rst
│ └── image.jpg
├── conf.py
├── index.rst
├── make.bat
└── Makefile
I reference docs/guide/index.rst from docs/index.rst and embed docs/guide/image.jpg in docs/guide/index.rst using the image: directive.
What I notice is that after running make html, the build directory created has duplicated image.jpg, once in a build/html/_static/ folder, and once in a build/html/_images/ folder. Is there any reason for this or way to not duplicate the image? It seems that the generated HTML is only referencing the image using the build/html/_images/ path.
I have a task to override most of admin panel pages with custom, however I couldn’t do that.
I created the same directory structure as in strapi github repo for admin package, but nothing happened
src
├── extensions
│ ├── admin
│ │ └── admin
│ │ └── src
│ │ └── pages
│ │ └── HomePage
│ │ ├── ContentBlocks.js
│ │ ├── HomeHeader.js
│ │ ├── index.js
│ │ └── SocialLinks.js
│ └── content-manager
│ └── strapi-server.js
├── index.js
├── plugins
└── themes
└── override.cs
Update 03/08/2022
It looks like Strapi team decided to remove customization options in v4, so if you want to override something like dashboard pages you'll have to use patch-package
There is a complete section in the official docs called Admin panel customization.
According to the docs, you can do a lot of customization options, which are:
Customizing the admin panel is helpful to better reflect your brand identity or to
modify some default Strapi behavior:
The access URL, host and port can be modified through the server configuration.
The configuration object allows replacing the logos and favicon, defining locales and extending translations, extending the
theme, and disabling some Strapi default behaviors like displaying
video tutorials or notifications about new Strapi releases.
The WYSIWYG editor can be replaced or customized.
The forgotten password email can be customized with a template and variables.
The webpack configuration based on webpack 5 can also be extended foradvanced customization.
I am a relative beginner developing a Python package. At the root of the repository there are two important directories: images and docs. The former contains some png and svg files I would like to put inside a documentation, the latter is where I run sphinx-quickstart in. I cannot change that layout therefore I have to let Sphinx know to use the top-level images directory while building the docs.
According to what I found over the internet I adjusted the conf.py file to have:
# 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', '../images']
And in the index.rst I have to point to the image file itself:
.. image:: ../images/scheme.svg
:width: 500
:alt: schematic
:align: center
Having these two set up I run make html and I do get clean logs but the output directory is a little strange... Once the build is finished i have a docs/_build/html directory which contains _static and _images sub-directories (among many others). What I find strange is that inside docs/_build/html/_static I see all the contents of the root-level images being copied over whereas (at the same time) inside docs/_build/html/_images I only have scheme.svg. So essentially this one file is duplicated into these two subdirectories...
This does not look very clean to me... how should I adjust this setup?
Reply to the comment of bad_coder:
Below I will paste a tree with the dir structure (kept only the relevant elements):
.
├── docs
│ ├── Makefile
│ ├── _build
│ │ └── html
│ │ ├── _images
│ │ │ └── scheme.svg
│ │ ├── _static
│ │ │ ├── scheme.svg
│ ├── conf.py
│ ├── index.html
│ ├── index.rst
├── images
│ ├── scheme.svg
I developped a spring-boot application using thymeleaf as template. I use server context-path in my application.properties.
server.context-path: /myapp/v1.0
When I need to display images in my views.html I use this syntax
<img th:src="#{/img/first.png}" />
Everything is cool
But when I need to use images in my css file it dosn't work
/* Search input */
input.search-input {
text-align: left;
background-image: url('/img/search.png');
}
Woukd you have any idea ?
Thanks for your answers
In CSS file you should reference images using relative paths.
If your folder structure looks like (starting in src/main/resources):
.
├── application.properties
├── static
│ ├── css
│ │ └── style.css
│ └── img
│ └── first.png
└── templates
└── index.html
you should reference image in a way:
background-image: url("../img/first.png");
What factors effect compilation performance of Sass files when using Hot Module Replacement with Webpack?
I currently have a lot of Sass files, organised into multiple directories:
├── api
├── assets
│ └── fonts
├── config
├── const
├── decorations
├── functions
├── modules
│ ├── base
│ ├── components
│ ├── generic
│ ├── objects
│ └── vendor
├── themes
├── tools
└── trumps
Each directory has a manifest that loads the files within, and my entry point that loads all the manifests as well as all vendor libs is main.scss.
Currently I require this file from my application entrypoint (app.js):
require('../sass/app.scss');
Whilst HMR works at present, there is a long delay between saving a changed file and the change being updated in the browser.
My Sass loader:
test: /\.scss$/,
loaders: ['style', 'css?sourceMap', 'autoprefixer-loader?browsers=last 4 version', 'sass?sourceMap'],
include: src_dir
Devtool config:
devtool: 'eval-cheap-module-source-map'
What factors will effect the speed at which HMR updates?