12

My Django admin website (it's completely default, not customized) is not showing the expected CSS.

It looks like this:

enter image description here

And I can log in:

enter image description here

But it is supposed to look like this:

enter image description here

How do I fix this?

Other info that might help:

I'm running on an Amazon EC2 instance on port 80 and connecting to it using a real URL. I set it up using this tutorial: http://www.nickpolet.com/blog/deploying-django-on-aws/1/

Following that tutorial, I put this code into a file called /etc/apache2/sites-enabled/mysite.conf. I don't understand what this code is doing, so I think it might be related to the problem.

/etc/apache2/sites-enabled/mysite.conf:

WSGIScriptAlias / /home/ubuntu/cs462/mysite/mysite/wsgi.py
WSGIPythonPath /home/ubuntu/cs462/mysite
<Directory /home/ubuntu/cs462/mysite/mysite>
    <Files wsgi.py>
        Order deny,allow
        Require all granted
    </Files>
</Directory>

Alias /media/ /home/ubuntu/cs462/mysite/media/
Alias /static/ /home/ubuntu/cs462/mysite/static/

<Directory /home/ubuntu/cs462/mysite/static>
    Require all granted
</Directory>

<Directory /home/ubuntu/cs462/mysite/media>
    Require all granted
</Directory>

Directory structure: 

/home/ubuntu/cs462/
        mysite/
            manage.py
            db.sqlite3
            mysite/
                __init__.py
                __init__.pyc  
                settings.py  
                settings.pyc  
                urls.py  
                wsgi.py
            homepage/
                admin.py  
                admin.pyc  
                __init__.py  
                __init__.pyc  
                migrations  
                models.py  
                models.pyc  
                tests.py  
                views.py

Last part of settings.py:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.7/howto/static-files/

STATIC_URL = '/static/'
Improve this question
0

4 Answers 4

Reset to default
27

Your Apache configuration requires that all static content (CSS, JS, images etc) should be in the mysite/static directory. You should collect your static content from apps into the mysite/static directory first:

cd /home/ubuntu/cs462/mysite
python manage.py collectstatic

Update: If you did not specify a location for static content, you should add the following lines to your settings.py:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

What do you mean? I don't have any static content. This is just the admin site that comes with Django. I only created a superuser to log in to the admin site, and it has my tables from the database from my models.py file.
Django admin app has its own static content installed. You should copy them to your project's static directory first. You don't recognize it while testing the site using the Django's built-in development server but for production you need to run collectstatic first.
Great! It worked. I made the change in settings.py, and then I needed to re-run the python manage.py collectstatic command. Thanks!
1

Keep DEBUG=False

Run

pip install whitenoise

IN settings.py

add INSTALLED_APPS

'whitenoise.runserver_nostatic',

Add like below in MIDDLEWARE:

'django.middleware.security.SecurityMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware',  # add it exactly here
'django.contrib.sessions.middleware.SessionMiddleware',

Don't Change below statements:

STATIC_URL = '/static/'

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

Improve this answer

1 Comment

Works for cPanel deployments
0

after doing

  1. python manage.py collectstatic
  2. In settings.py, in STATICFILES_DIRS variable, append

('admin', os.path.join(BASE_DIR, 'static', 'admin')). This should work

Improve this answer

Comments

0

I've had this problem too on Django whilst in development, when using Tailwind CSS for my website. I managed, after a lot of time and effort, to find the solution.

For me it seemed to originate from the fact that the 'compressor' app, which is used to compress the tailwind css files, needed a staticfiles finder in STATICFILES_FINDERS in settings.py (as described in https://flowbite.com/docs/getting-started/django/) :

  1. Configure the compressor inside the settings.py file:

COMPRESS_ROOT = BASE_DIR / 'static'

COMPRESS_ENABLED = True

STATICFILES_FINDERS = ('compressor.finders.CompressorFinder',)

but actually it needed also the django staticfiles finders as below:

STATICFILES_FINDERS = ('django.contrib.staticfiles.finders.FileSystemFinder',
                     'django.contrib.staticfiles.finders.AppDirectoriesFinder',
                       'compressor.finders.CompressorFinder',)

Apart from that,

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') # Used in production (static files found by collectstatic are copied here)
STATIC_URL = 'static/'
STATIC_DIRS = STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] # Must be different from STATIC_ROOT

Now when you run python manage.py collectstatic you should see all staticfiles (admin, template static files) appear in 'staticfiles' directory

Please let me know if this works for you

Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.