-1

Estou desenvolvendo meu primeiro site com o Django e me deparei com um problema: Ao executar a aplicação no browser, as alterações contidas no arquivo css não se aplicam ao site quando tento importar o css com o comando <link rel="stylesheet" href={% static'css/cabecalho.css/' %}/>.

Nessa etapa do projeto o site está assim:

inserir a descrição da imagem aqui

Meu arquivo HTML se chama cabecalho.html (templates/django/cabecalho.html) e é o seguinte:

<!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>

Esse arquivo contém a "{% load static %}" e importo o css na linha:

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

Entretanto o site continua com a configuração da figura acima e as alterações contidas no css não são "aplicadas".

Por outro lado, ao substituir essa linha pelo código contido no arquivo css as as mudanças desejadas ocorrem normalmente:

<!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>

Mudanças desejadas:

inserir a descrição da imagem aqui

Meu arquivo css se chama cabecalho.css (static/css/cabecalho.css) e é o seguinte:

  <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>

Demais informações:

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,
 )

Pastas:

inserir a descrição da imagem aqui

2 Respostas 2

0

Você não deu o espaço a frente do static <link rel="stylesheet" href={% static'css/cabecalho.css' %}/>

1
  • Iago, testei com o espaço mas não teve nenhuma alteração.
    – DeSanterra
    9/12/2020 às 17:15
-1

Verifica mudar STATIC_PATH = os.path.join(BASE_DIR, 'static') para STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') e exclui o STATICFILES_DIRS = (STATIC_PATH,)

Verifica também se a pasta static/css que contém o arquivo cabecalho.css está dentro da mesma pasta do app.

Caso não funcione, tenta copiar o cabecalho.css pra pasta seu_projeto/lib/site-packages/django/contrib/admin/static/css/

Coloque aspas duplas entre os colchetes: href="{% static 'css/cabecalho.css/' %}"/>

3
  • Carlos a alteração proposta na verdade fez com que o logo (Hacked) não fosse carregado.
    – DeSanterra
    9/12/2020 às 17:18
  • tem um detalhe que só vi agora <link rel="stylesheet" href={% static'css/cabecalho.css' %}/> está faltando aspas duplas " " entre os colchetes <link rel="stylesheet" href="{% static'css/cabecalho.css' %}"/> Eu não sei onde li que essa pergunta era de 4 anos atrás... tô ficando maluco 9/12/2020 às 18:02
  • Acontece kkk Fiz um teste com as aspas duplas e adicionando um espaço depois de static mas continua sem aplicar as mudanças.
    – DeSanterra
    14/12/2020 às 13:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .