How can I load my own/custom CSS - Django - css

I'm trying to load my own customized CSS in Django but with no success. The weird thing is that the main CSS (style.css) is loading correctly.
Here is my base.html:
<!-- Main Style CSS -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<!-- My Own Style CSS -->
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
My settings:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATIC_DIR = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
STATIC_DIR,
]
My urls.py:
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('cart/', include('cart.urls')),
path('payment/', include('payment.urls')),
path('orders/', include('orders.urls')),
# path('users/', include('django.contrib.auth.urls')),
path('', include('django.contrib.auth.urls')),
path('', include('account.urls')),
path('', include('dma.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) + \
static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Any help?
Thank you!

It won't work because you didn't specify a MEDIA_URL, so try this:
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
MEDIA_URL = '/css/'
STATIC_DIR = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
STATIC_DIR,
]

where is located your custom css ? in which static folder ?
in project level static folder next to css/style.css ? in this case it should be loaded with no problem maybe you have a typo in the file name ?
in app static folder ?
in this case, i guess you need to add
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder'
)
refer to https://docs.djangoproject.com/en/2.2/ref/settings/#std:setting-STATICFILES_FINDERS
Update
maybe you need to re-run the command below:
python manage.py collectstatic
so the new assets can be taken in consideration the next reload.

Related

How to write django code inside css style tag to link images from static directory

I want to write Django code into CSS style tag in HTML elements in order to get images from static directory. here is my original code
i tried with the below code
but this isn't worked for me, how can i solve this problem?
NB: i used {% load static %} to load all static files, css and js works fine but i became failed to do this.
First Add These Code In Your settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'myproject/static')
]
# Media settings
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
Then Add These Code In Your project urls.py
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Then add this line to your html
style="background-image: url({%static 'images/person_1.jpg' %});"
You can check if in your root project/settings.py has something like this:
STATIC_ROOT = ''
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
and then, in your root project/urls.py:
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [...] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
To be sure, make sure you restart your server after these changes.
In settings.py add this
STATIC_URL = 'static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
try to convert style tags in this manner
style ="background-image:url(images/image_1.jpg)"
TO
style ="background-image:url('/static/images/image_1.jpg')"

Why are edits to my css file not showing up? Django

So I am noticing that my css changes are not being reflected. I did a hard-reload and cleared the cache but still nothing. Like I can literally delete the css file and my badge which I'm trying to edit is still there... it only goes away once I take it off of base.html directly. So what is going on here? I have a static folder in my app, with a css folder and then my css/notification file. I tried doing collectstatic through terminal but that doesn't do anything. Also, I already have my load static tag in my html.
settings.py
STATIC_URL = '/static/'
STATICFILES_DIR = [
"/DatingAppCustom/dating_app/static",
]
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'dating_app/media')
settings.py/installed_apps
'django.contrib.staticfiles'
project urls
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('dating_app.urls', namespace= 'dating_app')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
base.html
{% load staticfiles %}
you can use STATICFILES_DIRS instead of STATICFILES_DIR.
also write ALL PATH in STATICFILES_DIR like this.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]

STATIC_ROOT doesn't find my static files

