I am rendering a template, that I am attempting to style with an external style sheet. File structure is as follows.
/app
- app_runner.py
/services
- app.py
/templates
- mainpage.html
/styles
- mainpage.css
mainpage.html looks like this
<html>
<head>
<link rel= "stylesheet" type= "text/css" href= "../styles/mainpage.css">
</head>
<body>
<!-- content -->
None of my styles are being applied though. Does it have something to do with the fact that the html is a template I am rendering? The python looks like this.
return render_template("mainpage.html", variables..)
I know this much is working, because I am still able to render the template. However, when I tried to move my styling code from a "style" block within the html's "head" tag to an external file, all the styling went away, leaving a bare html page. Anyone see any errors with my file structure?
The flask project structure is different. As you mentioned in question the project structure is the same but the only problem is wit the styles folder. Styles folder must come within the static folder.
static/styles/style.css
I'm pretty sure it's similar to Laravel template, this is how I did mine.
<link rel="stylesheet" href="/folder/stylesheets/stylesheet.css" />
Referred: CSS file pathing problem
I'm running version 1.0.2 of flask right now. The above file structures did not work for me, but I found one that did, which are as follows:
app_folder/ flask_app.py/ static/ style.css/ templates/
index.html
(Please note that 'static' and 'templates' are folders, which should be named exactly the same thing.)
To check what version of flask you are running, you should open Python in terminal and type the following accordingly:
import flask
flask --version
Still having problems after following the solution provided by codegeek:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}"> ?
In Google Chrome pressing the reload button (F5) will not reload the static files. If you have followed the accepted solution but still don't see the changes you have made to CSS, then press ctrl + shift + R to ignore cached files and reload the static files.
In Firefox pressing the reload button appears to reload the static files.
In Edge pressing the refresh button does not reload the static file. Pressing ctrl + shift + R is supposed to ignore cached files and reload the static files. However this does not work on my computer.
One more point to add on to this thread.
If you add an underscore in your .css file name, then it wouldn't work.
If any of the above method is not working and you code is perfect then try hard refreshing by pressing Ctrl + F5. It will clear all the chaces and then reload file. It worked for me.
In jinja2 templates (which flask uses), use
href="{{ url_for('static', filename='mainpage.css')}}"
The static files are usually in the static folder, though, unless configured otherwise.
One more point to add.Along with above upvoted answers, please make sure the below line is added to app.py file:
app = Flask(__name__, static_folder="your path to static")
Otherwise flask will not be able to detect static folder.
I have read multiple threads and none of them fixed the issue that people are describing and I have experienced too.
I have even tried to move away from conda and use pip, to upgrade to python 3.7, i have tried all coding proposed and none of them fixed.
And here is why (the problem):
by default python/flask search the static and the template in a folder structure like:
/Users/username/folder_one/folder_two/ProjectName/src/app_name/<static>
and
/Users/username/folder_one/folder_two/ProjectName/src/app_name/<template>
you can verify by yourself using the debugger on Pycharm (or anything else) and check the values on the app (app = Flask(name)) and search for teamplate_folder and static_folder
in order to fix this, you have to specify the values when creating the app something like this:
TEMPLATE_DIR = os.path.abspath('../templates')
STATIC_DIR = os.path.abspath('../static')
# app = Flask(__name__) # to make the app run without any
app = Flask(__name__, template_folder=TEMPLATE_DIR, static_folder=STATIC_DIR)
the path TEMPLATE_DIR and STATIC_DIR depend on where the file app is located. in my case, see the picture, it was located within a folder under src.
you can change the template and static folders as you wish and register on the app = Flask...
In truth, I have started experiencing the problem when messing around with folder and at times worked at times not. this fixes the problem once and for all
the html code looks like this:
<link href="{{ url_for('static', filename='libraries/css/bootstrap.css') }}" rel="stylesheet" type="text/css" >
Source: Stackoverflow.com
