Solution 1 :

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]

Solution 2 :

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.

Problem :

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:

Picture of wonky formatting

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)

Comments

Comment posted by crimsonpython24

I’m unclear on which image is it that you included, but I’ll strongly recommend you include both: one for how it should look like, and one for how it turns out to be.

Comment posted by Lemon.py

As crimson said, it would help to have a picture of what it’s supposed to look like.

Comment posted by Achuth Varghese

check if the custom css blog/main.css is being loaded properly in your terminal after the server has been run/re-run. You should see

Comment posted by Achuth Varghese

sorry, i meant

Comment posted by Al-Baraa El-Hag

@crimsonpython24 I added the picture of what it should be like

Comment posted by Al-Baraa El-Hag

I first wrote my own code, and ran into this problem. So I downloaded Corey’s code and ran it as is, and it also came up so I don’t believe it is a typo issue. An upvoted commented on youtube said this:

Comment posted by crimsonpython24

I don’t think that will be the problem: a direct translation will be “put your custom style behind the bootstrap ones”, which you already did. The next thing I’d like you to do for me is to check whether you get the css file successfully in your html document.

Comment posted by Al-Baraa El-Hag

I do, the link to

Comment posted by crimsonpython24

But one of the comments above read

Comment posted by Al-Baraa El-Hag

Oh wow, that was it! I cleared the cookies and reran Corey’s code again and it worked. If you edit your post to include that information, I will accept the answer. But my own code isn’t working right, so I’m going to have to compare it to Cody’s to find the problem. I will post an edit when I do because, at least on youtube, it seems I’m not the only one that has the problem.

By

Leave a Reply

Your email address will not be published. Required fields are marked *