Use Django template syntax in a css file
As you correctly pointed out, Django templates can be used for any text file, not just HTML. However, you need to make sure they're rendered by the template engine, providing a specific url and a view.
That way, you can expect to have all variables and tags interpolated, and in particular to have "static" replaced by settings.STATIC_URL.
However, I wouldn't insist in prepending "/static/" to the url of the CSS file itself ... that would be cheating, as you're rather rendering the file dynamically.
In practice:
project/urls.py
from django.urls import path
from django.views.generic import TemplateView
urlpatterns = [
...
path('css/home_global.css', TemplateView.as_view(
template_name='home_global.css',
content_type='text/css')
),
...
]
The view is rather trivial, and has been inlined in urls.py.
Please note I also specified the appropriate mimetype 'text/css'.
Here, I prepended a 'css/' prefix to the url, but this is not necessary, and you don't need a "css" folder in your project;
just make sure that the template engine can find "home_global.css"; that is, put it in the /template/ subfolder of any installed app,
or even in the project if it is listed among the installed apps:
project/templates/home_global.css
{% load static %}
body {
background-image: url("{% static 'citator/citator.jpg' %}");
}
You can check immediately the result by navigating to this url with your browser:
http://127.0.0.1:8000/css/home_global.css
which renders the document as follows:
body {
background-image: url("/static/citator/citator.jpg");
}
and include it in main template as required:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/home_global.css" type="text/css">
...
Should you need to render many css documents, it might be convenient to treat the filename as parameter, then use a single view for all documents. In this case I would opt for a function based view, for simplicity:
urls.py:
from django.urls import path
from . import views
urlpatterns = [
...
path('css/<str:filename>.css', views.css_renderer),
...
]
where:
views.py
from django.shortcuts import render
def css_renderer(request, filename):
return render(request, filename + '.css', {}, content_type="text/css")
and in your main template:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/home_global.css" type="text/css">
<link rel="stylesheet" href="/css/another.css" type="text/css">
<link rel="stylesheet" href="/css/yet_another.css" type="text/css">
...
Export css file to Django template language
Css, not so sure but converting HTML template to django templates you should try
https://github.com/L4TTiCe/djangify
Using a Django variable in a CSS file
You basically have two options:
Serve your CSS dynamically, with an entry in urls.py, etc., just as if it were an HTML page. Your template file will simply be CSS instead of HTML, but will use normal Django template syntax, etc.
Shortcut: Reference your background image with a relative path. This may or may not be possible for your environment, but it's a convenient way of having a static CSS file reference different paths depending on where it's hosted.
Django template inheritance // how to use multiple css files?
Add a {{ block.super }}
(search for "super") in the deriving template's block override to use both the parent content and your extension:
{% block head_css_site %}
{{ block.super }}
<link href="{% static 'Quotes_app.css' %}" rel="stylesheet" type="text/css">
{% endblock head_css_site %}
Using template language in CSS files correctly
Is the generated stylesheet being served with the correct mime type? If not, the browser might not interpret it as CSS.
I can’t remember if render_to_response
accepts content_type='text/css
as an argument, but there is a way to set it if Django isn’t already using the correct mime type.
Edit: as @TommasoBarbugli pointed out, you want the mimetype
argument for render_to_response
.
(Firefox’s Firebug add-on, or the Web Inspector in Chrome/Safari, should be able to show you the stylesheet’s mime type.)
Related Topics
Relative Padding Is Relative to What
Is Decimal Precision When Specifying a Font-Size Respected by All Browsers
Absolute Positioning and Its Parent Element
Input Padding Cutting Out Text in Firefox
How to Set Multiple CSS Style Properties in Typescript for an Element
A Wide Div with Unlimited Width
::Before/::After + Flexbox in Mdn
Best Practices - Only Download CSS You Need, or Use a Minification Process
Bootstrap 4 CSS Causing Chrome's Print "Layout" to Disappear
Align Block Elements on Top When Using Line-Height
Chrome Columns Bug When Number of Columns Is Less Then Column-Count
CSS 3 or Svg Wave in a Background