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
– MiniGunnR, Commented Dec 9, 2018 at 7:05
Might be due to browser cache. Try hitting a hard refresh (Ctrl+F5) — art
– art, Commented Dec 9, 2018 at 12:48

Ignacio · Accepted Answer · 2020-10-02 07:23:43Z

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 2, 2020 at 7:23

Ignacio

511 silver badge2 bronze badges

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

Comments

IVNSTN · Accepted Answer · 2018-12-11 17:59:06Z

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, 2018 at 17:59

answered Dec 11, 2018 at 15:28

IVNSTN

9,3896 gold badges24 silver badges42 bronze badges

9 Comments

Omar Gonzales Over a year ago

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?

IVNSTN Over a year ago

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.

Omar Gonzales Over a year ago

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 Over a year ago

BASE_DIR is /home/ogonzales/Escritorio/web_proyects/perfectcushion

IVNSTN Over a year ago

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.

|

Ali · Accepted Answer · 2018-12-10 05:03:39Z

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, 2018 at 5:03

Ali

2,6013 gold badges19 silver badges32 bronze badges

Comments

Omar Gonzales · Accepted Answer · 2018-12-11 15:15:03Z

0

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?

edited Dec 11, 2018 at 15:15

answered Dec 10, 2018 at 5:44

Omar Gonzales

4,03812 gold badges66 silver badges135 bronze badges

Comments

karbi · Accepted Answer · 2021-06-27 15:04:23Z

0

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

answered Jun 27, 2021 at 15:04

karbi

3613 silver badges12 bronze badges

1 Comment

karbi Over a year ago

there is another solution, is by using google chrome incognito (private navigator)

Yulia · Accepted Answer · 2021-09-08 20:49:32Z

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 8, 2021 at 20:49

Yulia

696 bronze badges

Comments

zeïn le statisticien · Accepted Answer · 2022-07-24 13:56:04Z

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, 2022 at 13:56

zeïn le statisticien

493 bronze badges

Collectives™ on Stack Overflow

Django: cannot update css changes

7 Answers 7

Comments

upd

9 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

upd

9 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related