[FIXED] Jinja - Using a different css for each extended template

Issue

I've come across Flask-Appbuilder as it could solve my problem. I'm trying to load different css for every template where only the skeleton remains the same.

I found this solution https://flask-appbuilder.readthedocs.io/en/latest/templates.html

However it doesn't work. Not for me anyways. I used pip3 install flask-appbuilder and everything went OK. I created appbuilder directory within templates directory. Then I used:

{% extends 'appbuilder/base.html' %}

{% block head_css %}
    {{ super() }}
    <link rel="stylesheet" href="url_for('static',filename='css/your_css_file.css')}}">
{% endblock %}

what might be causing the problem ? It's like the block head_css is being completely ignored. Only the basic bootstrap css is being loaded.

Solution

You can have a single layout.html file extended by all templates, then use if statements to select the correct CSS style sheet for each template by accessing request.endpoint which is basically the view function that renders a template.

{% if request.endpoint == 'index' %}
    <link href="{{ url_for('static', filename='main.css') }}" rel="stylesheet" type="text/css">
{% elif request.endpoint == 'another' %}
    <link href="{{ url_for('static', filename='another.css') }}" rel="stylesheet" type="text/css">
{% endif %}

Answered By - simanacci