Why does my Django admin site not have styles / CSS loading? - css

I made a Django admin site using Django development version but it isn't being styled:

After setting up your STATIC_ROOT and STATIC_URL, you may have to run
python manage.py collectstatic

ADMIN_MEDIA_PREFIX is deprecated now, use STATIC_URL instead. Setting STATIC_URL = '/static/' in settings.py should do the job. Try:
import os.path
import sys
PROJECT_ROOT = os.path.normpath(os.path.dirname(__file__))
and then:
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'static')
STATIC_URL = '/static/'
Works on Django 1.4 pre-alpha SVN-16920.

I broke my head over it for two days trying whatnot!
Finally, changed DEBUG in the settings.py file to:
DEBUG = True
and it worked.
P.S:
SECURITY WARNING: don't run with debug turned on in production!

Django does not serve static files on it's own. You have to tell it where the files are.
The ADMIN_MEDIA_PREFIX in the settings.py will point Django in the right location.
Since you're using the development version, you'll want the dev-specific document for static files how-to. Adam's link will lead you to the 1.2 version.

I read several other threads trying to fix this...resorted to an alias as in other threads.
This assumes that your own custom app is serving static files correctly, which would indicate that your STATIC_ROOT and STATIC_URL have proper settings.
STATIC_ROOT = ''
STATIC_URL = '/static/'
Then (from your static directory):
ubuntu#ip-1-2-3-4:/srv/www/mysite.com/app_folder/static$ sudo ln -s /usr/local/lib/python2.7/dist-packages/django/contrib/admin/static/admin/ admin
Hope this helps someone...there are a lot of threads on this topic.

I ran into this issue as well following the Django Book Tutorial.
In Chapter 5|Installing the model, the book states when referring to the default INSTALLED_APPS-
"Temporarily comment out all six of those strings by putting a hash character (#) in front of them."
http://www.djangobook.com/en/2.0/chapter05.html
Then, in Chapter 6, the Book tells the reader to uncomment 4 of those 6 lines-
"note that we commented out these four INSTALLED_APPS entries in Chapter 5. Uncomment them now."
But the statcifiles line is what is needed to restore CSS to the admin page, so uncomment that
'django.contrib.staticfiles',

In /project_name/project_name/settings.py you need to set STATIC_URL to tell your site what url to use for static files.
Then set STATIC_ROOT to be some folder on your filesystem that is not the same as any of your directories listed in STATICFILES_DIRS list.
Once STATICFILES_ROOT is set, you would run python manage.py collectstatic from the project directory.
This will copy all the admin static files and all files in any other folders listed in the STATICFILES_DIRS list. Basically this puts all your static files in one place so you you can move them to your CDN when deploying your site. If you are like me and don't have a CDN, then you have two options:
Add the folder you set as STATIC_ROOT to the STATICFILES_DIRS list. This will allow the staticfiles finders in django to locate all the static files.
Move the entire folder of static files somewhere else on your file system and direct STATICFILES_DIRS to include that new location.
I make no comments about security with this answer, it is just the way I have been able to develop with my web server for small projects. I expect that you will want a CDN as django suggest if you are doing anything larger scale.
UPDATE:
I just ran into this issue and this method didn't quite do what I think you want. What ended up working for me was after I ran collectstatic I just copied the admin static files that it put into STATICFILES_ROOT into the directory that I had used for my own static files. That solved the issue for me.

In addition to many of the other answers being useful, I had a problem that hasn't yet been noted. After upgrading from Django 1.3 to 1.6, my static files directory had a broken symbolic link to the django admin static files.
My settings.py was configured with:
STATICFILES_DIRS = (
'/var/www/static/my-dev',
)
According to this answer,
Django will now expect to find the admin static files under the URL
/admin/.
I had a symbolic link /var/www/static/my-dev/admin which was set to:
admin -> /usr/local/lib/python2.7/dist-packages/django/contrib/admin/media/
That location no longer exists in django 1.6, so I updated the link to:
admin -> /usr/local/lib/python2.7/dist-packages/django/contrib/admin/static/admin/
And now my admin site is working properly.

