css styles not showing on index.html file, however, they are showing on base.html

cozanostra7 · November 18, 2024, 11:45am

I can add and edit css styles on base.html file.
I have another file index.html, which extends from ‘base.html’ using django.

However, i dont know why the css code doesnt work for index.html.

the base.htm file

type or paste code here

{% load static %}
{% load blog_tags %}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
            <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>

    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{% static 'blog/css/style.css' %}">
    <title>
        {% block title %}

        {% endblock title %}
    </title>
</head>
<body>

<nav class="navbar navbar-expand-lg " style="background-color:#5e8fc1">
  <div class="container-fluid">
    <a class="navbar-brand" href="{% url 'homescreen' %}">Main</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Переключатель навигации">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="{% url 'homescreen' %}">Главная</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Ссылка</a>
        </li>
      </ul>
              <ul class="navbar-nav mb-2 mb-lg-0">
                  <li class="nav-item">
                      <form class="d-flex" role="search">
                        <input class="form-control me-2" type="search" placeholder="Поиск" aria-label="Поиск">
                        <button class="btn btn-outline-success" type="submit">Поиск</button>
                        </form>

                  </li>
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Sign in</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Sign up</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Hello, User
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">My Account</a></li>
            <li><a class="dropdown-item" href="#"> Blog</a></li>
              <li><a class="dropdown-item" href="{% url 'add-article' %}">Write an article</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Sign out</a></li>
          </ul>
        </li>
      </ul>

    </div>
  </div>
</nav>


<br>


<div class="row" >
    <div class="col-lg-4" >
   <a href="{% url 'blogs' %}" class="text-dark m-2"> <i class="fas fa-flask"></i> Blog </a>
    {% get_categories as categories %}
    {% for category in categories %}
    <a href="{% url 'category-view' category.pk %}" class="text-dark m-2"> <i class="fas fa-flask"></i> {{ category.title }} </a>
    {% endfor %}
     </div>
</div>


{% block main %}

{% endblock main %}




<script src="{% static 'blog/js/snow.js' %}"> </script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

The index.html file

{% extends 'base.html' %}
{% load static %}
{% load blog_tags %}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel='stylesheet' href="{% static 'blog/css/style.css' %}">
{% block title %}
{{ main_page }}
{% endblock title %}



{% block main %}


<div class="hero-section" style="background-image: url(https://cdn.trend.az/2024/09/09/air-products.png);
height:750px;
background-repeat:no-repeat;
background-size:cover;
"
>
    <div class="row">
        <div class="col-6">
        <h1 style="margin-top:150px" ><strong>Industrial Gas Supplier</strong></h1>
            </div>
    </div>
</div>

<br>
<br>

<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active"   >
      <img src="https://www.newscentralasia.net/wp-content/uploads/2023/09/air-products-co.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://www.gasworld.com/cdn-cgi/image/width=1200,height=900,fit=contain,quality=75,metadata=none,format=auto,gravity=auto/https://www.gasworld.com/wp-content/files/gwml/actros2545airproducts21_185696.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

<!--<div class="container">-->
<!--    {% for article in articles %}-->

<!--    <div class="card mt-4 mb-4">-->
<!--        <div class="d-flex justify-content-center">-->
<!--            <div class="col-3">-->
<!--                <a href="{% url 'article-view' article.pk %}">-->
<!--                <img height="200px" src="https://media.istockphoto.com/id/1354826805/vector/data-science.jpg?s=612x612&w=0&k=20&c=FKYxpsaWX7H5_DEX4t0dV2o837_aqgoavlIRdIz1jwE=" alt="">-->
<!--                </a>-->
<!--            </div>-->
<!--            <div class="col-9 p-4">-->
<!--                <a href="{% url 'article-view' article.pk %}" class="text-dark"><h3> {{ article.title }} </h3></a>-->
<!--                <p>{{ article.description }}</p>-->
<!--                <span class="small">{{ article.created_at }}</span>-->
<!--                <p> {{ article.category }} </p>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->

<!--    {% endfor %}-->


<!--</div>-->

{% endblock main %}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

the style.css file

.ball {
  position: absolute;
  border-radius: 100%;
  opacity: 0.7;
}

#carouselExample {
    height: 300px;
    width: 300px;
}

The applied style and js code on base.html are working great. But they dont work for index.html

I uploaded all the routes, wrote the code in settings.py correctly. But still now working for index.html

KenWhitesell · November 18, 2024, 12:35pm

Welcome @cozanostra7 !

Your two <link elements at the beginning and the <script element at the end aren’t inside blocks.

When you are extending a base template, everything you render within the child template must be in a block - otherwise, the template engine doesn’t have a place to put it in the page being rendered.

See the docs on Template inheritance for more details about this.

philgyford · November 18, 2024, 1:45pm

But the CSS and JS files in index.html are also in base.html, outside blocks.

So you should be able to remove them from index.html. But, also, it should be working, and I’m not sure why it isn’t.

