-1

Problem: As the title says I am building a django project the base.html extended to homepage.html and works fine, static images appear, but home.css does not works anywhere.

Update

  • I have switched in the base.html
  • from this <link rel="stylesheet" href="{% static 'css/home.css' %}">
  • to this <link href="css/home.css" rel="stylesheet" />
  • than I have also tried this: <link rel="stylesheet" type="text/css" href="{% static 'css/home.css' %}" />
  • It deletes a formatting on -s that was caused by another previously used .css that has been deleted since but the formatting sticked on. I have called this css property thickkk{color: red;} many places in both base.html and home.html and it still not working.
  • I have also get the following error message if I inspect the site with/F12/consol/ 127.0.0.1/:1 Refused to apply style from 'http://127.0.0.1:8000/css/home.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Update ERROR message

Refused to apply style from 'http://127.0.0.1:8000/stacic/css/home.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Properties: Python 3.7, Bootstrap 4

settings.py

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

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

base.html

  • I have created a base.html that hold the navbar and the footer.
  • This also has the CSS imported from a static css and also from bootstrap
  • It finds the static files because it imports the images that are appearing both here and in the home page
<!doctype html>
<html lang="en">
{% load static %}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="xz">
  <meta name="author" content="xz">
  <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
  <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
  <title>Click Helps - BE PART OF THE NEW CREATION</title>
  <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/carousel/">

  <!-- Bootstrap core CSS -->
  <link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="{% static 'css/home.css' %}">


</head>

....

<!-- Bootstrap core JavaScript ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<!-- I have placed in the followring 3 line from bootstrap to make JS work -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

home.html

  • I have used the center CSS property I have created
{% extends 'applicaonfolderofmine/templates/base.html' %}
{% load static %}

{% block content %}
<main>
<body>
  <div class="container">
    <h1 id="about" class="center" >About</h1>
...

home.css

  • it can be found in "django-project/certainapplication/static/css/home.css"
.center {
  margin: auto;
  width: 60%;
  padding: 10px;
}

Error messages in terminal

Not Found: /docs/4.3/dist/css/bootstrap.min.css
[22/Feb/2020 15:55:26] "GET /docs/4.3/dist/css/bootstrap.min.css HTTP/1.1" 404 2494
Not Found: /docs/4.3/dist/js/bootstrap.bundle.min.js
[22/Feb/2020 16:24:29] "GET /docs/4.3/dist/js/bootstrap.bundle.min.js HTTP/1.1" 404 2509
Not Found: /docs/4.3/dist/js/bootstrap.bundle.min.js
[22/Feb/2020 16:24:29] "GET /docs/4.3/dist/js/bootstrap.bundle.min.js HTTP/1.1" 404 2509

I have read the following articles but they haven't answered my question:

sogu
  • 2,738
  • 5
  • 31
  • 90
  • 3
    If I read your error messages correctly it is your bootstrap css and js which is not found, not your ```home.css```. The bootstrap files do no seem to be in you static folder. – Chris Feb 22 '20 at 17:16
  • 1
    ok so then the error message not aligns with the problem that is another one thx I will get the files or delete these lines. But how can I get the home.css working? – sogu Feb 22 '20 at 17:22
  • If the ```home.css``` is loaded correctly in your ```base.html``` it should be available in your templates extending the ```base.html``` by default. Have you checked in your console whether it is loaded correctly? If yes have you checked whether the styles of your ```center``` class are not overriden by some other css? – Chris Feb 22 '20 at 17:35
  • 1
    I have written that it finds the static files, so the folder because it can use the images from it. I haven't written that the home.css would work anywhere, so it does not works in the base.html, home.html not in any other files. – sogu Feb 22 '20 at 17:52
  • 1
    It is not a problem of overwriting because I have a normal ```thickkk {font-weight: bold;}``` that only should make text bold but it is also not working. I have also tried these css properties in a few other places and nothing have happened there as well. – sogu Feb 22 '20 at 17:54
  • 1
    My question was not whether you static folder is found but whether your stylesheet is found and loaded. Please check that. If home.css is in the place you claim and and your project structure is normal it should work. If all is really set up correctly you might try emptying your browser cache and reload the page. – Chris Feb 22 '20 at 18:15
  • 1
    I have switched in the base.html from this `````` to this `````` It deletes a formatting on ```

    ```-s that was caused by another previously used .css that hs been deleted since but the formatting sticked on. I have called this css property ```thickkk {font-weight: bold;}``` many places in both base.html and home.html and it still not working.

     – sogu Feb 22 '20 at 18:36

2 Answers2

2

As you have STATICFILES_DIRS remove STATIC_ROOT then type python manage.py collectstatic, then yes, then run your server again.

Ahmad
  • 1,618
  • 5
  • 24
  • 46
Masabo Simplice franck
  • 86
  • 2
  • I have done it. + saved the project but it made no difference. – sogu Feb 24 '20 at 17:03
  • Some difference I don't get the "Error messages in terminal" but my home.css file still does nothing. I have created a separate page where I only use that style sheet but still it modifies nothing. – sogu Feb 24 '20 at 17:07
  • @AragonS done that and as I said the CSS file still not works. I can only make CSS work A.)if I write it directly in to that HTML file, B.) Bootstrap. – sogu Feb 24 '20 at 20:01
1

The server should respond with the correct MIME Type for JSONP application/javascript and your request should tell jQuery you are loading JSONP dataType: 'jsonp'

Please see this answer for further details ! You can also have a look a this one as it explains why loading .js file with text/plain won't work. Disable Chrome strict MIME type checking

Masabo Simplice franck
  • 86
  • 2