run: python manage.py collectstatic
Add this line to Vhost which located at : /etc/apache2/sites-available/000-default.conf
Alias /static/admin/ /var/www/html/example.com/static/admin
Here is entire Vhost setting for django setup
<VirtualHost *:80>
ServerName gautam.tech
ServerAlias www.gautam.tech
WSGIDaemonProcess gautam.tech python-path=/var/www/html/gautam.tech python-home=/var/www/html/gautam.tech/venv
WSGIProcessGroup gautam.tech
#Your static files location
Alias /static /var/www/html/gautam.tech/static
Alias /media/ /var/www/html/gautam.tech/media
Alias /static/admin/ /var/www/html/gautam.tech/static/admin
<Directory /var/www/html/gautam.tech/static>
Require all granted
</Directory>
<Directory /var/www/html/gautam.tech/media>
Require all granted
</Directory>
WSGIScriptAlias / /var/www/html/gautam.tech/myproject/wsgi.py
DocumentRoot /var/www/html/gautam.tech
<Directory /var/www/html/gautam.tech>
<Files wsgi.py>
Require all granted
</Files>
</Directory>
CustomLog /var/www/html/gautam.tech/access.log combined
ErrorLog /var/www/html/gautam.tech/error.log
</VirtualHost>
This will work for sure!

I see there are many answers but none of them worked for me, so I'm posting my own.
What solved it for me was adding a static files URL to the root URLs of the app. I needed to add this URL to my URLs list:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
You will also need these two imports:
from django.conf import settings
from django.conf.urls.static import stati
More can be viewed in this article.

If you are using Apache server to host your django site, you need to make sure the static alias point to your /directory to site/site_media/static/. If your static files are in /directory to site/site/site_media/static/, the previous Apache alias configuration will not work.

While following the Django tutorial, I had a similar problem and in my case the issue was the mimetype used by the development server when serving css files.
The mimetype served was 'application/x-css' which led to following warning message in Chrome (in the 'Network' tab of the Developer tools):
Resource interpreted as Stylesheet but transferred with MIME type
application/x-css: "http://127.0.0.1:8000/static/admin/css/base.css"
The workaround that I've found: changing the mimetype to be served by adding following lines to the django webapp's manage.py file:
import mimetypes
mimetypes.init()
mimetypes.types_map['.css'] = 'text/css'
Note: worked for me with Django 1.7.4 on Python 2.7 and Chrome 40.0

Same sort of issue i encountered while developing a site in django-1.10.5 and python-2.7.13. But in my firefox-51 and chrome, the login page was able to get the css but still there was no styling. But weirdly it was working on IE-8..
I tried do every possible thing mentioned here and suitable to my set of sw versions. None worked.
But when i tried the same site on other system which had the python-2.7.8, it worked..
Just posted if it may help someone...
edited: later I found that in python-2.7.13, writing the following two lines in settings.py (plus clearing the cache of the browser) had done the trick
import mimetypes
mimetypes.add_type("text/css", ".css", True)

My issue was resolved by creating new Virtual Environment for the project, before that I was using general system level python interpreter.
$ mkvirtualenv myproject
Reference: https://docs.djangoproject.com/en/2.1/howto/windows/

In the issue is in a dev/test/prod server and using Nginx, please follow the below steps.
set the configs in settings.py as something below
STATIC_URL = '/static/'
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Run the below command to create css and js files in static folder
$ python manage.py collectstatic
config in /etc/nginx/sites-enabled/example (Nginx) to serve static files
location /static/ {
alias /project/root/folder/static/;
}

this works fine and easily. I moved (manually) the folder. just you have to copy your static/admin from the directory of the main Project and paste it into public_html static/ if there is no static folder you have to run following command in terminal
python manage.py collectstatic
here you go with css working of Django admin

Ensure that 'django.contrib.staticfiles' is in your INSTALLED_APPS in your settings.py

Admin panel was working fine except css wasn't loaded. This worked for Lightsail Django with Apache
1.Define STATIC_ROOT and STATIC_URL in settings.py
STATIC_ROOT = '/opt/bitnami/projects/decisions/decision/'
STATIC_URL = '/static/'
2.Eject(copy) admin assets files to the project
run python manage.py collectstatic
this command creates /opt/bitnami/projects/decisions/decision/admin folder with css/ fonts/ img/ js/ subfolders
3.Make /static url accessible from apache
Paste this snippet in /opt/bitnami/apache2/conf/bitnami/bitnami.conf (If you have set up ssl then the file location will be /opt/bitnami/apache2/conf/bitnami/bitnami-ssl.conf)
Alias /static/ "/opt/bitnami/projects/decisions/decision/"
<Directory "/opt/bitnami/projects/decisions/decision/">
Order allow,deny
Options Indexes
Allow from all
IndexOptions FancyIndexing
</Directory>
4. Don't forget to restart apache
sudo /opt/bitnami/ctlscript.sh restart apache

