How can I customise flask-admin to add it to a sb-admin themed app
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
Bootstrap with Flask
You need to create templates and static folders in your project folder, put all .html files in templates folder and all other files (CSS, JS, JPG, etc) in static folder and then in your html file use url_for to load the static files, instead of the default HTML way.
This is a sample project structure:
-project
app.py
- templates
index.html
-static
-css
style.css
-js
example.js
-img
example.jpg
- You can also use custom folders and structure but you need to define them while creating the application instance Docs
Bootstrap theme doesn't charge with flask
Your bootstrap link does not work. Try using this link instead
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
change background color and text color for flask navbar
The Flask-Nav and Flask-Bootstrap use Bootstrap 3, so you can override the corresponding CSS class in your base template like this:
{% extends "bootstrap/base.html" %}
{% block styles %}
{{ super() }}
<style>
.navbar-nav {...}
.navbar-default {...}
</style>
{% endblock %}
{% block navbar %}
{{ nav.my_nav() }}
{% endblock %}
For custom navbar color, check out this answer.
Related Topics
HTMLpurifier with Borderradius
Is Position: Static Identical to Position: Relative, with No Other Properties Specified
How to Alternate The Number of Children Between Odd and Even Rows
Unwanted CSS Injected into Posts
CSS Background Color Extend as Far as Text
Large Iconfont Icon Cut Off on The Right Side
Datatables with Bootstrap 4 Looks Messy
<Style> and <Script> Tags Are Displayed Physically on Page
Are There Appearance CSS Rules for Webkit-Overflow-Scrolling: Touch "Handle" in iOS 5
Change Background Image of Li on an A:Hover
Advanced Custom Syntax Coloring for Aptana Studio 3 (.Less)
Adding New Theme to ASP.NET MVC 5 Dont Work
How to Make Body Background Image Transparent in CSS
Pointer Events: None, Filter, Works in Ie8 and Anywhere, Not Ie9
Flex-Basis: Webkit/Blink Ignore Intrinsic Aspect Ratio
How to Remove The Blue Border That Appears When Clicking on a UIb-Accordion-Heading