Solution: A small change in your “main.css” file, add !important at the
end of color hash as:

.bg-steel {  
  background-color: #5f788a!important;  
}

=========================================================

Explanation:

You will have to understand the concept of overriding of CSS.
If a component is loading with “!important” in the parent CSS such as:

background-color: #5f788a!important;

instead of just:

background-color: #5f788a;

In such cases, you will not be able to override it in your custom/child CSS because !important declares it important and can’t be overridden directly.
However, you can still override it in the custom CSS by applying !important at the end of the value of the component just the way I did above.

====================================================

You may be confused about Why did it work in Corey’s CSS ?

Answer: The version of bootstrap Corey used in the tutorial was not rendering the background-color with the term !important at the end and hence he was able to override it directly. But nowadays, bootstrap color classes render with background-color: #5f788a!important; and hence can’t be overridden directly.

Hope I could help you out.

Thanks

[email protected]

Right now I’m fully suspecting something is wrong with your custom css.

First reason: bg-steel is not a default color, so you need to write it somewhere else. However, even with the line below, the navbar didn’t show up.

<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">

Second reason: for a division to have a border, header, and content with margins applied, you either use a default card class or you implement one on your own — found in this line, which also didn’t work.

<article class="media content-section">

Third reason: obvious enough, the background colors are different. In your code, it’s pure white, which is what bootstrap’s default comes with. If the custom sheet is applied, the background color will then look darker.

Here’s what I’ll suggest you do:

1. Go to your HTML or settings.py (if you used {% load static %}) file and check whether your static or import paths are correct
2. Go through the video one more time and make sure you have no typos.

As a matter of fact, the javascript files ARE necessary. If you don’t include them, things like dropdowns and modals won’t work properly.

So I’m going through Corey Schafer’s Django series, and I’m at the part where he is building the HTML template for the website and for some reason it isn’t formatting correctly. I downloaded his repository and re-ran his code and still got the same error? The only difference that I can think of is that he is using Django 2.1 and I’m using Django 3.0 but that shouldn’t be it.

Here is how it looks:

Here is how it should look:

And lastly this is his Github for the link: https://github.com/CoreyMSchafer/code_snippets/tree/master/Django_Blog/03-Templates

Edit: Got it working. You have to do four steps:

(1) Delete integrity and crossorigin from this line in the base.html (line 11)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

To get this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

(2) Update your static/blog/main.css with this code:

body {
  background: #fafafa;
  color: #333333;
  margin-top: 5rem;
}

h1, h2, h3, h4, h5, h6 {
  color: #444444;
}

ul {
  margin: 0;
}

.bg-steel {
  background-color: #5f788a;
}

.site-header .navbar-nav .nav-link {
  color: #cbd5db;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

.content-section {
  background: #ffffff;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

.article-title {
  color: #444444;
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

(3) Update your templates/blog/home.html with this code:

{% extends "blog/base.html" %}
{% block content %}
    {% for post in posts %}
        <article class="media content-section">
          <div class="media-body">
            <div class="article-metadata">
              <a class="mr-2" href="#">{{ post.author }}</a>
              <small class="text-muted">{{ post.date_posted }}</small>
            </div>
            <h2><a class="article-title" href="#">{{ post.title }}</a></h2>
            <p class="article-content">{{ post.content }}</p>
          </div>
        </article>
    {% endfor %}
{% endblock content %}

(4) Close your server, and clear your browser from everything (cookies included)