bootstrap-4flask-admin

How can I customise flask-admin to add it to a sb-admin themed app


I have an existing application that I want to add flask-admin too and retain the same look and feel in the admin interface. Ideally I'd have the admin interface retain the side menu from the bootstrap4 theme I am using (sb-admin-2). However, I can't figure out how to do that.

I would at least like to format the page a little nicer so looking at the flask-admin documentation there is this sentence:

Customize the look by specifying a Bootswatch theme that suits your needs (see http://bootswatch.com/3/ for available swatches).

But no information on how to do this. Can someone point me in the right direction to either embed the admin pages in my current app (preferable) which is just a bootstrap4 theme, or add some other custom theme from bootswatch?

I tried creating a html file in templates/admin to override master.html with this to no effect:

{% extends admin_base_template %}

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

Solution

  • To use a Bootswatch theme do the following:

    In your configuration file set the following:

    # Fluid layout True or False
    FLASK_ADMIN_FLUID_LAYOUT = True
    # Set the theme name
    FLASK_ADMIN_SWATCH = 'flatly'
    

    In your static folder create the following directory structure noting how the theme name is used, in this instance the 'flatly' theme:

    bootstrap/bootstrap4/swatch/flatly/bootstrap.min.css
    

    For Bootstrap 3 use the following directory structure:

    bootstrap/bootstrap3/swatch/flatly/bootstrap.min.css