See the attached code: I get a 404 and there is a link to my directory.
<!DOCTYPE html>
<html>
<head>
<title>Flask App</title>
<link rel="stylesheet" href="{{url_for('static',filename='css/main.css')}}"
</head>
<body>
do you know whats wrong? see the directory here:
1: https://i.stack.imgur.com/g3Gia.jpg
I think you should move static folder to flask folder
Try this: {{ url_for('static', filename='main.css') }} thus without the css/
Do this:
<head>
<title>Flask App</title>
<link rel="stylesheet" href="/static//css/main.css"
</head>
in Flask edit this line:
this : app=Flask (__name__)
to this : app=Flask (__name__,static_url_path="/static")
Related
im a begginer here , struggling with basic stuff
I have my flask:
from flask import Flask , render_template , send_file , send_from_directory
import os
app = Flask(__name__)
#PRIMERA FUNCION
#app.route('/')
def index():
return render_template('prueba.html')
and i have my html :
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - The Arrow</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="arrow-1"></div>
<!-- partial -->
</body>
</html>
when I open the html file on browser it shows the css ,
but when I run flask css doesnt show and I cant figure out why!!!
I have try this
#app.route('/css/<path:filename>')
def css_file(filename):
file_path = os.path.join('css', filename)
return send_file(file_path)
and i also thought it was a problem of my folder layout but I already tried re arrange folders
Flask has different ways to do this, but the convention is to put static assets (like CSS) in the static directory (which should be at the root of your project) and link them in with Jinja and the url_for() function. so in your case it would look like this:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - The Arrow</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
More explained in the Flask docs
css located in my_blog/my_blog/blog/static/blog/style.css
manage.py in my_blog/my_blog
head of html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% static 'blog/style.css' %}">
<title>{% block title%} My blog {% endblock %}</title>
</head>
I'm using pycharm pro. Browser successfully load css file, but it's empty. Why this is happenning?
I don't see css loading in django console log, when pages load. I changed name of css file. And it's loaded, but once.
When I add new rule to it and reload server, browser still get old version of css.
Now it's works fine. Css loaded properly. I didn't change anything, so I don't know what did happen.
Add this to your settings.py:
os.path.join(BASE_DIR, 'static')
Then move your static folder to project's folder - /my_blog/static/blog/style.css instead of the current one.
I don't believe your href is formatted properly
Inside the project folder, I have created both the html and CSS file under 'venv' library root folder.
html file name - index.html
CSS file name - styles.css
code that I used to link CSS:
<link rel="stylesheet" href="styles.css" type="text/css">
This does not seem to work. Need help.
CSS is not available in PyCharm Community but it will work perfectly in the Professional edition. Also, if you face a problem with the static file use href="{% static "static/d.css"%}" and change the setting.py
You can see how to add it. I run the code below in PyCharm 2021.3.1 (Professional edition).
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="d.css" type="text/css" />
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
I am not sure but check it.
you can add the folder what the css file is found.
like this: <link rel="stylesheet" href="../root/styles.css" type="text/css">
I am trying to display my html files using python alone. Such as I would python code.py and I would be able to access my html at localhost:8080
html files are static files that access each other. For example, index.html directs to contact.html and all of them access css folder.
How do I open my html files so it displays it on the webpage?
below is what I have so far.
html_file = []
with open("index.html", "r") as f:
for line in f.readlines():
html_file.append(line)
Is there way to do python code.py and when I access localhost:8000 that would show me the code? and I can access each page.
here is an example html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<img class="resize" src="./pictures/logo.png" alt="logo">
<nav>
<ul class="nav-links">
<li class="active">Home</li>
<li>Contact</li>
</ul>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
$(document).on('click', 'ul li', function(){
$(this).addClass('active').siblings().removeClass('active')
})
</script>
</nav>
</header>
</body>
</html>
There's way to do so using the python web frameworks like Flask or Django. In a typical flask scenario your code would look like this:-
1) Install flask:-
pip install flask
2) Write your code.py like this:-
from flask import Flask, url_for
from flask import render_template
app = Flask(__name__)
#app.route('/')
def index():
return render_template('hello.html')
3) Next create a templates folder inside which put your html file which I have named it to be hello.html
templates > hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header>
<img class="resize" src="./pictures/logo.png" alt="logo">
<nav>
<ul class="nav-links">
<li class="active">Home</li>
<li>Contact</li>
</ul>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
$(document).on('click', 'ul li', function(){
$(this).addClass('active').siblings().removeClass('active')
})
</script>
</nav>
</header>
</body>
</html>
4) Your directory structure would look like this:-
/code.py
/templates
/hello.html
5) Run python code.py and you can see your page on localhost:5000.
I'm sending a message with HTML via Python. Now, I'd like to style it, I've tried to write the style code into the html but there are problems because curling braces {}. Can I link the css file in Python?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Lato:400,900i&display=swap" rel="stylesheet">
<link rel='stylesheet' href="css/message_style.css"> #I've a static folder
</head>
<body>
You can do both inline stylings and also insert your CSS files into your HTML from a static folder like this:
{% load static from staticfiles %} or {% load static %}
<link rel='stylesheet' href="{% static 'css/message_style.css' %}">
Note: You should load static directory before using {% static 'relative address to the file' %}, and both {% load static from staticfiles %} or {% load static %} will do the same for you but the first one is more explicit.
EDIT: If you want to send out emails and make an email template you should use inline styles and use tables, to achieve that you can check this link for more information.