Can you see a request for the style.css file in the logs when you load the page in the browser?

stuartmaxwell · November 19, 2024, 3:54am

This should be working, even though you’ve made some mistakes. For starters, in your index.html file, remove the link tags and the script tags - these are not doing anything because they are not inside blocks, and you’ve already included them in your base.html file anyway. Then open your developer tools, go to the network tab and reload the view that uses the index.html file. You should see requests for the CSS and the JavaScript files.

If not, then you need to do more troubleshooting. I assume you’re running locally, so make sure you’ve got DEBUG set to True, and I also recommend installing and configuring django-debug-toolbar as that will give you lots of info about what’s going on with your templates.

Is it possible that you’re inheriting the wrong base.html? Do you have multiple templates called base.html?

cozanostra7 · November 20, 2024, 10:47am

hello.
Its says Not Found: /…

But any change made in base.html for CSS is working well

cozanostra7 · November 20, 2024, 10:49am

well, changes in base.html are working well, I can modify styles by changing the CSS file

philgyford · November 20, 2024, 5:41pm

Its says Not Found: /…

What does? If there is more of the error message, please show it in full and describe where it comes from (your browser (if so, for what URL)? your logs? your browser’s Network tab?).

When you say the CSS “doesn’t work for index.html” can you describe what you mean in a lot more detail? What are you changing, in what file?

cozanostra7 · November 27, 2024, 7:08am

Hi dear!

May i share the developer tool with ypu?
Here is the screenshot:

a

Please kindly check it

stuartmaxwell · November 27, 2024, 7:11am

Do you really have a directory in your project called: “static/blog/css”?

cozanostra7 · November 27, 2024, 7:17am

here it is:

f

this folder is in “portfolio” project folder, not in the app folder

stuartmaxwell · November 27, 2024, 7:24am

And do you have your static files properly configured in settings.py. Should look something like this:

# The path that the static files will be served from
STATIC_URL = "/static/"
# The directory that collectstatic will collect static files to
STATIC_ROOT = BASE_DIR / "staticfiles"
# The directory that static files will be collected from
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

cozanostra7 · November 27, 2024, 7:28am

urls

urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

settigns

STATIC_URL = 'static/'
STATIC_ROOT = BASE_DIR / 'static'



MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

and i did collectstatic … still no help

cozanostra7 · November 27, 2024, 7:45am

moreover, newly written codes are not shown on developer tools:

stuartmaxwell · November 27, 2024, 7:56am

OK, for starters - you shouldn’t have STATIC_ROOT set to BASE_DIR / 'static'. This will confuse Django when you run the collectstatic command. Running collectstatic will look for directories called static and copy them into the STATIC_ROOT directory. So in your case, you’re telling Django to copy files to the same location that your files are already in. You probably have seen warnings when doing this. The fix is set STATIC_ROOT to a different value, e.g. STATIC_ROOT = BASE_DIR / "staticfiles" (really that can be anything, but staticfiles is a common value used in lots of tutorials.)

I recommend fixing that first.

Also, I mis-read your earlier screenshot. Your static files are being served correctly as can be seen in your last screenshot. So what you are saying is that you are modifying the style.css file but the changes aren’t being reflected when you reload the sever? That might be caused by the first issue, or it might just be a browser caching issue.

The last thing I’ll mention is that the way you have configured your urlpatterns is OK for development, but not for production. The easiest thing to do will be to install and configure Whitenoise if you want Django to serve both your Python code and your static files. Using WhiteNoise with Django - WhiteNoise 6.8.2 documentation (you need to do step 1 and 2 at a minimum to get it working)

cozanostra7 · November 27, 2024, 10:03am

I did so… still not working.

I even tried to apply jQuery - not applying the CSS styles

stuartmaxwell · November 27, 2024, 10:15am

It’s difficult to understand exactly what the issue is or what you have fixed. I’m also not sure why jQuery is now in the mix? Are your styles not being applied or are they not even making it into the styles.css file?

cozanostra7 · November 27, 2024, 10:18am

well, whatever i wrote on style.css file, it is not reflected on pages

cozanostra7 · November 27, 2024, 11:26am

well now it says another issue. Here it is …
I think the problem was before , just it didn’t show up

stuartmaxwell · November 27, 2024, 7:15pm

This is a different issue than before and you need to read this page to solve it: How to manage static files (e.g. images, JavaScript, CSS) | Django documentation | Django

Topic		Replies	Views
Some CSS Styles Not Loading, Others Fine Templates & Frontend	8	9584	April 2, 2024
Styling base.html with css Using Django	0	1641	July 9, 2020
{% load static%} does not work for extended Django html files Templates & Frontend	9	6728	August 24, 2024
base.html logo shows on index but not on any other Templates & Frontend	2	237	November 7, 2023
Javascript file make css not to work in django Using Django	8	4692	December 29, 2021

css styles not showing on index.html file, however, they are showing on base.html

Related topics