I have a problem with adding the custom fonts in Grav CMS. All fonts are added under the folder path: user/themes/bildxwerkstatt/fonts
It works on my computer when I'm adding this code in .css file
#font-face {
font-family: MullerBlack;
src: url(/bildxwerkstatt/user/themes/bildxwerkstatt/fonts/Muller/MullerBlack.otf);}
h1, h2, h3, h4, h5, h6 {
font-family: MullerBlack, sans-serif!important;}
However on the host such path does not work.
As I understood from the Grav documentation the path to font in css should looks like this:
url(theme:fonts/Muller/MullerBlack.otf);}
But it does not work in my case. The same problem I have when trying to add background image in css.
Thank you in advance!
With the given information it is difficult to help.
bildxwerkstatt is a folder in the document root but also the theme name, right?
The first thing to check is if you have the provided .htaccess and set the RewriteBase. See Grav Troubleshooting 404 Not Found
Then you should check your css syntax.
#import url('https://...
or with base.html.twiq
<link href="https://...
From Grav Asset Manager about Static Assets:
The url() method takes an optional second parameter of true or false to enable the URL to include the schema and domain.
Also check the available Theme Variables.
The {{ theme_url }} returns the relative URL to the current theme.
And here an example how i set a background image for the specific page:
{% set background_image = page.media.images|randomize|first %}
{% set background_image = background_image.name.cache.url %}
<div {% if background_image %} style="background-image: url({{ background_image }})"{% endif %}></div>
Related
I know that questions with similar titles already exist, but after reading them, I'm still stuck.
I'm developing a website using Django and serving static files (css and js) with no problem using {% static %} tag. I wanted to use a custom font so put this style tag in my base template. (and it ends up in <head> of the page the way I expect.)
<style>
#font-face {
font-family: IRANSansX !important;
font-style: normal;
font-weight: 400;
src: url({% static 'css/fonts/IRANSansX-Regular.woff2' %}) format('woff2'); /* final value -> url(/static/css/fonts/IRANSansX-Regular.woff2)*/
}
body {
font-family: IRANSansX, sans-serif;
}
</style>
To my surprise, nothing happened. In both Chrome and Firefox, the browser don't event send the request to download the font. I did several checks:
I tested and saw that Django serves the font if I manually create a url by appending the value of url() to my website domain.
I tried to apply the font to other elements, no success.
I tried '' and "" for my font-family name and the url, no success.
I tried another font, no success.
It's strange that bootstrap-icons.woff2 font, which is also of type woff2, is working properly and is loaded by browsers. The only difference is that, it's relatively addressed by bootstrap-icons.css file.
It was all to !important at the end of font-family definition. I removed it and everything worked!
It's strange that if !important is not a part of the font-face and actually breaks its functionality, how come my IDE (Pycharm) didn't even trigger a warning.
I'm having some issues adding a custom footer to my Sphinx .html files. I'm using the sphinx_rtd_theme. I've checked this post and tried it (and some of the suggestions in the comments) but to no avail. I'm not sure what I'm missing. Apologies if I haven't posted enough here to actually indicate what is causing the problem. Any help or suggestions is appreciated!
My css theme file has been (poorly) modified by myself (I'm not an HTML/CSS person!) but I don't think that should matter? The only other thing I can think of is maybe I have to do something special when I re-compile the output files. I just use:
make clean html && make html
My conf.py is located at: root/source/conf.py. Here's some excerpts from my conf.py file:
import sphinx_rtd_theme
project = 'Project Name'
copyright = '2021, My Company'
author = 'My Name, Coworker Name'
master_doc = 'Home'
extensions = ["sphinx_rtd_theme", "sphinx.ext.todo"]
todo_include_todos = True
templates_path = ['_templates']
source_suffix = ['.rst']
html4_writer = True
html_theme = 'sphinx_rtd_theme'
# html_theme_path = ['_static']
html_static_path = ['_static']
# html_extra_path = []
html_show_sphinx = True
html_show_copyright = True
html_style = 'css/my_theme.css'
Here's my layout.html file that I have overridden. It's located in the path shown in the comment.
<!-- layout.html
* Place this file in root/source/_templates
* -->
{% extends "!layout.html" %}
{% block extrahead %}
{{super}}
<link href="{{ pathto("_static/my_theme.css", True) }}" rel="stylesheet" type="text/css">
{% endblock %}
{% block extrafooter %}
{{super}}
<div class="footer">
My custom footer just needs to add a single sentance to the existing footer.
</div>
{% endblock %}
Do you want to add a custom footer or replace the default one? in my case, I only need to override the footer.html file instead of layout.html.
Here's what I do that 100% worked for my Sphinx documentation:
create a footer.html in the _template folder of your Sphinx project.
then add this:
{% extends "!footer.html" %}
{%- block contentinfo %}
{{ super }}
<!-- your custom footer here-->
{% endblock %}
be mindful in which block your footer is actually contained within. In my case it's inside contentinfo
So I found a workaround.
1. Copy existing RTD html files
I copied the existing RTD .html files from my virtual environment folder. On my system it was located at the usual place:
.../Miniconda3/envs/my_env_name/Lib/site-packages/sphinx_rtd_theme/
I found the following files:
breadcrumbs.html
footer.html
Layout.html
search.html
searchbox.html
theme.conf
versions.html
I copied those to my working directory for my project:
.../Documentation-repo/Sphinx/root/source/_templates/
2. Edit conf.py file in working directory
I opened my conf.py file and changed the following:
# Add any paths that contain templates here, relative to this directory.
# Uncomment the line below to enable customized template #
#
# templates_path = ['_templates']
to this:
# Add any paths that contain templates here, relative to this directory.
# Uncomment the line below to enable customized template #
#
templates_path = ['_templates']
3. Add new content to footer.html file
I opened footer.html and edited it to add the content I wanted at the bottom. In my case it was as simple as adding my single sentence of changes below the {%- block extrafooter %} {% endblock %} line. Easy. Might not be the perfect solution but it works for what I need.
Im trying to use templatetags, but when i write {% load static %} on top of html document and run, it takes this as a text, and does not load the static.
I set the static config in settings.py but stills not working
{% load static%}
<!DOCTYPE html>
<html>
...
</html>
when i open the file on browser or when i send the template via email, as expected in the proyect, the css works, but the images doesnt. I realized i'd use the static dir, but the line: {% load static %} is shown in the browser as text.
Follow the steps below,
In "settings.py" set STATIC_URL = '/static/'
In your template ensure you type {% load static %}, do note that there should be a space between the percentage symbol "%" and the word "static". From your code snippet above this seems to be the source of the problem.
Ensure all your static files are stored in a folder named static as such "/static//example.jpg." then in the html file image tag should be "/example.jpg" %}" alt="My image">.
Do note that the method stated above is only suitable during the development stage. You can read the docs here for more information
I am looking for an answer of how to use Liquid for my background image path in css file and hoping the image can be seen in localhost and on Github at the same time.
The first background path only worked on Github and the second one only worked in localhost. Is there any way to achieve what I want without comment out the code every time I commit to Github? I was thinking maybe I need to use {{%%}} so I read the documentation from Jekyll and looked up for answers but still no luck.
CSS
---
---
.content-wrapper {
max-width: 800px;
margin: 0 auto;
height: 2600px;
background: url({{site.baseurl}}/_site/assets/img/dummy_blog_content.jpg);
background: url({{site.url}}{{site.baseurl}}/assets/img/dummy_blog_content.jpg);
}
YML
baseurl: /project
exclude: ["README.md"]
You can use absolute_url to automatically prepend the url and base_url in liquid but that should be done in your templates:
{{ "/assets/style.css" | absolute_url }}
The generated url shouldn't have _site in it, as that won't work in Github pages. In your template refer to your css location, in this case /assets/style.css:
<link rel="stylesheet" href="{{ '/assets/style.css' | absolute_url }}">
In my CSS, I have examples like this:
#defaultCountdown span.countdown_section {
color:#fff;
padding:7px 15px!important;
margin-bottom:2px;
font-weight:300;
background:url(../img/bg-white.png);
text-align:center
}
If you see the background tag, there's a url.
How do I serve this via staticfiles?
Thanks.
To answer your comment about using static in css or js files.... It could be done. Basically you would define a route and view just like for html pages.
But, this is strongly discouraged for a production level site. You will have a significant increase in page response time if you do this rather than serving these as static files.
To accomplish this, you simply pass content_type into your HttpResponse for your related view:
return HttpReaponse(my_dynamic_css, content_type="text/css")
css is a static file, as is your images and .js. So you use relative paths to reference them, unless you've got a specific need to use static tags for backgrounds, then you can move the style tag for background outside your css and into into your html:
<div class="generic" id="#defaultCountdown span.countdown_section" style="background: url('{% static 'img/bg-white.png' %}');></div>
If you need to use {% static 'url' %} in your CSS or JS, the easiest would be to define the CSS in a <style> block in your HTML template's <head> and the JS in a <script> block at the bottom of your template. Any CSS or JS that doesn't require the use of {% static 'url' %} can still go in separate .css and .js files.