CODEWITHSUNDEEP
twitter-bootstrapflaskflask-bootstrap
urbainy
urbainy

Reputation: 77

how to override default theme of bootstrap in flask_bootstrap environment

I am making an application by using flask and flask_bootstrap.

I choose a theme from this web site. You can edit the variables of that theme online to customize it. And at last you can download the edit result as bootstrap.css to your local.

Now I have to copy&paste this bootstrap.css to venv/lib/python3.4/site-packages/flask_bootstrap/static/css and overwrite the original one. Only by this way, I can keep my website working with error message. But every time I upgrade the flask_bootstrap in pip virtual environment, I have to copy&paste the css file once again. I feel it boring and I believe there should be a solution.

I tried to put the customized site-generated bootstrap.css in my own static folder and add <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='theme_page.css') }}" /> reference. But a batch of error messages pop, like: "GET /fonts/glyphicons-halflings-regular.woff2 HTTP/1.1" 404 -. I know this is because in the customized css file, there is reference to the font folder but obviously that my own static folder is not the one which locates in venv.../flask_bootstrap/static and really include /fonts.

So any good suggestion? Thanks!

Upvotes: 1

Views: 1290

Answers (1)

Trevis
Trevis

Reputation: 568

What I did was

  • take out the lines including a reference to external files (so the fonts) from the custom bootstrap.css, and
  • include them in my base template in {% block styles %} with:
<style>
    @font-face {
    font-family: 'Glyphicons Halflings';
        src: url('{{ url_for("bootstrap.static", filename="fonts/glyphicons-halflings-regular.eot") }}');
        src: url('{{ url_for("bootstrap.static", filename="fonts/glyphicons-halflings-regular.eot?#iefix") }}') format('embedded-opentype'), 
             url('{{ url_for("bootstrap.static", filename="fonts/glyphicons-halflings-regular.woff2") }}') format('woff2'), 
             url('{{ url_for("bootstrap.static", filename="fonts/glyphicons-halflings-regular.woff") }}') format('woff'), 
             url('{{ url_for("bootstrap.static", filename="fonts/glyphicons-halflings-regular.ttf") }}') format('truetype'), 
             url('{{ url_for("bootstrap.static", filename="fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") }}') format('svg');
    }
</style>

This will look for the fonts in the original place, that can be upgraded.

Or you can put them in a template and use something like:

<style>
    {% include "_bootstrap_fonts.css" %}
</style>

Upvotes: 1

Related Questions