css does not apply style to templates in django

Question

The theme applied by css does not work. In the past it used to apply but i do not what i did that its not executable anymore. base.htmnl is core template for other pages.

In base.html i have :

<!DOCTYPE html>
{% load staticfiles %}

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">

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

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


  </head>
  <body>

    <nav class='navbar mynav-fixed-top navbar-expand-lg bg-dark' role='navigation' id='navbar'>
      <div class="container-fluid">

      </div>

    </nav>

    <div class="container-fluid">

    {% block content %}

    <div class="main">

    </div>

{% endblock %}

main.css

body{background-color: yellow}

settings.py :

STATIC_URL = '/static/'

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

The css does not work. I do not knwow why the application does not apply changes in css file. Would appreciate your though and help how to fix it.

try body{background-color: yellow !important} . [!important](https://www.geeksforgeeks.org/how-to-apply-important-in-css/) will force to use that css property value only. In your base.html keep your static import link for main.css below bootstrap import link. Also make sure you have called `python manage.py collectstatic` command after making any changes in static files. — k33da_the_bug, Mar 21 '20 at 13:56
Please grab the css URL from rendered page and open it manually in the browser - what's the error message/response status? — Ivan Starostin, Mar 21 '20 at 14:21
404 - File or directory not found. The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable. — irada, Mar 21 '20 at 14:43
Try using a classname or an `id`, rather than the tag name. Also try locating the link to the css file at the very bottom of your other `link` tags — DumbCoder7, Mar 21 '20 at 14:45
Please add full css file URL (which gives 404) to your question and show your project folder structure. Also please clarify if you are running the project with DEBUG=true or false, show INSTALLED_APPS, mention Django version. — Ivan Starostin, Mar 21 '20 at 14:50
Debug is False. For full css file url you mean : http://www.nana.com/css/main.css ? — irada, Mar 21 '20 at 14:54
No, the full url from rendered page. In the browser make "View page source" and take the url from there. — Ivan Starostin, Mar 21 '20 at 15:16

score 0 · Answer 1 · answered Mar 21 '20 at 13:37

In general it is best to have the link to your own custom stylesheet (in your case that is main.css) after the other stylesheets in the head-section. The bootstrap stylesheets may overwrite your main.css thus making it useless. You have the link to main.css before the links to bootstrap.

score 0 · Answer 2 · answered Mar 21 '20 at 14:27

0

You better set STATIC_ROOT instead of STATICFILES_DIRS if this is the only folder with static files in your project:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,'static')

and change this {% load staticfiles %} to this {% load static %} in your templates - load staticfiles method is deprecated since 2.1.

Also, as already suggested in comments, put your stylesheet after all the thirdparty stylesheets - thus it will have higher priority. Also note that your style may have lower priority if any of prior stylesheets defines the same property with !important option.

answered Mar 21 '20 at 14:27

Ivan Starostin

8,798
5
21
39

Please answer my question asked in comments. – Ivan Starostin Mar 21 '20 at 14:42
i have answered please see the comments – irada Mar 21 '20 at 14:45

score 0 · Answer 3 · answered Mar 21 '20 at 15:17

You have not set the STATIC_ROOT, that's why your css is not showing up.

First Make sure in settings.py the debug setting is True

Debug=True

Put following code in settings.py

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticroot')
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

in your main urls.py

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # other urls
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

and then call following command

>python manage.py collectstatic

css does not apply style to templates in django

3 Answers3