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.
Related
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 have application generated with electron-forge cli with webpack template. My files structure is:
I'm trying to add some styles to index.html but it doesn't work as expected. I tried to add in <head> of index.html:
<link rel="stylesheet" type="text/css" href="../css/index.css">
not working. I also tried to add:
import '../css/index.css'
to renderer/js/index.js (since it's bundled by webpack anyway) but it also doesn't work. What I'm doing wrong? Is the path to stylesheet not correct in my index.html head because of using webpack?
It's been a while since I've setup django to work locally. I'm using version 1.11. Getting it to serve the static files.
My project is called chatsys and I've created the static folder and css in this folder chatsys\static\css\style.css .
Here's the current settings in the settings file.
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
and in the urls
#for serving static files
from django.conf import settings
from django.conf.urls.static import static
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
and finally in the html
{% load static %}
...
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
however in the runserver console I get 404 for /static/css/style.css
You should define STATICFILES_DIRS and include your project's static directory there.
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
These are the directories that Django collects static files from.
You should then change STATIC_ROOT to be a different directory. It is the directory that collectstatic collects static files to. The static root should not be under version control.
As an aside, you are loading the static tag in your template but not using it. You could change it to:
{% load static %}
...
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
Move your static folder under the base dir
chatsys
migrations
templates
etc.
static
css
style.css
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 am running symfony on my localhost for learn, i have configured my localhost folder http://localhost/symfony to http:/symfonyweb.
Everything works fine but style can't loading,
<link rel="stylesheet" type="text/css" href="/assets/css/style.css">
full url is: http://symfonyweb/assets/css/style.css
Your asset should be load using the function asset() which is linked to /web root directory.
In your case, your assets should be like <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/style.css') }}">