Django: Css not imported

Asked

Viewed 157 times

0

I am developing my first site with Django and I came across a problem: While running the browser application, as changes contained in the css file do not apply to the website when I try to import css with the <link rel="stylesheet" href={% Static'css/cabecalho.css command/' %}/>.

At this stage of the project the site is like this:

inserir a descrição da imagem aqui

My HTML file is called cabecalho.html (templates/Django/cabecalho.html) and is the following:

<!DOCTYPE html>
{% load static %} <!-- Nova linha que carrega os arquivos estáticos -->
<html>
  <head>
    <title>Django Form Exemplo</title>
         <link rel="stylesheet" href={% static'css/cabecalho.css' %}/>
    </head>

    <body>
     <div class='logo'>
     <img src="{% static "images/logo.png" %}" alt="Logo da Hacked" />
     </div>

     <div class='menu'>
       <a href="/app/sobre/">Sobre</a>
       <a href="/app/sair/">Sair</a>
     </div>

     <div class='bemvindo'>
       <h2>Bem vindo ao nosso Site Django Exemplo!</h2>
     </div>

    </body>

   </html>

This file contains the "{% load Static %}" and import css in line:

<link rel="stylesheet" href={% Static'css/cabecalho.css' %}/>

However the site continues with the above figure configuration and the changes contained in the css are not "applied".

On the other hand, when replacing this line with the code contained in the css file the desired changes occur normally:

<!DOCTYPE html>

{% load static %} <!-- Nova linha que carrega os arquivos estáticos -->

<html>

  <head>
    <title>Django Form Exemplo</title>
           <style>
           body {
            font-family: Segoe UI;
           }
           .logo {
            float: left;
           }
           .logo img {
            width: 250px;
            padding: 20px;
           }
           .menu {
            float: right;
            padding: 40px;
            font-size: 15pt;
           }
           .menu a {
            margin-left: 15px;
            margin-right: 15px;
           }
           .bemvindo {
            clear: both;
            padding: 0 20px;
           }

           </style>
</head>

<body>
 <div class='logo'>
   <img src="{% static "images/logo.png" %}" alt="Logo da Hacked" />
 </div>

 <div class='menu'>
   <a href="/app/sobre/">Sobre</a>
   <a href="/app/sair/">Sair</a>
 </div>

 <div class='bemvindo'>
   <h2>Bem vindo ao nosso Site Django Exemplo!</h2>
 </div>

</body>

</html>

Desired changes:

inserir a descrição da imagem aqui

My css file is called cabecalho.css (Static/css/cabecalho.css) and is the following:

  <style>
           body {
            font-family: Segoe UI;
           }
           .logo {
            float: left;
           }
           .logo img {
            width: 250px;
            padding: 20px;
           }
           .menu {
            float: right;
            padding: 40px;
            font-size: 15pt;
           }
           .menu a {
            margin-left: 15px;
            margin-right: 15px;
           }
           .bemvindo {
            clear: both;
            padding: 0 20px;
           }

           </style>

Other information:

views.py (app/views.py):

from django.shortcuts import render
from django.http import HttpResponse


def index(request):


    
    return render(request, 'django/cabecalho.html')

Settings.py (project/Settings.py):

 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/3.1/howto/static-files/

 STATIC_PATH = os.path.join(BASE_DIR, 'static')  # concatena a pasta static a variavel instanciada 
 base_dir que aponta para a raiz do projeto

 STATIC_URL = '/static/' # chamada que terá no browswer para a pasta de arquivos estaticos

 STATICFILES_DIRS = (
            STATIC_PATH,
 )

Folders:

inserir a descrição da imagem aqui

python-3.x django web-application django-templates

2 answers

0

Checks to change STATIC_PATH = os.path.Join(BASE_DIR, 'Static') for STATIC_ROOT = os.path.Join(BASE_DIR, 'staticfiles') and excludes the STATICFILES_DIRS = (STATIC_PATH,)

Also checks if the Static/css folder containing the file cabecalho.css is within the same app folder.

If it doesn’t work, try copying the.css header to your project/lib/site-Packages/Django/contrib/admin/Static/css folder/

Place double quotes between brackets: href="{% Static 'css/cabecalho.css/' %}"/>

  • Carlos the proposed change actually caused the logo (Hacked) not to be loaded.

  • There’s a detail I just saw <link rel="stylesheet" href={% Static'css/cabecalho.css' %}/> is missing double quotes " " between brackets <link rel="stylesheet" href="{% Static'css/cabecalho.css' %}"/> I don’t know where I read this question was from 4 years ago... I’m going crazy

  • It happens kkk I made a test with double quotes and adding a space after Static but still not applying the changes.

0

You didn’t give the space in front of Static <link rel="stylesheet" href={% static'css/cabecalho.css' %}/>

  • Iago, I tested with space but there was no change.

Browser other questions tagged python-3.x django web-application django-templates

You are not signed in. Login or sign up in order to post.