This question already has answers here:
How to add a browser tab icon (favicon) for a website?
(13 answers)
Closed 5 years ago.
I try to learn flask. My test is mainly based on this blog.
I would like to change the icon right next the title.
Here is my base.html :
<html>
<head>
<link rel="flask" href="../static/flask.ico" type="image/x-icon">
{% if title %}
<title>{{ title }} - microblog</title>
{% else %}
<title>Weclome to microblog</title>
{% endif %}
</head>
<body>
<div>Microblog: Home</div>
<div>Ajout: Add</div>
<div>Clean: Clean</div>
<hr>
{% block content %}{% endblock %}
</body>
</html>
The base.html is in the template/ folder and the flask.ico is in static/. So all the html pages that inherite from it, should have the new icon. But it doesn't work.
I have already tried:
<link rel="flask" href="static/flask.ico" type="image/x-icon">
<link rel="flask" href="static/flask.png" type="image/png">
<link rel="flask" href="{{ url_for('static', filename='flask.ico') }}" type="image/x-icon">
<link rel="flask" href="http://icons.iconarchive.com/icons/paomedia/small-n-flat/24/flask-icon.png" type="image/png">
And none of this has worked.
Thanks for your replay.
edit:
the solution was to change rel="flask" for rel="icon".
Thanks
As per W3C ruling, the preferred method to add a favicon to a page is to use rel="icon".
Example:
<link rel="icon"
type="image/png"
href="http://example.com/myicon.png">
Related
This question already has answers here:
How to serve static files in Flask
(24 answers)
Closed 2 months ago.
I am currently learning HTML and I was trying to create an external CSS file. But when I try to link them together I keep getting a 404 error saying that the css file cannot be found. Both the HTML and CSS file is in the same folder. I am using Notepad++.
<html>
<head>
<link rel="stylesheet" type="text/css" href="global.css">
</head>
<body>
<form>
<ul>
<li><h1>Member Login</h1></li>
<li><label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name.."></li>
<li>Password</li>
<li>Submit</li>
<li>Forgot Password</li>
</ul>
</form>
</body>
</html>
This is your code from the third line
<link rel="stylesheet" type="text/css" href="global.css">
you forgot to add a back slash
'<link rel="stylesheet" type="text/css" href="global.css" />
Reference: https://www.freecodecamp.org/news/how-to-link-css-to-html/
Type the path of the CSS file wherever you have saved it correctly in the html file.
Hope it helps
You forgot the closing tag in the link tag it should go
<link rel="stylesheet" type="text/css" href="global.css"/>
I made a website and got to the point where you need to connect styles.css, but after all the manipulations, my site has not changed and no design has been connected. I tried to rewrite css and html, tried different tips, but nothing helped me. any ideas?
I would be grateful for any advice!
1part base.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{title}}</title>
<link type="text/css" href="{% static 'women/css/styles.css' %}" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="{% static 'women/images/main.ico' %}" type="image/x-icon"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table class="table-page" border=0 cellpadding="0" cellspacing="0">
<tr><td valign=top>
{% block mainmenu %}
<div class="header">
<ul id="mainmenu" class="mainmenu">
<li class="logo"><div class="logo"></div></li>
{% for m in menu %}
{% if not forloop.last %}
<li>{{m.title}}</li>
{% else %}
<li class="last">{{m.title}}</li>
{% endif %}
{% endfor %}
</ul>
<div class="clear"></div>
</div>
{% endblock mainmenu %}```
I've added screenshots below if anyone needs them.
[1][1]
[2][2]
[3][3]
[4][4]
- PS I have already tried these options, gives an error
```<link type="text/css" href="{% static 'women/css/styles.css' %}" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="{% static 'women/images/main.ico' %}" type="image/x-icon"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">```
[1]: https://i.stack.imgur.com/3exw2.png
[2]: https://i.stack.imgur.com/ye5k7.png
[3]: https://i.stack.imgur.com/ZKSs6.png
[4]: https://i.stack.imgur.com/eQRvd.png
Don't know if its the same issue but I find clearing the cache can fix styling issues (ctrl+f5)
Check static dirs in settings.py and correct static dirs, because it may cause issues in connecting with dirs.
[for reference I am giving you settings of static dirs below]
settings.py
STATIC_URL = "/static/"
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "media")
If the settings are okay then remember whenever you change something in CSS browser doesn't Change CSS directly you need to make a hard reset your browser's tab by pressing
Ctrl + shift + R
If it's on server, make sure to collectstatic after you make changes in files of your static folder. To make your static folder updated.
python manage.py collectstatic
Then restart gunicorn and nginx
sudo systemctl daemon-reload
sudo systemctl restart gunicorn
sudo systemctl restart nginx
However if it's in your local computer, you might just need to hard-reload your browser (ctrl+shift+R).
If it still doesn't work, make sure the path of your css file is correct.
I have a flask app, about saving strings into some db files.
I have a base.html file which is like navbar which i extend to every page. That navbar has a lots of links which require a specific string that the user has to enter, so i wanna know if there's a way to inject strings into that base.html file, cuz i can't make a route for a navbar base file right?
Navbar base file down below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/base.css">
<title>
BukkitList - {% block title %}{% endblock %}
</title>
</head>
<body>
<div class="NAV_B Hidden" id="MENU">
<div class="NAV_B_LINKS">
<img src="/static/assets/img/cube.png" alt="">
<a class="SUS" href="/">Home</a>
</div>
<div class="NAV_B_LINKS">
<img src="/static/assets/img/list.png" alt="">
<a class="/List{{UserId}}" href="/List">List</a>
</div>
<div class="NAV_B_LINKS">
<img src="/static/assets/img/add.png" alt="">
<a class="/Task_Add/{{UserId}}">Add Task</a>
</div>
<div class="NAV_B_LINKS">
<img src="/static/assets/img/settings.png" alt="">
<a class="SUS">Settings</a>
</div>
</div>
<div class="NAV_S" id="NAV">
<img src="/static/assets/img/cube.png" alt="">
<h3>{% block navtitle %}
{% endblock %}
</h3>
<img src="/static/assets/img/menu.png" alt="" onclick="Menu()">
</div>
{% block main %}
{% endblock %}
</body>
<script src="/static/js/base.js"></script>
</html>
Yes i need that UserId to be injected.
the question is not very understandable of where the user is inputting the {{UserID}} but from what I understand that there is that userID that you can select from the db in the Python file and you want to pass it into the HTML page or if you have a sign-in in your page, you can grab that ID when they sign in using flask_session either way if you need to pass that userID from the Python file you will need to include it in your return, so in python it will look like that if you are using session:
#app.route("/")
def main():
UserIDpy = Session["YourSessionVar"]
return render_template("YourHTMLpage.html", UserID = UserIDpy)
The UserID is the var name that will be passed into the HTML page and UserIDpy is the var name that what UserID saved at.
So that code will replace all of {{ UserID }} you have at you HTML page
I believe you can do this with Flask's session variable. It allows you to create and update a global variable that can be referenced in templates even when you don't render them directly. This is similar to Lychas' answer, but should be more suited for your purpose.
Create/update a session variable in your login route (or wherever you want to update this value) with this line:
session['UserId'] = your_id_value_here
You can then use this session variable in your jinja templates with something like the following:
<a class="/Task_Add/{{ session['UserId'] }}">Add Task</a>
(Note, if you are not already using session, you will need to import it with from Flask import session.)
This question already has answers here:
Link to Flask static files with url_for
(2 answers)
Closed 1 year ago.
I am new to web development,and I was building my first website with Flask.When I first runned the website,Bootstrap was not working,after that I went in inspect mode and it gave me some errors.
I tried emptying the cache,but it did not change anything.
The projects folders are arranged like this:
This is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css">
{% if title %}
<title> Project--{{Title}} </title>
{% else %}
<title> Project </title>
{%endif%}
</head>
<body>
<div class="alert alert-primary" role="alert">
Hello
</div>
<script src="js/bootstrap.js"></script>
</body>
</html>
The python code:
from flask import Flask,render_template,url_for
app=Flask(__name__,template_folder='Template')
#app.route("/")
def home():
return render_template('Home.html',title='Home')
if __name__=='__main__':
app.run(debug=True)
How can I fix this issue?
Thanks in advance!
You have to keep js and css folder in a folder named static at same level that of templates folder where you will keep only html files.
You can use href="{{ url_for('static', filename='css/bootstrap.css') }}" for a css file named bootstrap.css which is in css folder in static folder. Same you have to do with us files , src="{{ url_for('static', filename='js/bootstrap.js') }}"
I'm trying to add a maintenance page to my Flask site. I have created a route called /maintenance that renders my maintenance.html template. I then added an #app.before_request to check whether the site is in maintenance mode (a Boolean value).
When I request the /maintenance route directly from the browser, the page displays fine:
However, when the route is called from the #app.before_request, it displays like this:
As can be seen from the console window, I'm getting the following message:
'Resource interpreted as Stylesheet but transferred with MIME type text/html'
Here is the code for the /maintenance route and #app.before_request:
#app.before_request
def check_for_maintenance():
if maintenance == True and request.path != url_for('maintenance'):
return redirect(url_for('maintenance'))
#app.route('/maintenance')
def maintenance():
if request.method =='GET':
return render_template('maintenance.html')
Here's the code for the maintenance page (ish, it inherits lots of parent Jinja templates but the important stuff is here):
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/static/css/theme.css">
<link href="{{ url_for('static', filename='fonts/peenu/stylesheet.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='favicon.ico') }}" rel="icon">
</head>
<body>
<div id="maintenanceBackground">
<div id="maintenanceTextParent">
<img id="spannerIcon" src="/static/media/graphics/spanner.png" alt="Spanner icon">
<h1 id="maintenanceText1">We're doing some work at the moment</h1>
<h2 id="maintenanceText2">We hope to be running again soon. Please try again later.</h2>
<img id="whiteLogo" src="/static/media/graphics/logoWhite.png" alt="Custom Crochet logo">
</div>
</div>
</body>
</html>
This is somewhat related to flask. If you try to access the html directly without flask's webserver, the html page loads with applied css, as expected.
To be more specific, actual solution is
to create a "css" folder in "static" folder.
add css in path of ".css" file (update all occurrence for any .css file with expected relative path)
eg.
change => href="{{ url_for('static', filename='stylesheet.css') }}" to href="{{ url_for('static', filename='css/stylesheet.css') }}" OR
change => href="../static/main.css" to href="../static/css/main.css"
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
In your case
try moving stylesheet.css from "fonts/peenu/stylesheet.css" to "static/css" folder.
change => href="{{ url_for('static', filename='fonts/peenu/stylesheet.css') }}"
to
href="{{ url_for('static', filename='css/stylesheet.css') }}"
I had spent some time on this issue and was able to resolve it with above mentioned solution.