0

Necessary updates in settings.py

INSTALLED_APPS = [
'store.apps.StoreConfig',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]


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

main.html file

<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
<title>Ecom</title>
<meta charset="UTF-8">

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" 
rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" 
crossorigin="anonymous">

<link rel="stylesheet" href="{% static 'css/main.css' %}">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
<h2>main</h2>
(% block content %}
 
{% endblock %}
</body>

CSS file main.css

body {
background: #FF0000; }

also tried using !important (despite knowing it isn't a good practice)

The template I was trying to render, store.html

{% extends 'store/main.html' %}
{% load static %}

{% block content %}
 <h1>color</h1>
{% endblock %}

page preview

enter image description here

The file directories,

src
   -static
     -css
       -main.css
   -store
     -templates
        -store
          -main.html
          -store.html

The problem is I cannot preview the customized background color of the body. Is the problem due to bootstrap, or my customized css attributes? Or is it the {% extend ...} is not working, or am I missing to add something in the settings.py. Just started learning Django, would be of great help if anyone make me clear the bug.

Era
  • 23
  • 2
  • 10
  • CSS styles are not getting applied or CSS files fail to load? What happens when you open css file url manually? – Ivan Starostin May 10 '21 at 13:51
  • No, @IvanStarostin the CSS files don't fail. Other properties I included works fine, and those even overrides bootstrap also. The problem is only in case of the body tag specifically. I was trying to alter the background color of body tag element it was not applied back then. after a course of time, it worked. If I alter the values again, it doesn't seem to work again. – Era May 10 '21 at 14:51
  • @IvanStarostin this is surprisingly working fine now. Not getting why this didn't work a few minutes ago. Is it an often phenomenon in case of Django to freeze the stylesheet? Thanks for reaching out though :") – Era May 10 '21 at 15:07
  • it's not django: https://stackoverflow.com/questions/15562384/how-to-force-chrome-browser-to-reload-css-file-while-debugging-in-visual-studio – Ivan Starostin May 10 '21 at 19:36
  • Thank you for referring the thread @IvanStarostin CTRL+SHIFT+R worked fine from the thread. Was trying CTRL+F5 the whole time, but had to do it every time I changed the styles. CTRL+SHIFT+R just solved it like it was never a problem. Also toggled the Disable Cache option ON. :") – Era May 11 '21 at 06:34

1 Answers1

0

Ivan Starostin helped me referring a thread [https://stackoverflow.com/questions/15562384/how-to-force-chrome-browser-to-reload-css-file-while-debugging-in-visual-studio] which worked for me. The problem was not related to Django or CSS, rather due to caches. CTRL + F5 did work fine and also SHIFT + CTRL + R worked. Hard refresh worked.

Era
  • 23
  • 2
  • 10