So with flask I know that I can add CSS with
<link ... href="{{ url_for('static', filename='stylesheets/style.css') }}" />
but if I am adding a google font which usually in HTML looks like
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
what do I need to edit/add for it to work with Flask?
Add the google font link to your index.html or any page that you want like this:
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename= 'mystyle.css') }}">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
{% endblock %}
Then, add the CSS font statement to your custom CSS file (mine is static/mysyle.css) :
body {
font-family: 'Open Sans Condensed', sans-serif;`
}
You can't use static here like you would normally for a link to a resource on the webserver. Your link is still essentially static but not related to anything you are serving. So you either put the Google font link directly in the HTML template, or as a variable expanding to the full link (which would be convenient if you aren't using the same header template everywhere and may change the font later).
Related
This question already has answers here:
How to serve static files in Flask
(24 answers)
Closed 1 year ago.
I have been trying for the last 45 minutes to figure out how to get my favicon on my flask page.
Here is my current code:
from flask import Flask, render_template, send_from_directory, url_for
import os
app = Flask(__name__)
#app.route("/")
def home():
return render_template("index.html")
#app.route("/store")
def store():
return render_template("store.html")
#app.route("/games")
def games():
return render_template("games.html")
#app.route("/americanstudios")
def americanstudios():
return render_template("as.html")
#app.route("/pear")
def pear():
return render_template("pear.html")
#app.route("/favicon.ico")
def fav():
return send_from_directory(os.path.join(app.root_path, 'static'), 'favicon.ico', minetype='image/vnd.microsof.icon')
if __name__ == "__main__":
app.run(debug=True)
With the base html being this:
<!DOCTYPE html>
<html>
<title>{% block title %}{% endblock %}</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- awesome.min.css">
<head>
<link rel="shortcut icon" href="{{ url_for('static',filename='favicon.ico') }}">
</head>
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", Arial, Helvetica, sans-serif}
</style>
<body class="w3-light-grey">
<!-- Navigation Bar -->
<div class="w3-bar w3-white w3-large">
</i>newtech
Store
Games
American Studios
PEAR Electronics
Log In
</body>
<div class="w3-main" style="margin-left:250px">
<div class="w3-row w3-padding-64">
<div class="w3-twothird w3-container">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</html>
And this is index.html
{% extends "base.html" %}
{% block title %}newtech inc.{% endblock %}
{% block content %}
<h1 class="w3-text-teal">Home</h1>
<p>Welcome to newtech inc, where we have the coolest new items for all purposes. Whether it's a new movie to watch, or a fun game, or maybe something else, we're here for you.</p>
{% endblock %}
The only line in head in base.html should load my favicon from the static folder as the favicon for the page. But for some reason, the favicon stays as the default favicon for the index page and all other pages.
My favicon is a 64 X 64 .ico file
And it is located in my static folder
And yes the static folder is in the same directory as main.py
But even with all of this the favicon still does not show up.
And yes I am running the correct main.py
Also tried this
Yet no luck. Can anyone help me?
to look for network error, you would need to look at the network tab of the dev tools. it shows that your get for favicon.ico is failing with 404. fix? add static folder to your app (refer 1 in code), and the add get for favicon and return the file - refer 2 in code.
from flask import Flask,render_template,send_from_directory
app = Flask(__name__, static_folder='static') # 1 ( either add here or add through some os join)
import os
#app.route("/")
def home():
return render_template("index.html")
#app.route("/static/favicon.ico") # 2 add get for favicon
def fav():
print(os.path.join(app.root_path, 'static'))
return send_from_directory(app.static_folder, 'favicon.ico') # for sure return the file
if __name__=="__main__":
app.run(debug=True)
the folder structure will be like :
Did you check out the Flask documentation already? They recommend a slightly different reference than what you have there:
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
https://flask.palletsprojects.com/en/1.1.x/patterns/favicon/?highlight=favicon
This is how I've referenced it.
{% load static %}
<link href="{% static 'Assets/img/globe.png' %}" rel="icon" />
I used a .jpg image and it’s now showing up. Still don’t know why a .png image is not working my head tag because they’re working in the body tag
I'm working on an email template, therefor I would like to embed a css file
<head>
<style>{{ embed 'css/TEST.css' content here }}</style>
</head>
instead of linking it
<head>
<link href="{% static 'css/TEST.css' %}" rel="stylesheet" type="text/css">
</head>
Any ideas?
I guess you could use include
<style>{% include "/static/css/style.css" %}</style>
https://docs.djangoproject.com/en/1.9/ref/templates/builtins/#include
But it might be better to load the contents of the css file in your view, and put it in the context of your view to send it to the template
You can use django-compressor package. It will add {% compress %} template tag that can join together bunch of JS or CSS files (or inlined code) and put it into template as new, big file or inlined code. For example to inline one CSS file, you can use:
{% compress css inline %}
<link href="{% static 'css/TEST.css' %}" rel="stylesheet" type="text/css">
{% endcompress %}
You can add more CSS files into one compress tag, they will be concatenated together and wrapped into one <style>tag.
Check usage examples for more details.
On solution would be the use of include:
<head>
<style>{% include "../static/css/TEST.css" %}</style>
</head>
But it is kind of messy!
You have to place a copy or link to your css-file in your templates directory. Or you use a hardcoded link as above, which may break in production.
I've got some trouble to load and compile a less file in my django template.
First of all I load one main less file in my header.html :
header.html
<link rel="stylesheet" href="/static/lib/bootstrap-.3.2/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="/static/lib/select2-3.5.2/select2.css" type="text/css"/>
<link rel="stylesheet" href="/static/lib/magnific-popup/magnific-popup.css" type="text/css">
<link rel="stylesheet/less" href="/static/less/style.less" type="text/css">
The less is loading without any problem.
Now I want to load specific less file for a specific django app. For example, I have an app named "helpdesk" and I want to do something like this :
helpdesk.html
{% block header %}
{{ block.super }}
<link rel="stylesheet/less" href="/static/helpdesk/less/style_helpdesk.less" type="text/less">
<script type="text/javascript" src="/static/helpdesk/js/helpdesk.js" charset="utf-8"></script>
{% endblock %}
In this case, less is not loading or compiling. I tried to use some django modules like django-compressor or django-static-precompiler but I was not able to make them work.
I looked after this for hours so any help would be really appreciated. Thank you.
Alright, I retried to use the django-compressor module and it worked !
I followed this link which is well explained : http://marklmiddleton.com/2013/using-less-with-django-on-heroku/
I currently have twitter bootstrap incorporated on my Django test site but it is not working properly.
I tested out an example of code on the bootstrap website: http://getbootstrap.com/2.3.2/components.html#labels-badges
All I had on the site is the success badge (green oval with a 2 in the middle)
<span class="badge badge-success">2</span>
However, only the oval and the "2" would be displayed but the green color round the "2" is not displayed. All I see is a grey oval with a "2" inside. Pretty much the same as the DEFAULT badge on the bootstrap website except there is a "2" instead of a "1".
I was wondering if anyone with Django and twitter bootstrap experience would help me with this issue.
Here is my views.py:
from django.http import HttpResponse
from django.template import RequestContext, loader
from django.shortcuts import render, render_to_response
def index(request):
return render(request,'homepage/index.html')
Here is my html file:
{% load staticfiles %}
{% load compressed %}
<!DOCTYPE html>
<head>
{% compressed_js 'bootstrap' %}
{% compressed_css 'bootstrap' %}
</head>
<html>
<body>
<span class="badge badge-success">2</span>
</body>
</html>
Thank you for all the help! much appreciated!
I think your compressed_js and compressed_css does not do the trick.
To check if everything is ok, use for exemple FireBug, then press F12 and point your mouse on the badge to see if the CSS rule is display on the left panel. Repeat this step for badge-success to try to find it.
After all of this i'll suggest a more classical way without compressed_xxx :
<link rel="stylesheet" href="{% static "bootstrap/css/bootstrap.min.css" %}" type="text/css" media="screen" />
<link rel="stylesheet" href="{% static "bootstrap/css/bootstrap-responsive.min.css" %}" type="text/css" media="screen" />
where bootstrap is the folder I put in the static one I setup in the settings.py file
Hope this will be usefull.