Django template inheritance // how to use multiple css files?

Question

I would like to find a solution to have multiple CSS files for different templates using Django template inheritance.

So far I could extend my base.html template with another apps template. Now I would like to use a seperate css files for the apps html templates (one app = 1x html, 1x js, 1x css). But when I include the template into the template tag it replaces the css file from the base.html and crashes the site.

How can someone implement a second css file into a extended html template that only refers to the extended part and doesn't "touch" the base.html?

Thank you for your guidance in advance.

extended html template which crashes site because of replacement of base.css file:

{% extends 'templates/base.html' %}
{% load static %}

{% block head_css_site %}
<link href="{% static 'Quotes_app.css' %}" rel="stylesheet" type="text/css">
{% endblock head_css_site %}

{% block content %}
<h1>Test</h1>

{% endblock %}

{% block footer_javascript_site %}
<script src="{% static 'Quotes_app.js' %}"></script>
{% endblock footer_javascript_site %}

base.html:

{# HTML5 declaration #}
<!DOCTYPE html>
{% load static %}
<html>
{# Make modifiable head elements #}

<head>
  <title>{% block title %}  {% endblock title %} DASHEX </title>
  {% block head_favicon %}
  <link rel="icon" type="image/png" href="{{ STATIC_URL }}images/logo.jpg">
  {% endblock head_favicon %}
  {% block head_meta %}
  {% block head_meta_charset %}
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  {% endblock head_meta_charset %}
  {% block head_meta_contentlanguage %}
  <meta http-equiv="Content-Language" value="en-US" />
  {% endblock head_meta_contentlanguage %}
  {% block head_meta_viewport %}
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  {% endblock head_meta_viewport %}
  {% endblock head_meta %}


  {% block css %}
  {% block head_css_site %}
  <link href="{% static 'base.css' %}" rel="stylesheet" type="text/css">
  {% endblock head_css_site %}
  {% endblock css %}


</head>
[...]

project structure:

...doh. Solved by myself. I moved the stylesheet of the base.html template out of the template tag and used the template tag in the extended file to link the required css file. @mod, should I delete the post again? — JSRB
– JSRB, Commented Nov 4, 2019 at 17:28

AKX · Accepted Answer · 2019-11-04 17:29:08Z

2

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

answered Nov 4, 2019 at 17:29

AKX

171k16 gold badges146 silver badges228 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Django template inheritance // how to use multiple css files?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related