How to customize Flask Admin templates?

Question

I'm trying to RTL the flask admin template, I know I can override the existing templates, but how do I change only the CSS? Any ideas?

Bougainville

Answer 1

Put your CSS changes in a new CSS file in /static/css/my_flask_admin.css.

Then override the HTML template. This can be done by creating a file called /templates/admin/master.html with the following contents:

{% extends admin_base_template %}

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

The extends and block calls inherit the original template and hook into the CSS definitions. The super() call loads the original CSS files. The url_for(...) call appends your CSS file after those, effectively prioritizing your file over the originals.

Unscathed

Saved me some time. – Stephanestephani

Partial answer. Where is the HTML template, where does it go? – Roughspoken

@cal97g Have a look at github.com/flask-admin/flask-admin . For example you can use the simple example in the examples subdirectory: Put your css file in the newly created static/css subdirectory. Then you can past the above snippet in its template/admin/index.html file directly after the first and befor the second line. – Unscathed

Answer 2

Setting the environment variable FLASK_ADMIN_SWATCH on your flask app was a life-saver for me not having to mess with overriding any HTML.

eg. FLASK_ADMIN_SWATCH = 'litera'

Lhasa