I'm using Django as a framework, and I want to hide a column on mobile view with CSS.
I use three different settings files: base, dev, and prod.
All the main settings are in the base file and the only difference between the dev and prod settings - in what database I'm using (local Postgres and remote Postgres on Railway).
I have my base.html file, where I load static files:
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'main/css/base.css' %}">
<link rel="shortcut icon" type="image/png" href="{% static 'main/img/favicon.ico' %}"/>
That's my project structure:
I want to hide a column on mobile view, so that's what I have in my base.css:
#media only screen and (max-width: 800px) {
td:nth-child(1) {
display:none;
}
th:nth-child(1) {
display:none;
}
}
However, when I run the app using dev settings - everything works fine. When I run using prod - changes are not displayed.
It seems that CSS file is not being read, but I'm wondering why if the code is the same - the difference is only in using different databases on different settings.
I already did collectstatic with changes in CSS and pushed it to the server.
But even when I run the app with prod settings locally - still the CSS is not taking into consideration.
This is how I manage static files in my base settings:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = [
os.path.join(BASE_DIR), 'static'
]
According to your question, you are not getting css after run collectstatic in production.
Why you are not getting because you have not added STATIC_ROOT in settings.py file.
Serving static files in production:
STATIC_ROOT: This is the absolute path to a directory where Django's collectstatic tool will gather any static files referenced in our templates.
Try adding STATIC_ROOT in settings.py file and run collectstatic.
STATIC_URL, STATIC_ROOT and STATICFILES_DIRS these three must be there inside settings file for production use.
settings.py file:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static/'),
)
This should work perfect now in production.
I solved this by moving my static folder where I have my images and CSS to the app folder.
Then I put these settings:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
And deleted STATICFILES_DIRS - it is not necessary.
Now it works both on prod and dev.
Thank you, #ManojTolagekar and #Ivan Starostin.
I am novice person to Django learning.
I have tried with simple linking HTML and CSS files in Django by referring some sites and videos but it seems CSS file is not included. Though I tried multiple times I am not getting the background color which I put in CSS file.
CSS file saved in static/css/style.css
body{
background-color: violet;
}
HTML file saved in templates/bg.html
{%load static%}
<!<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> BG </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<h2 class="bg_class">BG Colour</h2>
<p>
Background Color is to be changed.<br>
</p>
<script src="" async defer></script>
</body>
</html>
Also, I have configured the static file in settings.py file too.
STATIC_URL = '/static/'
STATIC_DIRS=[
os.path.join(BASE_DIR,'static')
]
Instead of ‘violet’ background, I am still getting ‘white’ background.
Kindly help me to fix this.
Are you serving your static files?
If you are running the manage.py runserver you might want to add this to the end of your projects urls.py:
from django.conf import settings
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
if settings.DEBUG:
urlpatterns += staticfiles_urlpatterns()
like here: https://github.com/almazkun/durls/blob/4b17a1b698430b442fc1e74e5b24f792f57cb17e/settings/urls.py#L28
or here:
How do you serve static files when using the django runserver development server?
Note that Django does not serve static and media files itself. You will need to setup it separetatly using things like nginx or whitenoise.
To managing the static file. First you need to know the development and production setup.
In development you need to set DEBUG=True in settings.py
In production you need to set DEBUG=False in settings.py
Development
For serving the static file in development project. You need to do two things .
First one is changing the settings.py file. Added this sample code.
STATIC_URL = '/static/'
if DEBUG:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'/static/',
]
else:
STATIC_ROOT = os.path.join(BASE_DIR, "static")
Second change is urls.py file. Add added this sample code-
## import this at the top
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
## bottom of the file `urls.py`
if settings.DEBUG:
urlpatterns += staticfiles_urlpatterns()
You can check out this django project. how you can change your code Repo Link.
Production
For production build you must follow this checklist.
After completing checklist, you can serve your static content using nginx web-server. Or you can use whitenoise python package.
Configure static files to work with NGINX or Medium blog(Configuring Django Static files with Nginx)
Using WhiteNoise with Django.
I think it will help your further working.
I'm working on a Django 1.10.5 project. I have a number of apps, each of which has an app-specific css file which must import a css file common to all the apps. But the import isn't working unless I put the common css file in each app's static folder (defeats the point).
In the app template I have
<link rel="stylesheet" rel="stylesheet" type="text/css" href="{% static 'app1/css/app1.css' %}"/>
And my settings:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(os.path.dirname(BASE_DIR), "static-storage"),
]
STATIC_ROOT = os.path.join(os.path.dirname(os.path.dirname(BASE_DIR)), "static-serve")
The common css file is in static-storage/css. I have tried running collectstatic but it does nothing...right now DEBUG=True. Can anybody help? Thanks.
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.
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]