Django how to change CSS according the app you are in

Question

I am pretty new with Django, I am customizing my admin section and I'd like to change the CSS according to the app I am browsing. Is it possible? I noticed that the uploaded CSS is the one in the first static folder found by the system. Is there some trick to do this?

I tried to make a static folder in every app but the selected CSS is always the first.

I am trying in this way... but the app_name is always empty even if I am in the admin site... Always the default CSS is loaded (the blue one).

portale_ict/templates/admin/base_site.html

{% extends "admin/base.html" %}
     {% block title %}{% if subtitle %}
          {{ subtitle }} | {% endif %}{{ title }} | {{ site_title|default:_('Django site admin') }}
     {% endblock %}

     {% block branding %}
          <h1 id="site-name"><a href="{% url 'admin:index' %}">Portale ICT Administration</a></h1>
     {% endblock %}

     {% load i18n static %}

     {% block extrastyle %}
          <h1>{{ app_name }}</h1>
          {% if app_name == 'ict' %}
               <link rel="stylesheet" type="text/css" href="{% static 'admin_color_green.css' %}"/>
          {% elif app_name == 'ins' %}
               <link rel="stylesheet" type="text/css" href="{% static 'admin_color_purple.css' %}"/>
          {% endif %}
     {% endblock %}

     {% block nav-global %}
{% endblock %}

This is working and it'is loading the green CSS (always) but this is not what I want:

{% extends "admin/base.html" %}
     {% block title %}{% if subtitle %}
          {{ subtitle }} | {% endif %}{{ title }} | {{ site_title|default:_('Django site admin') }}
     {% endblock %}

     {% block branding %}
          <h1 id="site-name"><a href="{% url 'admin:index' %}">Portale ICT Administration</a></h1>
     {% endblock %}

     {% load i18n static %}

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

     {% block nav-global %}
{% endblock %}

The structure is

Thank you all.

Answer 1

You can add {% block script %}{% endblock %} and {% block style %}{% endblock %} to the body of the layout.html file of a specific app--that is in the templates folder. After that, writing between these tags while creating another template means inserting code to the head of the page's HTML. Between these tags, you can link files, or directly write JavaScript, CSS. You can reffer here for more information.

Furthermore, since you will probably share the same CSS file between different templates of the same app, you will probably want to attach the main file to the layout.html, which means you idally need to have a seperate templates folder for each app.

Note: Changing style for Django-admin app would be more complex, as its template files are located elsewhere, and--since you said you were a beginner--they look rather cryptic. Nonetheless, for that you can reffer here.