Django: cannot update css changes

Question

After running my server, my page doesn't show the updates that I've made in the CSS file.

My navbar won't recognize a css rule: .navbar-bg {background-color: black;} (i've just tested this rule).

However, If I paste this same HTML and CSS code in a site like CodePen it works (my navbar gets a black background).

https://codepen.io/ogonzales/pen/KbKzQo

The same happens if I run the HTML and CSS from a directory in my PC, so I think it has something to do with Django.

What could it be?

I've tried also this other answer:

python manage.py collectstatic --noinput --clear

from here (without results):

Django won't refresh staticfiles

base.html:

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="{% block metadescription %}{% endblock %}">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/custom.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    {#    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"#}
    {#          integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">#}
    <title>Title</title>
</head>
<body>
<div>

    <div class="container">

    {% include 'navbar.html' %}
        <div class="container-fluid nav-bar-fixed-top my_top_navbar_div">


            {% block content %}
            {% endblock %}
        </div>
    </div>
    {% include 'footer.html' %}
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="{% static 'js/jquery-3.2.1.slim.min.js' %}"></script>
    <script src="{% static 'js/popper.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>



</body>
</html>

navbar.html:

<!--- GALLITO NAVBAR --->

<nav class="navbar navbar-expand-md fixed-top navbar-bg">
    <a class="navbar-brand" href="#">Navbar</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
            aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">


        <ul id="mi_menu" class="navbar-nav mr-auto my_custom_menu">

            <li class="nav-item active">
                <a class="nav-link" href="#">Stickers <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Etiquetas</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Magnetos</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Pines</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Pines</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Empaques</a>
            </li>
        </ul>


        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link"><i class="fas fa-shopping-cart"></i></a>
            </li>

            {% if user.is_authenticated %}
                <li class="nav-item active">
{#                    <a class="nav-link" href="{% url 'logout' %}">Logout</a>#}
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">{{ user }}</a>
                </li>
            {% else %}
                <li class="nav-item active">
{#                    <a class="nav-link" href={% url 'login' %}>LogIn</a>#}
                </li>
            {% endif %}

            <li class="nav-item active">
                <a class="nav-link" href="#">Registro</a>
            </li>
        </ul>


    </div>
</nav>

custom.css:

body {
    font-family: 'Roboto', sans-serif;
}

/* === NavBar === */
.nav-item {
    letter-spacing: .2em;
    font-size: 14px;
    text-transform: uppercase;
}


.dropdown-item {

}


/* == Footer ==== */

.my_footer {
    background-color: #5a6268;
}

.my_footer p {
    padding-top: 20px;
    font-size: 14px;
}


/* == Category Page == */

.my_row_class {
    padding-top: 15px;
}

.my_row_class .mx-auto p {

    color: #000;
    font-size: 12px;
}


.my_row_class .mx-auto p a {

    color: #000;
    font-size: 12px;
    text-decoration: none;
}

.my_image {
    width: 100%;
    height: auto;
}

.my_title {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .2em;
}

.my_image_padding {
    padding-top: 16px;
}

.my_bottom_margin {
    margin-bottom: 10px;
}

.card-body h4 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .2em;
}

/*=== Product Page ==*/

.my_prod_row_class {
    padding-top: 15px;
    padding-bottom: 20px;
}

.my_prod_row_class .mx-auto p {
    color: #000;
    font-size: 12px;
}


.my_prod_row_class .mx-auto p a {
    color: #000;
    font-size: 12px;
    text-decoration: none;
}


.my_prod_title {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .2em;
    padding-top: 15px;
    padding-bottom: 10px;
}

.my_prod_text {
    padding-right: 20px;
}

.my_search_text {
    padding-top: 20px;
}

/*== Cart ==*/


.my_custom_table {
    min-width: 400px;
    font-size: 14px;
}

.my_custom_thead {

    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: .2em;
    background-color: #f8f9fa !important;

}

.custom_image {
    width: 100px;
    height: 100px;
}

.custom_a {
    text-decoration: none;
}

.custom_icon {
    text-decoration: none;
    color: gray;
}

.my_custom_button {

    margin-top: 5px;
}

.navbar-bg {
    background-color: black;
}

UPDATE 1:

I see that my new css class: .navbar-bg is not beeing loaded. Why is that? and How can I solve it? (CTRL + F5 doesn't solve this).

Also, this happens in Chrome and in Firefox (I'm using Ubuntu).

UPDATE 2:(settings.py)

"""
Django settings for perfectcushion project.

Generated by 'django-admin startproject' using Django 2.1.3.

For more information on this file, see
https://docs.djangoproject.com/en/2.1/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/2.1/ref/settings/
"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/2.1/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '^_67&#r+(c+%pu&n+a%&dmxql^i^_$0f69)mnhf@)zq-rbxe9z'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'shop',
    'search_app',
    'cart',
    'stripe',
    'order',
    'crispy_forms',

]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'perfectcushion.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates'),
                 os.path.join(BASE_DIR, 'shop', 'templates/'),
                 os.path.join(BASE_DIR, 'search_app', 'templates/'),
                 os.path.join(BASE_DIR, 'cart', 'templates/'),
                 os.path.join(BASE_DIR, 'order', 'templates/'),]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'shop.context_processor.menu_links',
                'cart.context_processor.counter'
            ],
        },
    },
]

WSGI_APPLICATION = 'perfectcushion.wsgi.application'


# Database
# https://docs.djangoproject.com/en/2.1/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}


# Password validation
# https://docs.djangoproject.com/en/2.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/2.1/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'static', 'media')


### Stripe Settings ###


STRIPE_PUBLISHABLE_KEY = 'pk_test_N0ksyIuO5d1ulLDuoMlLiU26'

STRIPE_SECRET_KEY = 'sk_test_fFHncrzOzBPS3XxDQM0TWMfy'

CRISPY_TEMPLATE_PACK = 'bootstrap4'

UPDATE 3:

Creating static_dirs inside static folder and then changing this:

# STATICFILES_DIRS = (
#     os.path.join(BASE_DIR, 'static'),
# )

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static', 'static_dirs'),
    )

and then doing collecstatic doesn't make effect:

manage.py@perfectcushion > collectstatic
bash -cl "/home/ogonzales/Escritorio/projects_envs/perfectcushion_env/bin/python /home/ogonzales/Escritorio/pycharm/helpers/pycharm/django_manage.py collectstatic /home/ogonzales/Escritorio/web_proyects/perfectcushion"
Tracking file by folder pattern:  migrations

You have requested to collect static files at the destination
location as specified in your settings:

    /home/ogonzales/Escritorio/web_proyects/perfectcushion/staticfiles

This will overwrite existing files!
Are you sure you want to do this?

Type 'yes' to continue, or 'no' to cancel:  yes

0 static files copied to '/home/ogonzales/Escritorio/web_proyects/perfectcushion/staticfiles', 119 unmodified.

Process finished with exit code 0

UPDATE 4: Project Structure:

Try viewing the source of your app from the browser and then click on the css link and see if the correct css file is loaded. — MiniGunnR, Dec 09 '18 at 07:05
Might be due to browser cache. Try hitting a hard refresh (Ctrl+F5) — art, Dec 09 '18 at 12:48

score 5 · Answer 1 · answered Oct 02 '20 at 07:23

5

is not that! it happened to me the exact same thing! is the cache (facepalm)

Try it in incognito mode and you will see the changes in your CSS

answered Oct 02 '20 at 07:23

Ignacio

51
1
2

Ivan Starostin · Accepted Answer · 2018-12-11T17:59:06.373

2

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

STATIC_ROOT is supposed to be destination folder for collectstatic command. That's where files will be copied from source directories.

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

STATICFILES_DIRS is the list of source folders for collectstatic. Additional folders. Because all the subfolders named static from any app listed in INSTALLED_APPS will be searched automatically by default. Which means - even thirdparty apps, e.g. DRF or whatever.

Again, in STATICFILES_DIRS you should list any source folders with staticfiles which are not /static/ subfolders of your django project apps. E.g. if you have somewhere /home/me/my_super_imgs/ and config:

STATIC_ROOT = '/var/opt/prod/static/'
STATICFILES_DIRS = (
    '/home/me/my_super_imgs/',
)

you will have all the files and subfolders of my_super_imgs inside /var/opt/prod/static/ after executing collectstatic. As well as all any content from /static/ subfolder of all the apps listed in INSTALLED_APPS.

If you have shop/static/ folder - its contents will be "collected" into staticfiles by default.

Note, you are trying to load static files under /static/ url in your template, but your destination folder is named as staticfiles. It's okay because you have configured both STATIC_ROOT and STATIC_URL, but may confuse because you have /static/ folder as well.

One more thing:

'DIRS': [os.path.join(BASE_DIR, 'templates'),
             os.path.join(BASE_DIR, 'shop', 'templates/'),
             os.path.join(BASE_DIR, 'search_app', 'templates/'),
             os.path.join(BASE_DIR, 'cart', 'templates/'),
             os.path.join(BASE_DIR, 'order', 'templates/'),]
    ,
    'APP_DIRS': True,

stop listing your app dirs here - APP_DIRS is enabled and this is enough.

upd

Why browser does not reflect css file changes?

There are many levels of caching between file on server's disk and rendered page on client-side. By doing this trick href="{% static 'css/custom.css' %}?20181209"> (see question symbol?) as I mentioned in comment under your question, you are changing full URL and it forces reloading of css (or any other) file, whilst physical file name is not changed. Update date after ? when file changed. This is a well known trick. This value may be date or hash of this file.

Also, you may introduce template tag like {% my_css %} which would insert static file names with defined date/hash/build parameter in the URL - to avoid copying this magic parameter into many templates.

Right now you may test reloading css file with parameter manually:

update css file
check that browser does not see changes by opening css file url
open the same url with any ?parameter
done, file content refreshed

edited Dec 11 '18 at 17:59

answered Dec 11 '18 at 15:28

Ivan Starostin

8,798
5
21
39

I see your point. Please, see my update 4, I just have 1 static folder at project level. I guess I need to have 1 inside each app (at least in the shop app?). Also, please, explain a little better the "Note" part in your answer. Where in my template Am I doing that? – Omar Gonzales Dec 11 '18 at 15:48
I suggest to set STATIC_ROOT to some place outside of project folder. Right now everything is at one place and may confuse. Just for understanding what goes where. Then, `print(BASE_DIR)` - my guess is that it is `.../web_proyects/perfectcusion/perfectcusion/` and combined with `/static/` will not match your `perfectcusion/static/` folder. – Ivan Starostin Dec 11 '18 at 17:07
Now I see what you say in your comment about loading staticfiles. So according to your suggestion (and beeing staticfiles folder the final destination of all my static files -from different aps-, I should `"{% staticfiles 'js/bootstrap.min.js' %}"` instead of `"{% static 'js/bootstrap.min.js' %}"` – Omar Gonzales Dec 11 '18 at 17:08
BASE_DIR is `/home/ogonzales/Escritorio/web_proyects/perfectcushion` – Omar Gonzales Dec 11 '18 at 17:12
`I should "{% staticfiles 'js/bootstrap.min.js' %}"` no, there is no such command. `static` is a function (template tag) name here. Now clear `staticfiles` and run `collectstatic`. – Ivan Starostin Dec 11 '18 at 17:16
Ok, deleted all files inside `staticfiles` folder and run `collectstatics`. Now I have all the files from `static` folder copied in `staticfiles` folder. My problem was that I was modifiying things directly in `staticfiles` folder, when I should have modified things in `static` folder and then call `collecstatic`. However, Why modifiying things in `staticfiles` folder is not recognized when calling runserver? (changes don't take place in css file por example). My logic is that it should because `staticfiles` folder is the end destination of all static files (css files included). – Omar Gonzales Dec 11 '18 at 17:45
Why changing CSS file in `staticfiles` folder doesn't reflect in browsers? (make a new css class but when inspecting sources -in Chrome or Firefox- it doesn't appear there). As if weren't created at all, againg beeing this folder the end destination of all static files. – Omar Gonzales Dec 11 '18 at 17:47
thank you, one more point, after this talk I think the best method is to make all changes in statics folders in your apps, because if you make them directly en staticfiles folder and also in static folders of your apps, and then call `collectstatics`, the laters will override your changes in staticfiles folder files. I have to test this, correct me if I'm not correct. – Omar Gonzales Dec 11 '18 at 18:04
Yes, you shouldn't modify files directly in `staticfiles` folder. – Ivan Starostin Dec 11 '18 at 18:22

score 0 · Answer 3 · answered Dec 10 '18 at 05:03

0

You can test this method. I hope would be benefit for you

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static', 'static_dirs'),
    )

Then add you can static files in static/static_dirs folders.

answered Dec 10 '18 at 05:03

Ali

2,541
2
17
31

Omar Gonzales · Answer 4 · 2018-12-11T15:15:03.987

So, what I found is that if:

1) Changing custom.css file in staticfiles/css and then running: collecstatic wouldn't update the custmo.css in static/css folder.

This is why my update wasn't reflecting on the different browsers.

2) Even if I delete custom.css in static/css and then run collecstatic to create/update custom.css, it does not happen. And the browser doesn't reflect the changes in the css file I want.

3) The solution, at the moment for me, is to make the modifications directly in the static/css folder, to be exact here: static/css/custom.css, and then the changes are visible in browser, in the case, having the navbar background in black.

Is this how it is supposed to be done?

score 0 · Answer 5 · answered Jun 27 '21 at 15:04

solution 1: after saving your static files (the main.css file for exemple), kill the running web server and clean the page by clicking ctrl+c , and rerun the server by executing this command in your terminal/cmd

python manage.py runserver

finally, reload the web page in the browser

solution 2: try to clear your browser cache after each modification of your static files (css, js, media or font)

you can find this in (if you use google chrome) Settings> Privacy and security> Clear browsing data

there is another solution, is by using google chrome incognito (private navigator) — karbi, Aug 26 '21 at 20:47

score 0 · Answer 6 · answered Sep 08 '21 at 20:49

0

I had a similar issue. The mistake I made was making changes in the statics folder of the main project instead of the static folder of my app.

When I changed CSS in the app folder and run collectstatics changes got reflected.

Hope it'll help.

answered Sep 08 '21 at 20:49

Yulia

21
3

score 0 · Answer 7 · answered Jul 24 '22 at 13:56

0

I had a similar problem, just move your CSS file to a new file with another name, for exemple main.css to main2.css and put main2.css in the static place of the old main.css , finally restart the server.

answered Jul 24 '22 at 13:56

zeïn le statisticien

39
3

Django: cannot update css changes

7 Answers7

upd

Linked

Related