How can I load my own/custom CSS - Django

Question

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!

cizario · Accepted Answer · 2020-11-02 18:25:39Z

1

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,
]

edited Nov 2, 2020 at 18:25

cizario

4,2843 gold badges16 silver badges27 bronze badges

answered Oct 3, 2020 at 17:55

Aymane Talibi

111 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Felipe Dourado Over a year ago

Actually I did: MEDIA_DIR = os.path.abspath(os.path.join(BASE_DIR, 'media')) MEDIA_ROOT = MEDIA_DIR MEDIA_URL = '/media/'. I don't think MEDIA is the problem for not linking to my custom CSS...

cizario · Accepted Answer · 2020-11-02 21:38:47Z

0

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.

edited Nov 2, 2020 at 21:38

answered Oct 3, 2020 at 18:05

cizario

4,2843 gold badges16 silver badges27 bronze badges

2 Comments

Felipe Dourado Over a year ago

the custom css is located next to css/style.css (same folder), in other words, it's not located in the app static folder. When I run python manage.py collectstatic I get and error:

whitenoise.storage.MissingFileError: The file '&amp;quot;delete-icn.svg&amp;quot;' could not be found with <whitenoise.storage.CompressedManifestStaticFilesStorage o bject at 0x0491C910>.  The CSS file 'main.css' references a file which could not be found:   &amp;quot;delete-icn.svg&amp;quot;

cizario Over a year ago

i guess, this is an other issue nothing to do with loading your custom.css, it's clearly that whiteNoise fails and aborts the build because it can't find resource delete-icn.svg referenced in your main.css in expected location. i suggest you check all resources and rebuild cache.

Collectives™ on Stack Overflow

How can I load my own/custom CSS - Django

2 Answers 2

1 Comment

Update

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Update

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related