Failing after trying 1000s of suggestions, I finally found a solution that helped. Here is what I tried and what I was using.
I am using django-1.11 and nginx web server.
Firstly, I made sure that my CSS/js files are not getting 404 in browser's console. After that, I could see a warning
Resource interpreted as Stylesheet but transferred with mime type text/plain
I found the base.html in admin templates and removed
type="text/css"
and now the lines looks like this:
<link rel="stylesheet" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}" />
This fixed the issue for me.

Check your settings.py file
STATIC_URL = '/static/'
there should be backslash ' / ' in both opening and closing side ..

If you have a value set in settings.py for STATICFILES_DIRS and the declared folder doesn't exist or is in the wrong location, it will cause the Admin to have no styling e.g. by defining:
STATICFILES_DIRS = ( os.path.join(BASE_DIR,"static"))
And the static folder doesn't exist .

Configuring static files
Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS.
In your settings.py file, define STATIC_URL, for example:
STATIC_URL = '/static/'
For more details see
static filesĀ [django-docs]

Related

Wagtail new installation : CSS not working

I tried the official installation guide for installing wagtail locally :
first by creating a website
second by integrating wagtail into a new website
Each time it seemed to work fine functionally but all the CSS was broken (see pic down)
I tried to do "manage.py collectstatic", it told me that 2/3 hundred files have been copied, I emptied the cache of my browser, loaded the page again, no change.
In the console it seems that the files are sent :
[14/Jul/2019 10:16:54] "GET /static/css/welcome_page.css HTTP/1.1" 200 3003
I restarted several times the tutorials from the beginning making sure I do each step exactly as described, nothing changes. When I begin with a new django project, the base django css is working before I add wagtail. I m using Python 3.6.8, Django 2.2.3 and Wagtail 2.5.1. What am I doing wrong ?
To answer #Dan Swain comment :
Settings.py file :
https://pastebin.com/zZqDesnr
Ok so simply my django-wagtail server was serving css but with an incorrect mimetype. My browser received the css but because of the wrong mimetype it didn t apply them
I had to add :
import mimetypes
mimetypes.init()
mimetypes.types_map['.css'] = 'text/css'
To my settings files and everything worked fine
One standard Wagtail folder structure includes a settings folder (not just a settings.py file). Inside the settings folder you would find base.py, dev.py, local.py, and production.py. You are using, instead, a plain settings.py file that is at the same level in the directory structure as your wsgi.py. Inside your settings.py you have a BASE_DIR declaration that is typically used in the settings folder setup:
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
I think that your problem will be fixed if you change that line to:
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
I found missing 3 style files by F12 debugging. Copy the style folder to the target folder. From wagtail-master\wagtail\admin\static_src\wagtailadmin\scss to wagtail-master\wagtail\admin\static\wagtailadmin\css. That solve my style error.
if CSS is not working in admin panel in wagtail. you should check your nginx setup at first. in nginx there are should be such configurations:
location /static/ {
alias /home/path_to_project/project/staticfiles/;
}
please give attention, there should be alias not root

django admin css on apache server

