Django Load Block for CSS

Django load block for css

You need to use {% load static %} first.

How to organize HTML with CSS block content in Django

In my opinion, it's a good idea to modularize your templates. For example, if you have components that you know will have very specific needs for different javascript libraries, you can create a block and override the parent. You could organize your main index file as your "driver and include engine" for your modular components (other template files you include in your index file). This is one of the approaches I've taken in the past.

you would extend the main html file and then override the content block with whatever you are going to put inside of it. Each section of your site (presumably) will have a top level template. For example: you have your main html file that acts as the driver which includes everything that will be shared across all the templates that will be extending it and overriding the content block.

Example base file:

{% load staticfiles %}
<html lang="en">
<head>
    {% block meta %}
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
    {% endblock %}

    <title>{% block title %}your title override{% endblock title %}</title>

    <!-- Favicon -->
    <link rel="icon" href="{% static "favicon.ico" %}"/>
    <!-- LOAD CSS FILES -->
    {% block stylesheets %}
        {% include 'path/to/your/stylesheets.html' %}
    {% endblock stylesheets %}
</head>

<body>
{% block header %}
    {% include 'path/to/your/header.html' %}
{% endblock header %}

{% block content %}{% endblock content %}
<br>
<br>

{% block footer %}
    {% include 'path/to/your/footer.html' %}
{% endblock footer %}

<!-- Load JS last for load times -->
{% block javascripts %}
    {% include 'path/to/your/javascripts.html' %}
{% endblock javascripts %}
</body>
</html>

Then you can just have this in your view:

from django.template.response import TemplateResponse

def index(request):
    context = {}
    return TemplateResponse(request, 'path/to/your/template.html', context)

Trying to load a css stylesheet from a child template in django

Need to give the <link> it's own line

{% extends "base.html" %}
{% load static %}
{% block title %}Rants{% endblock %} 
{% block additionalStyles %}
<link rel="stylesheet" href="{% static 'rants.css' %}"/>
{% endblock %}

Now works

Django CSS not working when using block content

Since you are including the navbar template in your current template, it is bound to bring its css with itself and overwrite the css in your current template.

The best practice to work around this issue would be that you give class names to your navbar tags and use them in its css specifically for your navbar tags.

Django Templates: Use different css for pages

You can use the same concept that applies to {% block content %} in that you can fill it in or extend it on a page by page basis.

Hence, in base.html, create a block called styles in the head section (or anywhere you want to load your CSS):

{% block styles %}
{% endblock %}

Now, you can extend this block on a per page basis in any of your templates that use base.html:

Example: page1/template-view.html

{% extends "base.html" %}
{% load staticfiles %}

{% block styles %}
    <link rel="stylesheet" href="{% static 'css/page1.css' %}">
{% endblock %}

Django Load Block for CSS