CODEWITHSUNDEEP
htmlcssdjango
Bree Sabana
Bree Sabana

Reputation: 11

Django templates with CSS file not working

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>

Upvotes: 1

Views: 3633

Answers (3)

pavan sai
pavan sai

Reputation: 5

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>

Upvotes: 0

Rajan Sharma
Rajan Sharma

Reputation: 2281

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.

Upvotes: 0

Ahsaan-566
Ahsaan-566

Reputation: 603

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.

Upvotes: 2

Related Questions