Как переопределить стиль flask_admin для всех шаблонов?

Я работаю над простым веб-приложением, а для отображения БД использую модуль Flask_admin. Я хотел бы применить пользовательский CSS ко всем моим шаблонам, например. Пользовательский навар с синей рамкой. Вот как выглядит мой шаблон index.html:

{% block head %}
    {{ super() }}
.navbar {
  border-color: #019ced;
  border-width: 1px;
  border-radius: 0;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top: none;
  box-shadow: none;
}
{% endblock %}

Он отлично работает, но я хотел бы применить этот пользовательский стиль панели навигации ко всем шаблонам.

Я пытался сделать это с помощью master.html

{% extends 'admin/base.html' %}
{% block head_css %}
{{ super() }}
.navbar {
  border-color: #019ced;
  border-width: 1px;
  border-radius: 0;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top: none;
  box-shadow: none;
 }
 {% endblock %}

а затем расширить его в index.html без каких-либо успехов. Я думаю, я мог бы определить пользовательские шаблоны для каждого представления, наследуемого от родительского и переопределяющего раздел заголовка, в который я включаю файл CSS с пользовательской панелью навигации, но я ищу более простой способ.

Пожалуйста, дайте мне знать, как правильно определить, создать и наследовать базовый шаблон, в котором я могу определить свой собственный CSS. Заранее спасибо.


python html css jinja2 flask-admin
person Persi    schedule 06.05.2018    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Ваш файл master.html должен выглядеть следующим образом:

{% extends admin_base_template %}
{% block head_css %}
    {{ super() }}
    <style>
        .navbar {
            border-color: #019ced;
            border-width: 1px;
            border-radius: 0;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
            border-top: none;
            box-shadow: none;
        }
    </style>
{% endblock %}
person pjcunningham    schedule 08.05.2018
comment
Объяснение было бы неплохо: элемент блока Jinja2 head_css предлагает возможность делать дополнительные записи в разделе <head> аннотации HTML. Назначение элемента block, очевидно, состоит в том, чтобы добавить сюда информацию таблицы стилей. Конечно, это может произойти в отсутствующем <style>...</style>, но вы также можете включить сюда внешний файл через <link href="path/to/your/file.css" rel="stylesheet">, что чище. - person colidyre; 16.09.2019