Django static files (css) not working

Question

I can't seem to include my bootstrap css files for some reason. I am quite new to Python and Django especially, so I am definitely doing something wrong.

Django 1.9.2

After reading the official Django explanation on the "Static files" management I am absolutely zero smarter :(. Here is my project folders hierarchy:

/projectname/
    /appname/
        /static/
        |   /appname/
        |        /css/
        |        |    bootstrap.min.css
        |        |    custom.css
        |        /img/
        |        /js/
        |
        /templates/
            /includes/
                head.html
                footer.html
            index.html
            base.html

I started with the basics so I disregarded the head.htmland tried with the base.html like so:

<title>{% block title %}{% endblock %}</title>

<!-- Bootstrap core CSS -->
{% load staticfiles %}
<link href="{% static 'static/appname/css/bootstrap.min.css' %}" rel="stylesheet">

No luck. Here is my settings file:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]
...

STATIC_URL = '/static/'
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
STATICFILE_DIRS ='/users/edchigliak/documents/projects/projectname/appname/static/'

As fas as I understand, it is possible to have a "global" 'static files location' which all your projects can use, and "per app" 'static files location' which can be uses only by the app inside which base directory they reside.

Any help appreciated!

EDIT:

This is my urls.py configuration:

from django.conf.urls import url
from django.contrib import admin
from budgeteer.views import hello, hours_ahead, current_datetime

urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^hello/$', hello),
url(r'^index/$', current_datetime),
url(r'^time/plus/(\d{1,2})/$', hours_ahead),
]

Remove static in 'static/appname/css/bootstrap.min.css' (or static/appname, i'm not 100% sure) — Benjamin
– Benjamin, Commented Mar 9, 2016 at 15:20
And maybe if you are not in debug mode, you have to run collectstatic from manage.py — Benjamin
– Benjamin, Commented Mar 9, 2016 at 15:21
Ah, you see, I read about the collectstatic but I hate doing something that I do not understand. Is it so that this command takes the files from my defined locations and puts them somewhere else (copies) and THEN includes them in the template? This is a bit confusing... — Alexander Starbuck
– Alexander Starbuck, Commented Mar 9, 2016 at 15:22

Jackssn · Accepted Answer · 2016-11-20 12:30:48Z

3

I have similar problem (Django 1.10). Hierarchy:

myapp
   ...
   myapp
      ...
   blog
      migrations
      templates
      ...
   static
      blog
         style.css

So if I add <link href="{% static 'blog/css/bootstrap.min.css' %}" rel="stylesheet"> (style.css located in dir 'blog/css') all styles won't work.

BUT when I delete 'css': <link href="{% static 'blog/bootstrap.min.css' %}" rel="stylesheet"> (style.css located in dir 'blog') it's ok.

May be it help you!

answered Nov 20, 2016 at 12:30

Jackssn

1,6841 gold badge18 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrii Rusanov · Accepted Answer · 2016-03-09 15:24:01Z

2

I think you need to add following to your URLs:

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

unless you work on Django server and it serves your static files.

According you the Django docs your app structure is OK.

When you will setup your prod and start serve static by Apache/Nginx/etc, than you will need to run collectstatic. For now it don't needed.

answered Mar 9, 2016 at 15:24

Andrii Rusanov

4,6262 gold badges41 silver badges55 bronze badges

1 Comment

Alexander Starbuck Over a year ago

I am using my local lightweight server that came with Django, just to get the feel of things :). Spasiba bolshoe!

Adam Hopkins · Accepted Answer · 2016-03-09 15:23:11Z

0

My quick guess is that you are one level up. You have your static directory nested under appname. Try moving it up a level and accessing the resource directly in the browser (http://example.com/static/appname/css/bootstrap.min.css)

I've never done app specific resources, so if that is the goal, my apologies.

answered Mar 9, 2016 at 15:23

Adam Hopkins

7,1306 gold badges36 silver badges53 bronze badges

1 Comment

Benjamin Over a year ago

I think it's normal to have static dir in app From django doc : "Now we might be able to get away with putting our static files directly in my_app/static/ (rather than creating another my_app subdirectory), but it would actually be a bad idea. "

Leonard2 · Accepted Answer · 2016-03-10 02:06:50Z

0

what if your static link starts with just appname?

i.e., instead of

<link href="{% static 'static/appname/css/bootstrap.min.css' %}" rel="stylesheet">

please try

<link href="{% static 'appname/css/bootstrap.min.css' %}" rel="stylesheet">

AFAIK, the string in {% static %} is the path to a static file inside the static folder.

I don't have points enough to comment, so I leave my guess here.

answered Mar 10, 2016 at 2:06

Leonard2

8908 silver badges21 bronze badges

1 Comment

Alexander Starbuck Over a year ago

Nope, unfortunately still not working. Here is what I get from terminal when I

runserver : [10/Mar/2016 08:14:37] "GET /index/ HTTP/1.1" 200 4872 Not Found: /index/js/ie-emulation-modes-warning.js Not Found: **/index/**css/ie10-viewport-bug-workaround.css Not Found: /index/css/jumbotron.css ... Not Found: /dist/js/bootstrap.min.js Not Found: /assets/js/ie10-viewport-bug-workaround.js ...

Suraj Rao · Accepted Answer · 2023-01-04 11:11:55Z

-1

STATIC_ROOT = os.path.join(BASE_DIR, 'static_files')

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

edited Jan 4, 2023 at 11:11

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Jan 4, 2023 at 11:08

hasan siam

11 bronze badge

1 Comment

hans Over a year ago

You can improve your answer by adding some explanatory text.

Gino Mempin · Accepted Answer · 2021-03-14 23:22:04Z

-2

You need to put this line on the outside of HTML tags.

{% load static %}

I found the answer here: https://tutorial.djangogirls.org/en/css/.

edited Mar 14, 2021 at 23:22

Gino Mempin

30.5k31 gold badges125 silver badges174 bronze badges

answered Mar 14, 2021 at 20:38

Sasha Muller

11 bronze badge

Collectives™ on Stack Overflow

Django static files (css) not working

6 Answers 6

Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related