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");
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 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 have a new Preact project which was generated using preact-cli and the default template.
I'm using Bootstrap components from react-bootstrap.
The default template looks like this:
├── assets
├── components
│ ├── app.js
│ └── header
│ ├── index.js
│ └── style.css
├── index.js
├── manifest.json
├── routes
│ ├── home
│ │ ├── index.js
│ │ └── style.css
│ └── profile
│ ├── index.js
│ └── style.css
│ └── style.css
└── style
└── index.css
I created a new component with a Card from react-bootstrap:
<Card as="a" href="#" class={style.customCard}>
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title.
</Card.Text>
</Card.Body>
</Card>
In the corresponding style.css in the same directory, I added this:
.customCard {
background-color: red;
border: 5px solid red;
color: red;
}
None of these styles seem to be applied. If I inspect the element in Developer Tools, you can see that the class is not applied:
<a href="#" class="card">
<div class="card-body">
<div class="card-title h5">Card Title</div>
<p class="card-text">
Some quick example text to build on the card title.
</p>
</div>
</a>
I wonder if anyone could explain why this is happening, perhaps offering a workaround.
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;
}
I'm attempting to use source maps to live-edit scss in Firefox.
I followed the steps outlined in the documentation. My scss sources are visible and editable in the dev tools, but changes made to them are not reflected until I perform a manual page refresh.
My setup:
A local webserver with the following in its document root:
/
├── index.html
├── assets
│ ├── css
│ │ ├── main.css
│ │ ├── main.css.map
│ │ ├── scss
│ │ │ ├── main.scss
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/assets/css/main.css">
</head>
<body>
42
</body>
</html>
main.scss:
body {
background-color:lightblue;
}
And, running in the css directory to generate the main.css and main.css.map files:
sass --sourcemap=file --watch scss:.
When I go to localhost/index.html in Firefox I can see the scss file, but when I save it over /path/to/document_root/assets/css/scss/main.scss the "main.css" displayed under it is struck through:
Saving it triggers sass to rebuild as expected, but Firefox doesn't seem to pick up on the rebuilt css until I refresh.