13

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?

2 Answers2

31

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.

Nikolay Shebanov
  • 1,363
  • 19
  • 33
Sebastian Stigler
  • 6,819
  • 2
  • 29
  • 31
  • Saved me some time. – T.W.R. Cole Oct 17 '16 at 20:52
  • 1
    Partial answer. Where is the HTML template, where does it go? – Callam Delaney Aug 09 '17 at 09:25
  • @cal97g Have a look at https://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. – Sebastian Stigler Aug 12 '17 at 12:37
0

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'

Killian
  • 26
  • 2