Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Django: CSS Is not not working

Tags:

I am still new to django and I am having problem with my CSS working.
I have followed the direction from the link: Django Static Link tutorial, on handling static files. But it is still not working.

Settings

# Absolute path to the directory static files should be collected to. # Don't put anything in this directory yourself; store your static files # in apps' "static/" subdirectories and in STATICFILES_DIRS. # Example: "/home/media/media.lawrence.com/static/" STATIC_ROOT = '/Users/a9austin/Development/sites/AlphaSocks/src/static_root/'  # URL prefix for static files. # Example: "http://media.lawrence.com/static/" STATIC_URL = '/static/'  # Additional locations of static files STATICFILES_DIRS = ( # Put strings here, like "/home/html/static" or "C:/www/django/static". # Always use forward slashes, even on Windows. # Don't forget to use absolute paths, not relative paths. '/Users/a9austin/Development/sites/AlphaSocks/src/staticfiles'  ) 

view

#from django.http import HttpResponse from django.shortcuts import render_to_response   def index(request): return render_to_response('index.html') 


index.html

<link rel="stylesheet" href="{{STATIC_URL}}css/style.css" type="text/css" media="screen" > 

And directory organization

src->staticfiles->css->style.css



Thank you so much, your help and time is much appreciated!

like image 418
AustinT Avatar asked Nov 19 '12 00:11

AustinT


People also ask

How to work CSS in Django?

To use their CSS, we just need to bring it in inside the head tags of our home. html file. The Materialize CSS framework also comes with some javascript that we can make use of, so we will bring that in as well. All you need to know about CSS is that it is used to add certain stylistic elements to certain HTML objects.

What is static file in Django?

Aside from the HTML generated by the server, web applications generally need to serve additional files — such as images, JavaScript, or CSS — necessary to render the complete web page. In Django, we refer to these files as “static files”.


2 Answers

For Django to serve static files, you have to make sure you have a couple of settings.

STATIC_URL

This setting specifies what url should static files map to under. You have that done already.

STATICFILES_DIRS

This specifies all the folders on your system where Django should look for static files. The idea is that you might have a couple of apps within your project, and each app might require a different set of static files. So for organizational purposes, each app might contain a static directory where it will store only it's static files. So then Django has to have a way to know where those directories are. This is what this setting is for.

STATIC_ROOT

This setting specifies where Django will copy all the static files to and not where the static files are already at. The idea is that once you leave development into production, Django can't serve static files anymore due to issues I will not go here (it's in the article). However for production, all static files should be in a single directory, instead of in many like specified in STATICFILES_DIRS. So this setting specifies a directory to which Django will copy all the static files from from all files within STATICFILES_DIRS by running the following command:

$ python manage.py collectstatic 

Please note this is only necessary once you go into production and also that the directory specified here cannot be the same as any directory specified in STATICFILES_DIRS.

Urls.py

In development for Django to serve your static files, you have to include the static urls in your urls.py:

from django.contrib.staticfiles.urls import staticfiles_urlpatterns  urlpatterns = ...  urlpatterns += staticfiles_urlpatterns() 

Once you will complete all of the above things, your static files should be served as long as you have DEBUG = True. Out of the list above, you seem to only complete STATIC_URL. Also please note that all the steps I described above are in the docs you linked in your question (link). It might be a bit confusing in the beginning but if you read it a couple of times, it becomes clearer.

like image 180
miki725 Avatar answered Sep 27 '22 20:09

miki725


Try clearing your cache. If you are using Google chrome go to your settings>clear browsing data> select clear cached images and files then click clear data

like image 28
Joshua Blue- Jack Avatar answered Sep 27 '22 22:09

Joshua Blue- Jack