I am trying to add an image in a title bar and after searching online I didn't got any answer that can satisfy the problem
<link rel="icon" type="img/png" href="~random image link~" >
Put the icon in your static directory as favicon.ico good size for it is 16 x 16, and now simple use url_for function to get that icon, from docs
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
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"/>
Hi i am trying to host a server my raspberry pi with flask but css does not work. It shows plain html. when i try the same thing with same file names, location and same code it works but from my raspberry pi it does not work?
To Fix I Tried (so don't bother saying):
Tried using static or normal way
Tried doing cmd+shift+R
Tried changing file names
HTML:
<!DOCTYPE html>
<html>
<head>
<title>THD</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<html>
FLASK:
from flask import Flask, render_template
app = Flask(__name__)
#app.route("/")
def main_page():
return render_template('learn.html')
TREE VIEW:
Thank You So Much If You Can Fix It.
turns out i have made a typo i didnt notice it for hours my looked like this
<link rel="stylesheet" href=""{{ url_for('static', filename='styles.css') }}>
This is how it works:
<!DOCTYPE html>
<html>
<head>
<title>THD</title>
<link rel= "stylesheet" type= "text/css" href= "static/styles.css">
</head>
<html>
You have to call the relative path to the css file
Do this:
<link rel="stylesheet" href="../static/styles.css/">
You need to get out to templates folder with .. and then put path to styles.css
Hope this helps!
SO i was creating flask project but while working on index.html I wasn't able to access css,javascript etc files from static folder even after static_url
here is the code
<title>Clean Blog - Start Bootstrap Theme</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"
crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic"
rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?
family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="{{url_for('static', filename ='css/styles.css ')}}" rel="stylesheet">
</head>
wasn't able to access css files after using url_for('static', filename='path/to/file')
This is how I make it work:
href="{{ url_for('static', filename='filename.css') }}"
the css file is in the folder "static" in the same directory as the html file.
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.
Its weird but I removed everything in the css file, the website still shows all the colours and stuff. I dont know what happened so I need t ask for help.
here is the main html:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/bootstrap-dropdownhover.min.css" rel="stylesheet">
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='style.css') }}">
</head>
the style sheet:
(yes its literally nothing)
I'm running flask and I dont know whats happening so..
also the screenshot for the webiste when I put all the styles in:
would be happy if anyone can help me get past this part
Likely, your browser is caching the CSS. If you are in Google Chrome, a longer-term solution while developing is to open the DevTools (Ctrl+Shft+I), go to Network/Disable Cache and then hit the "open to new window" button so you can minimise it.