use a css stylesheet on a jinja2 template
I am making a website using html, css, flask and jinja2.
I have a page working on a flask server, the buttons and labels etc. are displayed, but the css stylesheet I have is not loaded in.
How would I link a stylesheet to a jinja2 template. I have looked around on the internet but cannot find out how.
Here is the css stylesheet link; should I change this, or the python code?
<link rel="stylesheet" type="text/css" href="styles.css">
here is my flask code:
@app.route('/')
def resultstemplate():
return render_template('questions.html', head='Welcome!')
here are the locations of the files:
/python-code.py
/templates/template.html
/templates/styles.css
python html css flask jinja2
edited Jan 14 '16 at 16:29
roy
1,15411525
asked Jul 30 '14 at 10:45
ptolemy0ptolemy0
145118
add a comment |
I am making a website using html, css, flask and jinja2.
I have a page working on a flask server, the buttons and labels etc. are displayed, but the css stylesheet I have is not loaded in.
How would I link a stylesheet to a jinja2 template. I have looked around on the internet but cannot find out how.
Here is the css stylesheet link; should I change this, or the python code?
<link rel="stylesheet" type="text/css" href="styles.css">
here is my flask code:
@app.route('/')
def resultstemplate():
return render_template('questions.html', head='Welcome!')
here are the locations of the files:
/python-code.py
/templates/template.html
/templates/styles.css
python html css flask jinja2
edited Jan 14 '16 at 16:29
roy
1,15411525
asked Jul 30 '14 at 10:45
ptolemy0ptolemy0
145118
add a comment |
I am making a website using html, css, flask and jinja2.
I have a page working on a flask server, the buttons and labels etc. are displayed, but the css stylesheet I have is not loaded in.
How would I link a stylesheet to a jinja2 template. I have looked around on the internet but cannot find out how.
Here is the css stylesheet link; should I change this, or the python code?
<link rel="stylesheet" type="text/css" href="styles.css">
here is my flask code:
@app.route('/')
def resultstemplate():
return render_template('questions.html', head='Welcome!')
here are the locations of the files:
/python-code.py
/templates/template.html
/templates/styles.css
python html css flask jinja2
edited Jan 14 '16 at 16:29
roy
1,15411525
asked Jul 30 '14 at 10:45
ptolemy0ptolemy0
145118
I am making a website using html, css, flask and jinja2.
I have a page working on a flask server, the buttons and labels etc. are displayed, but the css stylesheet I have is not loaded in.
How would I link a stylesheet to a jinja2 template. I have looked around on the internet but cannot find out how.
Here is the css stylesheet link; should I change this, or the python code?
<link rel="stylesheet" type="text/css" href="styles.css">
here is my flask code:
@app.route('/')
def resultstemplate():
return render_template('questions.html', head='Welcome!')
here are the locations of the files:
/python-code.py
/templates/template.html
/templates/styles.css
python html css flask jinja2
python html css flask jinja2
edited Jan 14 '16 at 16:29
roy
1,15411525
asked Jul 30 '14 at 10:45
ptolemy0ptolemy0
145118
edited Jan 14 '16 at 16:29
roy
1,15411525
asked Jul 30 '14 at 10:45
ptolemy0ptolemy0
145118
edited Jan 14 '16 at 16:29
roy
1,15411525
edited Jan 14 '16 at 16:29
roy
1,15411525
edited Jan 14 '16 at 16:29
roy
1,15411525
1,15411525
asked Jul 30 '14 at 10:45
ptolemy0ptolemy0
145118
asked Jul 30 '14 at 10:45
ptolemy0ptolemy0
145118
asked Jul 30 '14 at 10:45
ptolemy0ptolemy0
145118
145118
add a comment |
add a comment |
5 Answers
5
active
oldest
votes
All public files (the ones that are not processed, like templates or python files) should be placed into dedicated static folders. By default, Jinja2 has one static folder called static.
This should fix your problem:
Move
/templates/styles.cssto/static/styles.css
Update your code with following code, that will be translated into correct file location:
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
More info on static files in Jinja2 is here.
answered Jul 30 '14 at 12:16
Andrejs CainikovsAndrejs Cainikovs
18.9k25474
yes, it sort-of works. The font style and size (and maybe others but I can't tell) have worked but nothing else, so the page is not fully working.
– ptolemy0
Jul 30 '14 at 13:00
4
If I have correctly understood you, CSS is loaded and works, which was covered in this question/answer. If you have other issues, accept this answer, and post them in separate questions.
– Andrejs Cainikovs
Jul 30 '14 at 15:09
yes it works perfectly, sorry, it was looking weird as I made it with Chrome, and was now viewing it firefox; there is now incompatibility.
– ptolemy0
Jul 30 '14 at 18:41
add a comment |
<link rel="stylesheet" type="text/css" href="styles.css">
href value must be within quotes.
make sure the file name and path are proper
OR try the below
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"/>
answered Jul 30 '14 at 10:49
Sunil B NSunil B N
3,34012039
yes you are right my code is wrong, but that doesn't make it work; I think the path is right; I have now posted the paths on the question
– ptolemy0
Jul 30 '14 at 11:00
add a comment |
The order of handler might cause the problems:
url: /stylesheets static_dir: stylesheets
url: /.* script: helloworld.application
will work instead of
url: /.* script: helloworld.application
url: /stylesheets static_dir: stylesheets
edited Jun 15 '17 at 10:12
fedorqui
172k54358395
answered Oct 9 '14 at 16:32
George NguyenGeorge Nguyen
2,1091136
add a comment |
Tried almost every solution on Stack Overflow. It only worked for me when I placed the static folder in the same directory as my run.py file.
I changed my folder structure from:
app/
views
static
templates
run.py
To:
app/
views
templates
static
run.py
I guess moving the run.py instead would work too. Have a look at this Jinja Templating Tutorial for extra info. Not sure why I had to change the structure for it to work though.
answered Jan 3 at 16:51
wcynwcyn
1,3321920
add a comment |
To add to what's been said here, be sure to update Jinja2 to v2.10, as lesser versions seem to cause this same bug. Cheers!
answered Mar 3 at 9:17
jaredgorskijaredgorski
38438
add a comment |
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f25034812%2fuse-a-css-stylesheet-on-a-jinja2-template%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
All public files (the ones that are not processed, like templates or python files) should be placed into dedicated static folders. By default, Jinja2 has one static folder called static.
This should fix your problem:
Move
/templates/styles.cssto/static/styles.css
Update your code with following code, that will be translated into correct file location:
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
More info on static files in Jinja2 is here.
answered Jul 30 '14 at 12:16
Andrejs CainikovsAndrejs Cainikovs
18.9k25474
yes, it sort-of works. The font style and size (and maybe others but I can't tell) have worked but nothing else, so the page is not fully working.
– ptolemy0
Jul 30 '14 at 13:00
4
If I have correctly understood you, CSS is loaded and works, which was covered in this question/answer. If you have other issues, accept this answer, and post them in separate questions.
– Andrejs Cainikovs
Jul 30 '14 at 15:09
yes it works perfectly, sorry, it was looking weird as I made it with Chrome, and was now viewing it firefox; there is now incompatibility.
– ptolemy0
Jul 30 '14 at 18:41
add a comment |
All public files (the ones that are not processed, like templates or python files) should be placed into dedicated static folders. By default, Jinja2 has one static folder called static.
This should fix your problem:
Move
/templates/styles.cssto/static/styles.css
Update your code with following code, that will be translated into correct file location:
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
More info on static files in Jinja2 is here.
answered Jul 30 '14 at 12:16
Andrejs CainikovsAndrejs Cainikovs
18.9k25474
yes, it sort-of works. The font style and size (and maybe others but I can't tell) have worked but nothing else, so the page is not fully working.
– ptolemy0
Jul 30 '14 at 13:00
4
If I have correctly understood you, CSS is loaded and works, which was covered in this question/answer. If you have other issues, accept this answer, and post them in separate questions.
– Andrejs Cainikovs
Jul 30 '14 at 15:09
yes it works perfectly, sorry, it was looking weird as I made it with Chrome, and was now viewing it firefox; there is now incompatibility.
– ptolemy0
Jul 30 '14 at 18:41
add a comment |
All public files (the ones that are not processed, like templates or python files) should be placed into dedicated static folders. By default, Jinja2 has one static folder called static.
This should fix your problem:
Move
/templates/styles.cssto/static/styles.css
Update your code with following code, that will be translated into correct file location:
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
More info on static files in Jinja2 is here.
answered Jul 30 '14 at 12:16
Andrejs CainikovsAndrejs Cainikovs
18.9k25474
All public files (the ones that are not processed, like templates or python files) should be placed into dedicated static folders. By default, Jinja2 has one static folder called static.
This should fix your problem:
Move
/templates/styles.cssto/static/styles.css
Update your code with following code, that will be translated into correct file location:
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
More info on static files in Jinja2 is here.
answered Jul 30 '14 at 12:16
Andrejs CainikovsAndrejs Cainikovs
18.9k25474
edited Jun 7 '17 at 20:40
answered Jul 30 '14 at 12:16
Andrejs CainikovsAndrejs Cainikovs
18.9k25474
answered Jul 30 '14 at 12:16
Andrejs CainikovsAndrejs Cainikovs
18.9k25474
answered Jul 30 '14 at 12:16
Andrejs CainikovsAndrejs Cainikovs
18.9k25474
18.9k25474
yes, it sort-of works. The font style and size (and maybe others but I can't tell) have worked but nothing else, so the page is not fully working.
– ptolemy0
Jul 30 '14 at 13:00
4
If I have correctly understood you, CSS is loaded and works, which was covered in this question/answer. If you have other issues, accept this answer, and post them in separate questions.
– Andrejs Cainikovs
Jul 30 '14 at 15:09
yes it works perfectly, sorry, it was looking weird as I made it with Chrome, and was now viewing it firefox; there is now incompatibility.
– ptolemy0
Jul 30 '14 at 18:41
add a comment |
yes, it sort-of works. The font style and size (and maybe others but I can't tell) have worked but nothing else, so the page is not fully working.
– ptolemy0
Jul 30 '14 at 13:00
4
If I have correctly understood you, CSS is loaded and works, which was covered in this question/answer. If you have other issues, accept this answer, and post them in separate questions.
– Andrejs Cainikovs
Jul 30 '14 at 15:09
yes it works perfectly, sorry, it was looking weird as I made it with Chrome, and was now viewing it firefox; there is now incompatibility.
– ptolemy0
Jul 30 '14 at 18:41
yes, it sort-of works. The font style and size (and maybe others but I can't tell) have worked but nothing else, so the page is not fully working.
– ptolemy0
Jul 30 '14 at 13:00
yes, it sort-of works. The font style and size (and maybe others but I can't tell) have worked but nothing else, so the page is not fully working.
– ptolemy0
Jul 30 '14 at 13:00
4
4
If I have correctly understood you, CSS is loaded and works, which was covered in this question/answer. If you have other issues, accept this answer, and post them in separate questions.
– Andrejs Cainikovs
Jul 30 '14 at 15:09
If I have correctly understood you, CSS is loaded and works, which was covered in this question/answer. If you have other issues, accept this answer, and post them in separate questions.
– Andrejs Cainikovs
Jul 30 '14 at 15:09
yes it works perfectly, sorry, it was looking weird as I made it with Chrome, and was now viewing it firefox; there is now incompatibility.
– ptolemy0
Jul 30 '14 at 18:41
yes it works perfectly, sorry, it was looking weird as I made it with Chrome, and was now viewing it firefox; there is now incompatibility.
– ptolemy0
Jul 30 '14 at 18:41
add a comment |
<link rel="stylesheet" type="text/css" href="styles.css">
href value must be within quotes.
make sure the file name and path are proper
OR try the below
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"/>
answered Jul 30 '14 at 10:49
Sunil B NSunil B N
3,34012039
yes you are right my code is wrong, but that doesn't make it work; I think the path is right; I have now posted the paths on the question
– ptolemy0
Jul 30 '14 at 11:00
add a comment |
<link rel="stylesheet" type="text/css" href="styles.css">
href value must be within quotes.
make sure the file name and path are proper
OR try the below
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"/>
answered Jul 30 '14 at 10:49
Sunil B NSunil B N
3,34012039
yes you are right my code is wrong, but that doesn't make it work; I think the path is right; I have now posted the paths on the question
– ptolemy0
Jul 30 '14 at 11:00
add a comment |
<link rel="stylesheet" type="text/css" href="styles.css">
href value must be within quotes.
make sure the file name and path are proper
OR try the below
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"/>
answered Jul 30 '14 at 10:49
Sunil B NSunil B N
3,34012039
<link rel="stylesheet" type="text/css" href="styles.css">
href value must be within quotes.
make sure the file name and path are proper
OR try the below
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"/>
answered Jul 30 '14 at 10:49
Sunil B NSunil B N
3,34012039
answered Jul 30 '14 at 10:49
Sunil B NSunil B N
3,34012039
answered Jul 30 '14 at 10:49
Sunil B NSunil B N
3,34012039
answered Jul 30 '14 at 10:49
Sunil B NSunil B N
3,34012039
3,34012039
yes you are right my code is wrong, but that doesn't make it work; I think the path is right; I have now posted the paths on the question
– ptolemy0
Jul 30 '14 at 11:00
add a comment |
yes you are right my code is wrong, but that doesn't make it work; I think the path is right; I have now posted the paths on the question
– ptolemy0
Jul 30 '14 at 11:00
yes you are right my code is wrong, but that doesn't make it work; I think the path is right; I have now posted the paths on the question
– ptolemy0
Jul 30 '14 at 11:00
yes you are right my code is wrong, but that doesn't make it work; I think the path is right; I have now posted the paths on the question
– ptolemy0
Jul 30 '14 at 11:00
add a comment |
The order of handler might cause the problems:
url: /stylesheets static_dir: stylesheets
url: /.* script: helloworld.application
will work instead of
url: /.* script: helloworld.application
url: /stylesheets static_dir: stylesheets
edited Jun 15 '17 at 10:12
fedorqui
172k54358395
answered Oct 9 '14 at 16:32
George NguyenGeorge Nguyen
2,1091136
add a comment |
The order of handler might cause the problems:
url: /stylesheets static_dir: stylesheets
url: /.* script: helloworld.application
will work instead of
url: /.* script: helloworld.application
url: /stylesheets static_dir: stylesheets
edited Jun 15 '17 at 10:12
fedorqui
172k54358395
answered Oct 9 '14 at 16:32
George NguyenGeorge Nguyen
2,1091136
add a comment |
The order of handler might cause the problems:
url: /stylesheets static_dir: stylesheets
url: /.* script: helloworld.application
will work instead of
url: /.* script: helloworld.application
url: /stylesheets static_dir: stylesheets
edited Jun 15 '17 at 10:12
fedorqui
172k54358395
answered Oct 9 '14 at 16:32
George NguyenGeorge Nguyen
2,1091136
The order of handler might cause the problems:
url: /stylesheets static_dir: stylesheets
url: /.* script: helloworld.application
will work instead of
url: /.* script: helloworld.application
url: /stylesheets static_dir: stylesheets
edited Jun 15 '17 at 10:12
fedorqui
172k54358395
answered Oct 9 '14 at 16:32
George NguyenGeorge Nguyen
2,1091136
edited Jun 15 '17 at 10:12
fedorqui
172k54358395
edited Jun 15 '17 at 10:12
fedorqui
172k54358395
edited Jun 15 '17 at 10:12
fedorqui
172k54358395
172k54358395
answered Oct 9 '14 at 16:32
George NguyenGeorge Nguyen
2,1091136
answered Oct 9 '14 at 16:32
George NguyenGeorge Nguyen
2,1091136
answered Oct 9 '14 at 16:32
George NguyenGeorge Nguyen
2,1091136
2,1091136
add a comment |
add a comment |
Tried almost every solution on Stack Overflow. It only worked for me when I placed the static folder in the same directory as my run.py file.
I changed my folder structure from:
app/
views
static
templates
run.py
To:
app/
views
templates
static
run.py
I guess moving the run.py instead would work too. Have a look at this Jinja Templating Tutorial for extra info. Not sure why I had to change the structure for it to work though.
answered Jan 3 at 16:51
wcynwcyn
1,3321920
add a comment |
Tried almost every solution on Stack Overflow. It only worked for me when I placed the static folder in the same directory as my run.py file.
I changed my folder structure from:
app/
views
static
templates
run.py
To:
app/
views
templates
static
run.py
I guess moving the run.py instead would work too. Have a look at this Jinja Templating Tutorial for extra info. Not sure why I had to change the structure for it to work though.
answered Jan 3 at 16:51
wcynwcyn
1,3321920
add a comment |
Tried almost every solution on Stack Overflow. It only worked for me when I placed the static folder in the same directory as my run.py file.
I changed my folder structure from:
app/
views
static
templates
run.py
To:
app/
views
templates
static
run.py
I guess moving the run.py instead would work too. Have a look at this Jinja Templating Tutorial for extra info. Not sure why I had to change the structure for it to work though.
answered Jan 3 at 16:51
wcynwcyn
1,3321920
Tried almost every solution on Stack Overflow. It only worked for me when I placed the static folder in the same directory as my run.py file.
I changed my folder structure from:
app/
views
static
templates
run.py
To:
app/
views
templates
static
run.py
I guess moving the run.py instead would work too. Have a look at this Jinja Templating Tutorial for extra info. Not sure why I had to change the structure for it to work though.
answered Jan 3 at 16:51
wcynwcyn
1,3321920
edited Jan 3 at 16:58
answered Jan 3 at 16:51
wcynwcyn
1,3321920
answered Jan 3 at 16:51
wcynwcyn
1,3321920
answered Jan 3 at 16:51
wcynwcyn
1,3321920
1,3321920
add a comment |
add a comment |
To add to what's been said here, be sure to update Jinja2 to v2.10, as lesser versions seem to cause this same bug. Cheers!
answered Mar 3 at 9:17
jaredgorskijaredgorski
38438
add a comment |
To add to what's been said here, be sure to update Jinja2 to v2.10, as lesser versions seem to cause this same bug. Cheers!
answered Mar 3 at 9:17
jaredgorskijaredgorski
38438
add a comment |
To add to what's been said here, be sure to update Jinja2 to v2.10, as lesser versions seem to cause this same bug. Cheers!
answered Mar 3 at 9:17
jaredgorskijaredgorski
38438
To add to what's been said here, be sure to update Jinja2 to v2.10, as lesser versions seem to cause this same bug. Cheers!
answered Mar 3 at 9:17
jaredgorskijaredgorski
38438
answered Mar 3 at 9:17
jaredgorskijaredgorski
38438
answered Mar 3 at 9:17
jaredgorskijaredgorski
38438
answered Mar 3 at 9:17
jaredgorskijaredgorski
38438
38438
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f25034812%2fuse-a-css-stylesheet-on-a-jinja2-template%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