I'm newbie in Django and I'm trying to find a way to load my css files in my project. Here is my settings.py file
STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_FINDERS = (
"django.contrib.staticfiles.finders.FileSystemFinder",
#"django.contrib.staticfiles.finders.AppDirectoriesFinder"
)
AUTHENTICATION_BACKENDS = (
# Uncomment the following to make Django tests pass:
'django.contrib.auth.backends.ModelBackend',
'allauth.account.auth_backends.AuthenticationBackend',
)
I got a way to do it using the variable STATICFILES_DIRS, but it won't work together with the others similars variables.
What should I do to fix it?
EXTRA INFORMATIONS:
My base.html file static files call:
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'icomoon_style.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}" />
My folders disposal:
OntoLogica (main folder)
Ontologica (project folder)
static folder
icomoon_style.css
style.css
css folder
bootstrap.min.css
I found a way that solved my case. It was found in this site: https://devcenter.heroku.com/articles/django-assets
What I've to do:
Add the line PROJECT_ROOT and the change the line STATIC_ROOT to:
PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'staticfiles')
With this I could add the line STATICFILES_DIRS without any trouble:
STATICFILES_DIRS = (
os.path.join(PROJECT_ROOT, 'static'),
)
It worked perfectly for me and I hope it helps someone else too. Thanks
set static path in a correct way. Get an idea from my project.
settings.py
import os
import sys
from os.path import abspath, dirname, join
sys.path.append(join(dirname(__file__), "../applications"))
PROJECT_ROOT = abspath(dirname(__file__))
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
MEDIA_ROOT = join(PROJECT_ROOT, '../media/')
MEDIA_URL = '/media/'
STATIC_ROOT = join(PROJECT_ROOT, '../static/')
STATIC_URL = '/static/'
My structure of files:
Main directory
project dir
settings.py
urls.py
media
static folder.
As it says in the "Warning" section of the docs
This [STATIC_ROOT] should be an initially empty destination directory for collecting your static files from their permanent locations into one directory for ease of deployment; it is not a place to store your static files permanently.
So you should use STATICFILES_DIRS to point to your static files.
And lastly make sure that you use {% load staticfiles %} in your templates to load your static files.

Unable to load CSS files in Django

I'm using Ubuntu and Django 1.3.7. Following are the various relevant settings:
My directory structure:
mysite/
manage.py
settings.py
__init__.py
urls.py
myapp/
__init__.py
forms.py
models.py
views.py
templates/
index.html
home.html
static/
common.css
...
...
My settings.py file:
import os.path
SETTINGS_ROOT = os.path.dirname(__file__)
INSTALLED_APPS = (
...
...
'django.contrib.staticfiles'
)
STATIC_ROOT = os.path.join(SETTINGS_ROOT, "static/")
STATIC_URL = '/static/'
In my templates html file:
<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.css">
Still, the pages don't show any images, css or js files. I've read the docs. But nothing helps. What else do I need to include/modify in order to get the files running?
STATICFILES_DIRS = (
# Put strings here, like "/home/html/static" or "C:/www/django/static".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
'/path/to/your/project/assets',
)
settings.py
import os
SETTINGS_ROOT = os.path.dirname(__file__)
STATIC_ROOT = os.path.join(SETTINGS_ROOT, "static")
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(SETTINGS_ROOT, 'static'),
)
main urls.py
from django.conf.urls import patterns, include, url
from django.conf.urls.static import static
from django.contrib import admin
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
admin.autodiscover()
urlpatterns = patterns('',
................
)
urlpatterns += staticfiles_urlpatterns()
template
<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.css">
my static file configurions are below.
PROJECT_DIR = os.path.abspath(os.path.dirname(__file__))
enter code herePER_DIR = os.path.abspath(os.path.join(PROJECT_DIR, os.path.pardir))
STATIC_ROOT = os.path.join(SUPER_DIR, 'static')
STATIC_URL = '/static/'
it might help

css in django templates

I have a problem using css in my django template,
In my settings.py i have this :
BASE_DIR = os.path.abspath(os.path.dirname(__file__) + '/')
STATIC_URL = BASE_DIR + '/static/'
In my paths I have the folder "static/css/home_css.css"
In my template home.html I have the link tag :
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/home_css.css" media="all" />
but it doens't work in order to render de css.
If anybody knows what happens please
STATIC_URL shouldn't point to the path in the filesystem. STATIC_ROOT should.
import os
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = "/static/"
In your settings.py add 'django.core.context_processors.static', at TEMPLATE_CONTEXT_PROCESSORS like in this example:
TEMPLATE_CONTEXT_PROCESSORS = (
'django.contrib.auth.context_processors.auth',
'django.core.context_processors.debug',
'django.core.context_processors.i18n',
'django.core.context_processors.media',
'django.core.context_processors.static',
'django.core.context_processors.request',
'django.contrib.messages.context_processors.messages',
)
EDIT
And if you're working with the local dev-server you'll need something like this in your urls.py:
(r'static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': '%s' % os.path.join(os.path.dirname(os.path.abspath(__file__)), 'static')}),
I solved it!
I put my directory static into aplication root path, and set
STATIC_URL = '/static/'
thanks

Resources