I need to solve the missing admin page css problem. I have tested almost all the solutions on the web with no luck! (I'm using django 1.8 on apache2.4)
Here's what I've done so far:
in setting.py I have:
INSTALLED_APPS = [
...
django.contrib.staticfiles',
...
]
STATIC_URL = '/static/'
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')
I did python manage.py collectstatic. It created the static folder: 63 static files copied to '/var/www/mysite/mysite/static'.
and then in etc/apache2/sites-available/000-default.conf I added:
Alias /static /var/www/mysite/mysit/static
<Directory /var/www/mysite/mysite/static>
Require all granted
</Directory>
I also reloaded the apache.
It seems that I'm doing something wrong since the django admin doesn't show the css.
Any help would be appreciated.
"The steps presented in the question is actually correct to set the static files on apache server."
The problem was the typo I made in my apache server thread (the correct one is: Alias /static /var/www/mysite/mysite/static). Thanks to #Zagorodniy Olexiy for pointing it out.
After all you wrote I think that the problem is right of the files and directories of your project. Try customize it in this way:
1) Change the rights of all files in your project:
chmod 755 /var/www/mysite/*
2) Change rights to the folders of your project:
find /var/www/mysite/ -type f -exec chmod 644 {} \;
3) Change owner of your project:
chown -R www-data:www-data /var/www/mysite/*
Also you have typo in your apache server thread:
remove
Alias /static /var/www/mysite/mysit/static
to
Alias /static /var/www/mysite/mysite/static
Hope it helps you.

Symfony Asset configuration

I just started to use Symfony 3.0.6 framework and I can't understand the using of Assets.
I'm trying to add my custom css files to the twig template but it is not working.
I'm running Wamp64 local server and my css is in:
C:\wamp64\www\rating\web\custom.css
rating is the base directory of my project.
I'we done configuration according this page:
http://symfony.com/doc/current/cookbook/assetic/asset_management.html#cookbook-assetic-including-css
And here is twig code:
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('custom.css') }}">
{% endblock %}
When I try to load css from the web it is working without problem.
I can't understand where is the problem. I search web but nothing helped and I'm really mad of it.
In Symfony, assets are by default added to your app resources or bundle resources. Plainly adding them to your web directory is considered bad practice, because it makes your bundle dependant on your project setup.
In your case, add custom.css to C:\wamp64\www\rating\src\AppBundle\Resources\public\your_subdirectories_here
Then, run the following command:
php app/console assets:install --symlink
Symfony will then publish your assets to C:\wamp64\www\rating\web\bundles\app
After doing that, you can access your CSS file using:
<link rel="stylesheet" href="{{ asset('bundles/app/your_subdirectories_here/custom.css') }}">
(Posted on behalf of the OP):
I found where the problem was. When I was configuring my local alias (rating:8080) I added this path
<VirtualHost *:8080>
DocumentRoot "c:/wamp64/www/rating/web/app_dev.php"
ServerName rating
</VirtualHost>
instead of
<VirtualHost *:8080>
DocumentRoot "c:/wamp64/www/rating/web"
ServerName rating
</VirtualHost>
So when I call rating:8080 from my browser it goes directly to php and not to .htacces. As result the route wasn't configured what is logic :)
As last I have to configure my .htacces file because the default redirecting was to app.php and not app_dev.php (simply every where inside the file change the app.php to app_dev.php).
Now everything works perfectly.

Django 404 error loading CSS from static directory

I have a problem loading up CSS from the static directory:
settings.py
MEDIA_ROOT = '/he/sites/video1.hackedexistence.com/htdocs/media/'
MEDIA_URL = '/media/'
STATIC_ROOT = '/he/sites/video1.hackedexistence.com/htdocs/static/'
STATIC_URL = '/static/'
ADMIN_MEDIA_PREFIX = '/static/admin/'
STATICFILES_DIRS = ()
url.py
from django.conf.urls.defaults import patterns, include, url
from django.contrib import admin
admin.autodiscover()
urlpatterns = patterns('',
url(r'^admin/', include(admin.site.urls)),
r'^beers/$', 'beer.views.BeersAll'),
)
base.html loads up fine, css won't load
<link rel="stylesheet" type="text/css" href="/static/css/video1.css" />
the css href link leads to
Page not found (404)
'css/video1.css' could not be found
The full path to the css file:
/he/sites/video1.hackedexistence.com/htdocs/static/css/video1.css
I'm following a youtube django tutorial by Hacked Existence. and he seems to proceed without a problem with this setup. How can i correct this?
Hacked Existence probably has his web server (apache based on your last question) configured to serve his static files.
user1658078 is correct in that you need to serve the static files in some way, and in a development environment you can use django's built-in view django.contrib.staticfiles.views.serve(request, path) - all this view does is it looks at the path set in STATICFILES_DIRS and the static subdirectory inside each application (e.g. if your project is my called mysite and it has an application called blog, then it will look in mysite/blog/static/), and serves any files which match the portion of the URL after the value of settings.STATIC_URL.
Finally, it's worth pointing out that your settings won't work at all at the moment, because your MEDIA_ROOT and STATIC_ROOT directories are set to serve from subdirectories of /he/sites/video1.hackedexistence.com/htdocs/, and unless you've created this directory, it won't work at all.
To fix static files, templates, admin files & uploaded files, follow these instructions:
In your settings.py, replace the lines in your question with the following:
import os
PROJECT_DIR = os.path.dirname(__file__)
INSTALLED_APPS = (
'django.contrib.staticfiles',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'django.contrib.messages',
'django.contrib.admin',
# 'django.contrib.admindocs',
'beer', # note - I'm guessing the name of your application is beer
)
# django.contrib.staticfiles app collects files here when we run the collectstatic command
# (depending on your web server config, you may want to change this to e.g. '/var/www/static/' when it comes to deployment)
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static-serve').replace('\\', '/')
# this should be prepended to your urls for static resources
STATIC_URL = '/static/'
# you can put static files which apply to your entire project here
STATICFILES_DIRS = (
os.path.join(PROJECT_DIR, "static").replace('\\', '/'),
)
# the URL to where we have the admin media (static files) from a web browser's perspective (not needed if using Django 1.4 or greater)
ADMIN_MEDIA_PREFIX = STATIC_URL + 'admin/'
# should be different from static files dir - this is where uploaded stuff goes
# (depending on your web server config, you may want to change this to e.g. '/var/www/media/' when it comes to deployment)
MEDIA_ROOT = os.path.join(PROJECT_DIR, 'media').replace('\\', '/')
# if you need to serve the uploaded stuff again, you need to prefix your urls with this
MEDIA_URL = '/media/'
# you can put templates which apply to your entire project here
TEMPLATE_DIRS = (
os.path.join(PROJECT_DIR, "templates").replace('\\', '/'),
)
Also make sure DEBUG is set to True.
In your urls.py inside your django project (i.e. not inside your app directory of beer), add the following at the end:
from django.conf.urls.static import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
# serving of uploaded media + static files while debug mode is on
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) # uploaded media
urlpatterns += staticfiles_urlpatterns() # files in each app's static/ dir
Create the following directories inside your django project directory:
/media/ - this is where files uploaded by users go (e.g. via FileField or ImageField)
/static/ - this is where you can put static files which apply to your whole django project (e.g. your styles for the whole page). For example, with this configuration, if you are trying to access the css file video1.css at the url static/css/video1.css, then you make sure the file is at the following path: /static/css/video1.css
/templates/ - this is where you put templates which apply to your whole django project
/beer/static/ - this is where you put static files which apply only to one specific site. When build urls to files in here, you treat them just as if they're in the /static/ directory, so just prepend the value of STATIC_URL to the relative filename.
/beer/templates/ - when you need to start creating templates for your views, you put your templates in here (the TEMPLATE_LOADERS setting includes django.template.loaders.app_directories.Loader by default, which will find templates in this directory). Similar to the application specific static directory, just treat files in this directory as if they are in the normal /templates/ directory.
/static-serve/ - this isn't used during development (so don't worry too much for now), but when you eventually want to deploy your django application, you run ./manage.py collectstatic, which will cause django to copy all files from each application directory's static directory and put them in here, and then you configure your web server to serve your files from this directory when the url starts with the value of STATIC_URL (/static/ in this case).
Now your static files will be loaded properly, the admin will display properly, your user uploaded files will be able to be served properly, and your templates will be found properly when you need them.
I believe you need to serve the static files. Instructions on how to do this are described in the Django documentation.
https://docs.djangoproject.com/en/dev/howto/static-files/
Please note there are different instructions for development and for deployment.

Drupal Site Download : Not able to install site as-is

I recently downloaded a fully functional drupal(6) site using FTP. Though I installed the Drupal instance, I got the modules and the themes that were in the sites/all folder, but wasn't able to get the actual site configuration ( Configuration and Settings of those modules )
Any help in this regard would be greatly appreciated.
Assuming this is a follow-on of: Drupal Site install on localhost after downloading source using FTP
If you get the Drupal install screen when accessing a site you've just migrated to your localhost, it's likely because you're trying to access the site locally using a URI that's different than the remote site AND this URL does not fall within the directories that Drupal searches when looking for a settings.php file (see comments starting about line 20 in the default.settings.php file of the sites/default folder).
You have two options:
Option 1: Create a symbolic link on your localhost that points requests to your local URI to the directory hosting the live site. This would look something like this:
ln -s /path/to/webroot/sites/default/ /path/to/webroot/sites/mydevsite.dev
Option 2: Create a sites/sites.php file that maps URI's to the correct folder hosting your settings.php file. For example, you'd add this to sites/sites.php if you left your settings.php file in the sites/default folder:
$sites['mysite.dev'] = 'default';
$sites['www.mysite.dev'] = 'default';
$sites['mysite.com'] = 'default';
$sites['www.mysite.com'] = 'default';
Simply put, this translates into: "Serve sites mysite.dev, www.mysite.dev, mysite.com, and www.mysite.com from the folder located at sites/default."
I usually use the second option. It's more sustainable, OS independent, and can be committed to source control.
Update based first 5 comments:
You need to edit the .htaccess file in your Drupal install. Look for this section:
# Modify the RewriteBase if you are using Drupal in a subdirectory or in a
# VirtualDocumentRoot and the rewrite rules are not working properly.
# For example if your site is at http://example.com/drupal uncomment and
# modify the following line:
# RewriteBase /drupal
#
# If your site is running in a VirtualDocumentRoot at http://example.com/,
# uncomment the following line:
# RewriteBase /
And do as it says, uncomment out the line and set it to your subdirectory.
Yes the steps are correct. Is it the design that is not coming or is the functionality of views missing? If its only the css that is not coming, then the issue could be that your theme is not getting applied. Check if the theme folder correctly exists, and disable/enable the theme.

Resources