[Django]-Django site in developement: CSS not loading for all pages

by

12👍

✅

The way you are using staticfiles is slightly incorrect. While I can’t tell you exactly what is causing your current situation, I can tell you that your method will cause you headaches in the future. First things first though, I agree with the comments about watching your request traffic in the Django server terminal. Look for 4xx responses and make sure the requested URL is correct. This: /Static/css/photologue/css has two errors in it.

If you don’t want to read further, drop the urls.py static.server line and watch the server terminal. Now, here’s how it’s all working


You’ve got your settings variables correct but you may misunderstand the purpose of STATIC_ROOT. STATIC_URL is the fully qualified or relative URL for your static files. STATIC_ROOT is the folder that will ultimately hold all the static files. It should be empty. Django is responsible for filling it via the manage.py collectstatic command. The idea is each app in your Django project has its own static/ folder with the js/css/image assets that it needs. In addition, Django will collect the static assets for the Admin and any other third-party packages you use. All of these assets will be organized into your STATIC_ROOT folder. It’s not safe to assume files you have their prior to collection will remain.

STATIC_ROOT = '/path/to/empty/static/folder/'  # or something dynamic with os.path methods
STATIC_URL = '/static/'

In your case maybe your serenity app has serenity/static/css/serenity.css and photologue has photologue/static/css/photologue.css. You could put shared assets in a base/static/ folder.

Now for properly serving static media. Do not use the 'django.views.static.serve' line in urls.py. Django’s runserver will automatically serve static files. Behind the scenes it is handling the collectstatic behavior and gathering all your static assets together and serving them up. Using that type of URL pattern in Django 1.3 is unnecessary, a source of confusion, and the kind of thing that will mistakenly go to production. Remember, your webserver (Apache/Nginx) serves static assets. Your Django urls.py files don’t need to know a thing about ’em.

Referring to the static URL in templates. You’ve got /static/ hardcoded in your templates. That will work (but only because STATIC_URL is the same value). To be more flexible about it, you’ve got three options.

  1. Use href="{{ STATIC_URL }}css/photologue.css". That variable will be in your templates as long as you include ‘django.core.context_processors.static’ in your TEMPLATE_CONTEXT_PROCESSORS.
  2. Use a templatetag: {% load static %} ... href="{% get_static_prefix %}css/photologue.css"
  3. In Django 1.4 you’ll be able to use {% load static from staticfiles %}... href="{% static 'css/photologue.css' %}"

It’s worth reading up on static files in Django and being aware of the changes coming in Django 1.4

đŸ‘€JCotton

1👍

I see two issues that are likely to happen:

  • The STATIC variables were not set in your settings file.

(you had lots of answers for this)

  • You have probably not set the /static/ alias in your apache config.

Add this line to your /etc/apache2/httpd.conf file or /etc/apache2/sites-available/myDjangoConfig: 

Alias /static/ {valueOfSTATIC_ROOT}

Then restart your Apache server:

sudo service apache2 reload
đŸ‘€Lilley

0👍

STATIC_ROOT is not used with Django dev server – only when you deploy to prod or use a different server. STATIC_ROOT is where your static files WILL be stored once you collect them (using “collectstatic” method).

The reason it works for one app but not the other, is because one app has the right reference to the CSS folder, whereas the other one doesn’t. For starters, try copying “static” dir from one app to the other and see if it work.

Much more info here: https://docs.djangoproject.com/en/1.3/howto/static-files/

đŸ‘€MK_Dev

0👍

You can try these steps:

  1. open your settings.py and

-add this at the first line of your file: 

import os.path
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))

-change your STATIC_ROOT’s value to:

STATIC_ROOT = os.path.join(PROJECT_DIR, 'static/')

-change your STATIC_URL’s value to:

STATIC_URL = '/static/'
  1. create a folder named “static” in your project root.
  2. create a folder for your static files like css, javascript and etc. I recommend you use a different folder for different types of files.

  3. open the urls.py of your project
    -add this to your imports: import settings
    -add this to the url patterns:

    (r'(?:.*?/)?(?P(css|jquery|jscripts|images)/.+)$’, ‘django.views.static.serve’, {‘document_root’: settings.STATIC_ROOT }),

    NOTE: In this example, there are folders named css, jquery, jscripts and images inside my static folder.

  4. In your template add this:

for css files: (in this example, default.css is the name of the css file)

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

for javascript:

<script type="text/javascript" src="{{ STATIC_URL }}jquery/jquery.js"></script>
đŸ‘€Amazing Angelo

Leave a comment