Django templates with CSS file not working

Question

I am learning about templates for my project (I am creating a web app using the Django framework with HTML and CSS). However, I have hit a snag. I did try to link the CSS file to the base HTML file (which is the parent template that my other templates inherit from) and my CSS updates aren't reflecting on the home page to my browser.

Is there a problem with the link? The indentations are okay and there are no errors on my code. I have also tried to rerun my server and nothing. The "main.css" file is in the static subdirectory which is inside the blog directory and my app is called "Brenda's Blog".

The code in my base.html file is below, inclusive of the link linking the main.css file.

My CSS file: blog/static/main.css

{% load static %}
<!-- will load css file from static directory -->
<!DOCTYPE html> {% load static %}
<!-- will load css file from static directory -->
<!DOCTYPE html>
<html>

<head>

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' %}"> 
  {% if title %}<!-- django for loop for when the user clicks on to different pages -->
  <title>Brenda's Blog - {{ title }}</title>
  {% else %}
  <title>Brenda's Blog</title>
  {% endif %}
</head>

<body>
  <!-- added navigation bar with bootstrap css classes to decorate the website -->
  <header class="site-header">
    <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
      <div class="container">
        <a class="navbar-brand mr-4" href="/">Brenda's Blog</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
        <div class="collapse navbar-collapse" id="navbarToggle">
          <div class="navbar-nav mr-auto">
            <a class="nav-item nav-link" href="/">Home</a>
            <a class="nav-item nav-link" href="/about">About</a>
          </div>
          <!-- Navbar Right Side -->
          <div class="navbar-nav">
            <a class="nav-item nav-link" href="#">Login</a>
            <a class="nav-item nav-link" href="#">Register</a>
          </div>
        </div>
      </div>
    </nav>
  </header>
  <main role="main" class="container">
    <div class="row">
      <div class="col-md-8">
        {% block content %}{% endblock %}
      </div>
      <div class="col-md-4">
        <div class="content-section">
          <h3>Our Sidebar</h3>
          <p class='text-muted'>You can put any information here    you'd like >
            <ul class="list-group">
              <li class="list-group-item list-group-item-light">Latest Posts</li>
              <li class="list-group-item list-group-item-light">Announcements</li>
              <li class="list-group-item list-group-item-light">Calendars</li>
              <li class="list-group-item list-group-item-light">etc</li>
            </ul>
          </p>
        </div>
      </div>
    </div>
  </main>


  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

</body>

</html>

Ahsaan-566 · Accepted Answer · 2019-02-09 19:36:12Z

2

Welcome to Stackoverflow.

Make sure your settings.py file have the following configuration.

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_DIR = os.path.join(BASE_DIR,'static')
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    STATIC_DIR,
]

Then run,

python manage.py collectstatic

This command will collect static files from your all of your django applications into a single directory called staticfiles which will also benefit you when you will be deploying your project.

Then load staticfiles in the beginning of your template.

{% load staticfiles %}

Don't forget to clear cache of your browser, press ctrl+F5 to ignore the cached content when refreshing.

answered Feb 9, 2019 at 19:36

Ahsaan-566

6033 gold badges6 silver badges22 bronze badges

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

Comments

Rajan Sharma · Accepted Answer · 2019-02-09 21:06:19Z

0

First, clear your cache and hard refresh the browser. If it doesn't work then go for the following steps.

Check your settings.py file for correct configurations to access the static files. The code should look like this in the settings.py file.

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

Then your project structure should be like app > static > app name(folder name same as app name) > main.css

So if your app name is blog. Then the structure should be like blog > static > blog > main.css

After doing the changes hard refresh your browser, clear cache, go to Network tab ( clicking inspect element) and check whether you are getting CSS file on request and all the changes are getting reflected.

edited Feb 9, 2019 at 21:06

answered Feb 9, 2019 at 20:37

Rajan Sharma

2,2855 gold badges24 silver badges34 bronze badges

Comments

Klaassiek · Accepted Answer · 2021-05-09 07:07:24Z

0

You should replace

{% load static %}
<!-- will load css file from static directory -->
<!DOCTYPE html> {% load static %}
<!-- will load css file from static directory -->
<!DOCTYPE html>

with

{% load static %}
<!DOCTYPE html>

edited May 9, 2021 at 7:07

Klaassiek

2,8831 gold badge26 silver badges44 bronze badges

answered May 7, 2021 at 19:08

pavan sai

56 bronze badges

Collectives™ on Stack Overflow

Django templates with CSS file not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related