My CSS file attached to my python code isn't working, and I can't seem to figure out why since there are no errors and I've tried multiple ways of doing this.
Structure:
app{
|app
|templates
|public
|index.html
|env
|static
|css
|styles.css
I've attached it to index.html with
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
and in my python file I used
#app.route("/")
def index():
return render_template("public/index.html")
Everything works perfectly find but the CSS doesn't work on the page:
style.css
body {
color: red;
}
According to your project structure, the static sub-folder is outside the app folder. Consider adding it at the same location as templates.
project
| -- app
| -- templates/
| -- static/
Your <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}"> should work.
Perhaps try to put the filename parameter to: `filename='/static/css/styles.css', and see if it works.
styles.css or style.css?
Check the css file name!
If that is a typo in your question and not in your main code, try reloading your page using Ctrl + Shift + R.
Related
How do you use url_for in Flask to reference a file in a folder? For example, I have some static files in the static folder, some of which may be in subfolders such as static/bootstrap.
When I try to serve a file from static/bootstrap, I get an error.
<link rel=stylesheet type=text/css href="{{ url_for('static/bootstrap', filename='bootstrap.min.css') }}">
I can reference files that aren't in subfolders with this, which works.
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='bootstrap.min.css') }}">
What is the correct way to reference static files with url_for? How do I use url_for to generate urls to static files at any level?
You have by default the static endpoint for static files. Also Flask application has the following arguments:
static_url_path: can be used to specify a different path for the static files on the web. Defaults to the name of the static_folder folder.
static_folder: the folder with static files that should be served at static_url_path. Defaults to the 'static' folder in the root path of the application.
It means that the filename argument will take a relative path to your file in static_folder and convert it to a relative path combined with static_url_default:
url_for('static', filename='path/to/file')
will convert the file path from static_folder/path/to/file to the url path static_url_default/path/to/file.
So if you want to get files from the static/bootstrap folder you use this code:
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='bootstrap/bootstrap.min.css') }}">
Which will be converted to (using default settings):
<link rel="stylesheet" type="text/css" href="static/bootstrap/bootstrap.min.css">
Also look at url_for documentation.
In my case I had special instruction into nginx configuration file:
location ~ \.(js|css|png|jpg|gif|swf|ico|pdf|mov|fla|zip|rar)$ {
try_files $uri =404;
}
All clients have received '404' because nginx nothing known about Flask.
The primary configuration file is /etc/nginx/nginx.conf on Linux. It may be similar on Windows.
I am trying to serve a static image to a css file using flask. I am using render_template() to to get the html file, and I have a static directory for my css and javascript. My other image is loading, but the image that I am referencing from the css file is not working and I get his from the flask terminal: GET /static/static/res/typewriter.jpg HTTP/1.1" 404
I tried typing in the path in my browser and it works fine
This is how I am referencing the image since the CSS file is already in the static directory. background-image: url("/res/typewriter.jpg");
I hope there is an easy fix for this, especially since I am new to this stuff. Thanks!
In your html file you should have this in the header:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='mainpage.css') }}">
... as long as your static directory is named static. In several of my Flask applications I am importing Bootstrap css like so:
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='bootstrap.css') }}">
Ensure you are visiting http://127.0.0.1:5000 in your browser (unless you changed the default).
Also here is a random example of how I serve images from the static directory:
h1 class="display-3"> <img src="/static/title_welcome.png" alt="about"></h1>
You guys were able to help me with last issue involving Django so I thought I'd ask another that has been killing me for the past couple days!
I have a small one app project with about 6 different pages, and I can get them to show however my style.css is not "showing" on the web page, I have followed countless guides including the Django's website and I just can't seem to get this working correctly. Here are some files that I think are relevant:
public_html/mysite/nfl/templates/home.html:
{% load staticfiles %}
<!DOCTYPE HTML>
<html lang="en">
<head>
<title> Draftr Home Page </title>
<meta charset="utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1">
<!-- Using Bootstrap 3 framework with permission from getbootstrap.com -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Custom Style Sheet -->
<link href="{% static 'style.css' %}" rel="stylesheet" media="screen">
style.css is located here public_html/mysite/nfl/static AND /home/gobelogic/public_html/mysite/static(alongside admin/)
/home/gobelogic/public_html/mysite/mysite:
import os.path
import sys
PROJECT_ROOT = os.path.normpath(os.path.dirname(__file__))
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
INSTALLED_APPS = (
#other
'django.contrib.staticfiles',
'nfl'
)
TEMPLATE_DIRS =
"nfl/templates",
)
STATICFILES_DIRS = (
'/home/gobelogic/public_html/mysite/nfl/static',
)
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static')
Ok I'm going to try and explain how I think django handles static files, please correct me where I'm wrong:
so in settings.py django is locating all static directories in my project and placing their contents in a single directory static/ next to manange.py(which is done when I run manage.py collectstatic
in the html file I tell django to load all the static files so that i can use them at the top by using {% load staticfiles %} and then i say which one in particular by using <link href="{% static 'style.css' %}" rel="stylesheet" media="screen"> by doing this, django uses the settings.py(?) to find where I put these static files and then loads up the stylesheet that way
Again I am running this on my production server so none of this is run through django built in server, idk if that matters or not
Thanks for any help
EDIT using django 1.8
Since you are not using Django internal server (rightly so), you need to make your production web server aware of the static file location. There is an example in Django docs for Apache (https://docs.djangoproject.com/en/1.8/howto/deployment/wsgi/modwsgi/#serving-files). Even if you are not using apache, generally you need to make sure that /static/ or whatever your STATIC_URL points to is served from the place where your STATIC_ROOT points to.
I'm trying to use this template: http://www.free-css.com/free-css-templates/page185/flat-style#shout
and this is my file directory:
app
- static
[--] css (inside static)
[--] images (inside static)
[--] js (inside static)
- templates
but the images won't load properly still:
http://i.imgur.com/Mh71ko9.png
Does anyone know why the images won't properly load?
You have simply dumped the HTML from the website in to your templates folder and all the href and src attributes for images and CSS are still using relative links. These need to be converted to use Flask's static files functionality.
For example, to get the CSS working, change this line:
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
to this:
<link href="{{ url_for('static', filename='css/bootstrap.css') }}" rel='stylesheet' type='text/css' />
And similarly for images, you can change:
<img src="images/logo.png" title="Flat style" />
to
<img src="{{ url_for('static', filename='images/logo.png') }}" title="Flat style" />
You'll need to do this for all static files referenced in the HTML.
Note that your Flask app will need to have imported url_for
from flask import Flask, render_template, url_for
I am trying to learn django by reading the tutorial and Django book on the net.
I am trying to display a web page on a url.
For the same I wrote in the url pattern function the statement (r'^home/$' , home ) where I have imported the home function.
Also in the home function I wrote
def home( request ):
return render_to_response("home.html",None) // home.html is placed in the templates folder along with its .css
This must be wrong as I don't intend to pass any response ... so please tell what i should write here...
However the issue I am facing is that when I go to the url the html comes in plain without the css styling without the color etc.....
When I check my html template however that is fine ...
So what do I need to do to display the html as it is in the url ???
Thanks..
You need to put the .css in the STATIC_FILES directory (if you are using 1.3 or MEDIA_URL for 1.2)
http://docs.djangoproject.com/en/dev/howto/static-files/
Then you need to link to the css in the head of the html file with something like:
<head>
{% load static %}
<link rel="stylesheet" href="{% get_static_prefix %}html.css" />
</head>
I assume you are using the development server.
Make sure that your URLconf is correct:
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns += staticfiles_urlpatterns()
See: http://docs.djangoproject.com/en/dev/howto/static-files/#serving-static-files-in-development
Then your css files can be included like this:
{% load static %}
{% get_static_prefix as STATIC_PREFIX %}
<head>
<link rel="stylesheet" href="{{ STATIC_PREFIX }}/yourpath/your.css" />
</head>
Off course the css files have to be located in your static_media dir.
This means, as stated in the docs, that you should set STATIC_ROOT to the appropriate folder, for example a folder named 'static_media' in your project directory.