django cannot read css file in static folder

Question

I am trying to make a base.html template and inserting a css file in the header. in the page it includes all the styling by it does not do any styling when the link the other page is pressed.

I have two files extending base.html one color_choose.html the other statistics.html which have the exact same lines for linking files. color_choose.html works and it is the first page that opens when navigated and the other is statistics.html

here is the base.html:

    <!DOCTYPE html>
    <html lang="eng">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <title>ColorStore</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        {% block styles %} {%endblock%}
      </head>
      <body>
         <div id="ColorFavor">
           <div style="float: right;">
             <h2 id="title" class="page-name">Color Picker</h2>
           </div>
         </div>
         {% block navigation %}
         {% endblock %}

         {% block display %}
         {% endblock %}

         {% block modal %}
         {% endblock %}

         {% block scripts %}
         {% endblock %}
       </body>
    </html>

here is the urls.py in the app file:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.ColorPageView.as_view(), name='color'),
    path('statistics/',views.StatsPageView.as_view(), name='statistics'),

this is the file css is applied and is also the same text in the other file:

{% extends 'base.html' %}

{% block styles %}
<link rel="stylesheet" href="static/styles/main.css" type="text/css">
{% endblock %}

And this is the part in the settings.py:

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

If I am missing anything I will edit this post as soon as possible, just leave a comment for it.

By 'django cannot read' do you mean that the browser is 404ing when it tries to fetch the stylesheet? It can also be helpful to use django's static template tag docs.djangoproject.com/en/1.11/howto/static-files/… — kevswanberg
– kevswanberg, Commented Dec 11, 2017 at 22:50

schrodingerscatcuriosity · Accepted Answer · 2017-12-11 23:08:46Z

1

You are missing a slash '/' before 'static/...'

<link rel="stylesheet" href="/static/styles/main.css" type="text/css">

answered Dec 11, 2017 at 23:08

schrodingerscatcuriosity

1,8701 gold badge20 silver badges32 bronze badges

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

Comments

Jim Culbert · Accepted Answer · 2017-12-11 23:06:51Z

0

Your template should have {% load static %} and you should refer to the stylesheet either as /static/styles/main.css or (preferably) you should use the macro "{% static styles/main.css %}"

See the django doc here.

answered Dec 11, 2017 at 23:06

Jim Culbert

212 bronze badges

Collectives™ on Stack Overflow

django cannot read css file in static folder

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related