CODEWITHSUNDEEP
htmlcssdjangodjango-templates
NodeReact020
NodeReact020

Reputation: 506

Django - CSS file not linking with template correctly

In my project, I attempt to link my html template to a CSS file that I have in my static folder. I have added STATIC_ROOT, STATIC_URL and STATICFILES_DIRS to my settings.py.

In my static folder, I have a folder called styles, and within that, I have a file named signup.css . I have also ran python manage.py collectstatic.

In my template I attempt to reference that CSS file to change the colour of my h1, however no change occurs.

Template:

{% load static %}
    <head>
        <link rel="stylesheet" href="{% static 'styles/signup.css' %}">
    </head>
    <h1>YO</h1>
    <div id="signupformdiv">
        <form class="signupform" action="{% url 'signup' %}">

        </form>
    </div>

signup.css:

h1 {
    color: red;
}

The colour of my h1 remains black. Does anybody know the issue? Thank you.

Source Code:

<!doctype html>
<html lang="en">


<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Instagram</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <link href="/static/custom.css" rel="stylesheet">
  <link rel="shortcut icon" type="image/png" href="/static/favicon.ico" />
</head>

<body>
  <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 bg-white border-bottom shadow-sm">
    <h5 class="my-0 mr-md-auto font-weight-normal"><a class="text-dark">Instagram</a></h5>
    <nav class="my-2 my-md-0 mr-md-3">
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



    <head>
        <link rel="stylesheet" href="/static/styles/signup.css">
    </head>
    <h1>YO</h1>
    <div id="signupformdiv">
        <form class="signupform" action="/users/signup/">

        </form>
    </div>


</body>

</html>

ERROR in browser: Failed to load resource: the server responded with a status of 404 (Not Found)

settings.py:

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

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

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

Project Structure: instagram-project is root, subfolder called instagram, and within I have a folder named 'static'

Inside root directory, I have a static folder, where all static files are sent to.

Inside users app, I have a folder called templates, where my template is stored.

** BASE.HTML **

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Instagram</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">  <link rel="stylesheet" href="{% static 'styles/signup.css' %}">

  <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />

</head>

Upvotes: 0

Views: 2081

Answers (1)

Ahmed I. Elsayed
Ahmed I. Elsayed

Reputation: 2110

The problem is that the server can't find the your static files not because they don't exist, but because there's no urlpattern for them, more info 

# project urls.py
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = []
if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

This should solve it

Upvotes: 2

Related Questions