None of my static css files connect to html. However, all static pictures work correctly.
settings.py
DEBUG = True
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'main'
]
import os
STATIC_DIR = os.path.join(BASE_DIR,"static")
STATIC_URL = '/static/'
STATICFILES_DIRS = [
STATIC_DIR,
]
base.html (parent)
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="{% static 'img/favico.png' %}">
<title>{% block title %}{% endblock %}</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel = 'stylesheet' href = "{% static 'css/main.css' %}">
</head>
<body>
<div >
<font style="font-size: 20px; opacity: 0.9; font-weight: lighter;">
<a href="{% url 'home' %}" >
<img width="25px" height="30px" src="{% static 'main/img/favico5.png' %}">
<span style="padding: 5px"><font style="font-family: Arial">Teach me</font></span>
</href>
</font>
<nav >
<a href="{% url 'home' %}"><font style="padding-right: 10px;">Главная</font></a>
<a href="{% url 'tutors' %}"><font style="padding-right: 10px;">Репетиторы</font></a>
<a href="{% url 'articles' %}"><font style="padding-right: 21px;">Статьи</font></a>
<a href="{% url 'login' %}"><font style="background-color:#FFEFDF; border: 10px solid #FFEFDF; color: black; border-radius: 10px; border-width: 3px 20px 7px 20px; box-shadow: 1px 3px 1px #A9A9A9;">Войти</font></a>
</nav>
</div>
{% block content %}{% endblock %}
</body>
</html>
index.html
{% extends 'main/base.html' %}
{% load static %}
<head>
{% block title %}
{{title}}
{% endblock %}
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
{% block content %}
<main>
<h1>GHBDTN</h1>
<body>
<div >
<header >
<img src="{% static "main/img/main8.jpg" %}" alt="main pic">
<p>Предоставим качественное образование, <br>
поможем понять школьную программу, <br>
улучшить оценки и <br>
подготовиться к экзаменам</p>
</header>
</div>
</body>
</main>
{% endblock %}
style.css (relate to index.html)
.grid-wrapper {
display: grid;
grid-template-columns: 1 fr;
grid-template-rows: 1 fr;
grid-template-areas: 'header header';
}
.circles {
display: block;
margin-left: auto;
margin-right: auto;
}
header {
position: relative;
width: 100%;
}
p {
color: red;
text-align: center;
position: absolute;
width: 100%;
text-align: center;
top: 0;
}
main.css (relate to base.html)
nav {
font-family: Montserrat;
font-size: 20px;
}
nav a:hover {
color: red;
transition: all .6s ease;
transform: scale(1.10);
}
I have changed BASE_DIR to documentation one, but it is changed nothing. All html are displayed. I created html-file with css without django is work correctly
Structure of my project looks like:
/project
//taskmanager
///main
////static
/////css
//////main.css and style.css
////templates
/////main
//////base.html
//////index.html
CodePudding user response:
Do like this
base.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<!--- Add all your meta tags css files --->
<title>{% block title %}{% endblock %}</title>
{% block extra_head_links %}
{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
inside your index.html
{% extends 'main/base.html' %}
{% load static %}
{% block title %}
{{title}}
{% endblock %}
{% block extra_head_links %}
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
{% endblock %}
{% block content %}
<main>
<h1>GHBDTN</h1>
<body>
<div >
<header >
<img src="{% static "main/img/main8.jpg" %}" alt="main pic">
<p>Предоставим качественное образование, <br>
поможем понять школьную программу, <br>
улучшить оценки и <br>
подготовиться к экзаменам</p>
</header>
</div>
</body>
</main>
{% endblock %}
above code will extend all you css from base.html and it will add extra css link on index.html