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:
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:
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:
Carlos the proposed change actually caused the logo (Hacked) not to be loaded.
– DeSanterra
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
– Carlos Cortez
It happens kkk I made a test with double quotes and adding a space after Static but still not applying the changes.
– DeSanterra