I'm quite new to Django and I have a problem that I cannot solve for a long time already. Would appreciate any hint!
The question is why does it find static files for base.html and cannot find it for login.html(they are even in the same directory)? Everything works fine, django manages to find template "index.html", which extends "base.html" and shows it with a nice bootstrap example. However, when I click login, and go to accounts/login (I use django-allauth), I get the error:
"GET /accounts/login/static/twitter_bootstrap/dist/css/bootstrap.css HTTP/1.1" 404 7044
"GET /accounts/login/static/twitter_bootstrap/dist/js/bootstrap.js HTTP/1.1" 404 7038
Thus, it doesn't load bootstrap and js.. I tried so many workarounds, debug shows that it points to correct path.. The processes of login/logout/etc. work fine.
What I want to do is to define in base.html that I want to use bootstrap files, and then simply extend this behavior to other templates as well. Can someone help, please?
My static files live in the project folder under static name.
-Project Dir
-static
-static
-twitter_bootstrap
-static-only
-media
-templates
-account
-base.html
-login.html
-signups(app name)
-index.html
settings.py
BASE_DIR = os.path.dirname(__file__)
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static", "static-only")
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static", "media")
STATICFILES_DIRS = (
os.path.join(os.path.dirname(BASE_DIR), "static", "static"),
)
TEMPLATE_DIRS = (
os.path.join(os.path.dirname(BASE_DIR), "static", "templates"),
)
Base.html:
{% load url from future %}
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
{% block headbootstrap %}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Basic css -->
<link href="static/twitter_bootstrap/dist/css/bootstrap.css" rel="stylesheet">
{% endblock %}
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
</head>
<body>
{% block header %}
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- Mobile Nav Button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- END Mobile Nav Button -->
<a class="navbar-brand" href="#">HumanPulse</a>
</div>
<!-- Navigation Links -->
<div class="collapse navbar-collapse">
{% if request.user.is_authenticated %}
<!—Show Home and News -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>News</li>
</ul>
{%else%}
<!—Show Dashboard and Data -->
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li>Data</li>
</ul>
{% endif %}
<!-- END Navigation Links -->
<form class="navbar-form navbar-right" role="form" method="post" action="{% url 'account_login' %}">
{% csrf_token %}
{{ form.non_field_errors }}
{% if request.user.is_authenticated %}
<a class="btn btn-success" type="submit" href="/accounts/logout/" >Logout</a>
{% if request.user.first_name or request.user.last_name %}
{{ request.user.first_name }} {{ request.user.last_name }}
{% else %}
{{ request.user.username }}
{% endif %}
{% if request.user.profile.account_verified %} (verified) {% else %} (unverified) {% endif %}
{% else %}
<a class="btn btn-success" type="submit" href="/accounts/login/" >Login</a>
{% endif %}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
</form>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
{% endblock %}
{% block body %}
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
<div class="container">
{% block content %}
{% endblock %}
</div> <!-- /container -->
{% endblock %}
{% block extra_body %}
{% endblock %}
{% block footer %}
<footer>
<p>© Blog 2013</p>
</footer>
{% endblock %}
<script src="static/twitter_bootstrap/dist/js/bootstrap.js"></script>
index.html
{% extends 'account/base.html' %}
{% block head_title %}ProjectName{% endblock %}
{% block content %}
<p>Voila!</p>
{% endblock %}
login.html
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block content %}
<div class="fb"></div>
{% include "socialaccount/snippets/login_extra.html" %}
<div class="inset">
<div class="header">Or sign in directly</div>
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{{ form.non_field_errors }}
<input id="id_login" class="login-input" maxlength="30" name="login" placeholder="Username" type="text" />{{ form.login.errors }}<br>
<input id="id_password" class="login-input" name="password" placeholder="Password" type="password" />{{ form.password.errors }}<br>
<div class="remember-forgot-section">
<input id="id_remember" name="remember" type="checkbox" />
<label for="id_remember">Remember Me</label>
<a class="forgot" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
</div>
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<button class="btn" type="submit">{% trans "Sign In" %}</button>
</form>
<div class="footnote">
Don't have an account? Login with Facebook above or Sign Up
</div>
</div>
{% endblock %}
Related
Iam New To Django : i Made a Simple Website Following Python Crash Course Book , iam getting this Error and i can't find The Problem ,
Here is the error:
Here is the login.html :
{% extends "learning_logs/base.html" %} {% load bootstrap4 %} {% block
page_header %}
<h2>Log in to your account</h2>
{% endblock page_header %} {% block content %}
<form method="post" action="{% url 'users:login' %}" class="form">
{% csrf_token %} {% bootstrap_form form %} {% buttons %}
<button name="submit" class="btn btn-primary">Log in</button>
{% endbuttons %}
<button name="submit">Log in</button>
<input type="hidden" name="next" value="{% url 'learning_logs:index' %}" />
</form>
{% endblock content %}
And here is base.html that login extends:
{% load bootstrap4 %}
<!DOCTYPE html>
<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" />
<title>Learning Log</title>
{% bootstrap_css %} {% bootstrap_javascript jquery='full' %}
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border">
<a class="navbar-brand" tag="a" href="{% url 'learning_logs:index' %}">
Learning Log</a
>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarCollapse"
aria-controls="navbarCollapse"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'learning_logs:topics' %}"
>Topics</a
>
</li>
</ul>
<ul class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<span class="navbar-texxt">Hello,{{user.username}}</span>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'users:logout' %}">Log out</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'users:register'%}">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'users:login'%}">Log in</a>
</li>
{% endif %}
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="pb-2 mb-2 border-bottom">
{% block page_header %} {% endblock page_header %}
</div>
<div>{% block content %} {% endblock content %}</div>
</main>
</body>
</html>
i tried looking for any syntax writing like answered questions here did like leaving epty space between { and % but i couldn't find anything helpful ,
Try to remove the line break in the end of line 1.
I mean, you should replace
{% extends "learning_logs/base.html "%} {% load bootstrap4 %} {% block
page_header %}
with
{% extends "learning_logs/base.html "%} {% load bootstrap4 %} {% block page_header %}
Replace
{% endblock page_header %}
To
{% endblock %}
And apply this to your other end blocks
it was a Problem with Preetier Code Formatter Every time i save the could would Go wrong , So i Changed To Default Html Formatter, Hope this helps Someone in the Future as it's quite hidden
I have customized the login template of allauth with bootstrap styles and widget_tweaks. When I try logging in with that template, It doesn't redirect me to the home page but remains in the same login.html template. However, when I log in with the original template from allauth in /account/login.html/ everything works well and it redirects me to my homepage. There is something that I'm not customizing right in my custom login.html template.
Below is django-allauth login.html and my custom login.html
django-allauth login.html
{% extends "account/base.html" %}
{% load i18n %}
{% load account socialaccount %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block content %}
<h1>{% trans "Sign In" %}</h1>
{% get_providers as socialaccount_providers %}
{% if socialaccount_providers %}
<p>{% blocktrans with site.name as site_name %}Please sign in with one
of your existing third party accounts. Or, sign up
for a {{ site_name }} account and sign in below:{% endblocktrans %}</p>
<div class="socialaccount_ballot">
<ul class="socialaccount_providers">
{% include "socialaccount/snippets/provider_list.html" with process="login" %}
</ul>
<div class="login-or">{% trans 'or' %}</div>
</div>
{% include "socialaccount/snippets/login_extra.html" %}
{% else %}
<p>{% blocktrans %}If you have not created an account yet, then please
sign up first.{% endblocktrans %}</p>
{% endif %}
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{{ form.as_p }}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
<button class="primaryAction" type="submit">{% trans "Sign In" %}</button>
</form>
{% endblock %}
my custom login.html
{% comment %}
{% extends "layouts/base-fullscreen.html" %}
{% load i18n %}
{% block title %} Login {% endblock %}
{% load widget_tweaks %}
{% block content %}
<div class="auth-wrapper">
<div class="auth-content">
<div class="auth-bg">
<span class="r"></span>
<span class="r s"></span>
<span class="r s"></span>
<span class="r"></span>
</div>
<div class="card">
<div class="card-body text-center">
<div class="mb-4">
<i class="feather icon-unlock auth-icon"></i>
</div>
<h3 class="mb-4">Login</h3>
<span class="mb-0 text-muted">
{% if msg %}
{{ msg | safe }}
{% else %}
Add your credentials
{% endif %}
</span>
<br />
<br />
<form method="post" action="{% url 'account_login' %}">
{% csrf_token %}
<div class="md-form mb-2">
{% render_field form.login class="form-control" placeholder=form.login.label %}
</div>
<span class="text-error">{{ form.login.errors }}</span>
<div class="md-form mb-2">
{% render_field form.password class="form-control" placeholder=form.password.label %}
</div>
<span class="text-error">{{ form.password.errors }}</span>
<p class="mb-0 text-muted"><a class="button secondaryAction" href="{% url 'account_reset_password' %}">Forgot password?</a>
</p>
<div class="form-group text-left">
<div class="checkbox checkbox-fill d-inline">
<!-- <input type="checkbox" name="checkbox-fill-1" id="checkbox-fill-a1" checked=""> -->
{% render_field form.remember class="form-control" placeholder=form.remember.label type="checkbox"%}
<label for="id_remember" class="cr"> Remember me</label>
</div>
</div>
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<button type="submit" name="login" class="btn btn-primary shadow-2 mb-4">Login</button>
</form>
<p class="mb-0 text-muted">Don’t have an account? <a href="{% url 'account_signup' %}" >Signup</a></p>
<br />
</div>
</div>
</div>
</div>
{% endblock content %}
allauth settings in settings.py
LOGIN_REDIRECT_URL = '/'
EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
SITE_ID = 1
ACCOUNT_LOGOUT_REDIRECT_URL = '/' #couterpart to Django's LOGIN_REDIRECT_URL
ACCOUNT_LOGOUT_REDIRECT = '/'
ACCOUNT_USERNAME_REQUIRED = False
ACCOUNT_AUTHENTICATION_METHOD = 'email'
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_UNIQUE_EMAIL = True
ACCOUNT_EMAIL_VERIFICATION = 'optional'
The other change I've made is to customize the allauth signup form to take extra two fields (first_name and last_name). That one works fine and redirects to the login url
you might be getting an error from the form validator. keep the original form on the page to check if its giving any errors. copy the {{ form.as_p }} from the original page 'accounts/login.html' and paste it in your custom template. if there are any errors, it'll display it.
this right here is your problem
{% extends "account/base.html" %}
If you have all the boostrap, jquery and widget_tweaks in your local base.html, then thats what you need to extend. The default accounts/base.html provided by django-allauth, does not come customized with bootstrap.
Use:
{% extends "base.html" %} instead
It was working before I deleted and recreated my database, I have no idea why it's no longer working, I've ensured that show in menus is checked under the promote panel.
base.html
{% load static wagtailuserbar %}
{% load wagtailcore_tags %}
{% load menu_tags %}
<!DOCTYPE html>
<html class="no-js" lang="en" content="text/html">
<head>
<meta charset="utf-8" />
<title>
{% block title %}
{% if self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}
{% endblock %}
{% block title_suffix %}
{% with self.get_site.site_name as site_name %}
{% if site_name %}- {{ site_name }}{% endif %}
{% endwith %}
{% endblock %}
</title>
<meta name="description" content="text/html" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{% block extra_css %}
{# Override this in templates to add extra stylesheets #}
{% endblock %}
{% load static wagtailsettings_tags %}
{% get_settings %}
</head>
<body class="{% block body_class %}{% endblock %}">
{% main_menu max_levels=2 add_sub_menus_inline=True %}
</body>
</html>
templates/menus/main/menu.html
{% load menu_tags %}
<nav class="navbar fixed-top navbar-dark navbar-expand-lg navbar-lg"
role="navigation">
<div class="container">
<a class="navbar-brand" href="/">Title</a>
<button type="button" class="navbar-toggler text-white" data-toggle="collapse" data-target="#navbar-collapse-01">
<i class="fas fa-bars fa-1x"></i>
</button>
<div class="collapse navbar-collapse" id="navbar-collapse-01">
<ul class="nav navbar-nav ml-auto text-white">
{% for item in menu_items %}
{% if item.sub_menu %}
<li class="nav-item dropdown {{item.active_class}}"><a class="nav-link dropdown-toggle" href="{{ item.href }}" data-toggle="dropdown">{{ item.text }}</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{{ item.href }}"><b>{{ item.text }}</b></a>
{% for sub_item in item.sub_menu.items %}
<a class="dropdown-item" href="{{ sub_item.href }}">{{ sub_item.text }}</a>
{% endfor %}
</div>
</li>
{% else %}
<li class="nav-item {{item.active_class}}"><a class="nav-link" href="{{ item.href }}">{{ item.text }}</a>
{% endif %}
{% endfor %}
<li class="nav-link"><i class="fas fa-search" title="Search"></i></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
No errors in the console, nothing. Again, I've triple-checked to ensure my pages are checked with "show in menus". Where else can I look? I know for sure the menu itself is loading in because the search icon shows up.
I'm running Django=3.1.2, Wagtail=2.11.3, and WagtailMenus=3.0.2
I do not see the closing tags, </head>, </body> in your base.html. Have you added them?
Because you said you have recreated the database, have you add the pages to Wagtail menu? Wagtail admin > Settings > Main menu?
Try editing the pages in question and checking whether the “Show in menus” checkbox is checked (found under the “Promote” tab by default).1
It's giving me an error: NoReverseMatch at / targeting the base.html file (shown in the pic).But the base.html file looks fine to me.
Base.html
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Blog</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Medium Style editor -->
<script src="//cdn.jsdelivr.net/npm/medium-editor#latest/dist/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor#latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
<!-- Custom CSS -->
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat|Russo+One&display=swap" rel="stylesheet">
</head>
<body class="loader">
<!-- Navbar -->
<nav class="navbar custom-navbar techfont navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li><a class="navbar-brand bigbrand" href="{% url 'post_list' %}">My Blog</a></li>
<li>About</li>
<li>GitHub</li>
<li>LinkedIn</li>
</ul>
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li> <a href="{% url 'post_new' %}" >New Post</a></li>
<li> <a href="{% url 'post_draft_list' %}" >Drafts</a></li>
<li> <a href="{% url 'logout' %}" >Logout</a></li>
<li> Welcome: {{user.username}} </li>
{% else %}
<li> <span class="glyphicon glyphicon-user"></span> </li>
{% endif %}
</ul>
</div>
</nav>
<!-- COntent Block -->
<div class="content container">
<div class="row">
<div class="col-md-8">
<div class="blog-posts">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
</body>
</html>
Post_detail.html
{% extends 'blog/base.html' %}
{% block content %}
<h1 class="posttitle loader">{{post.title}}</h1>
{% if post.published_date %}
<div class="date postdate">
{{post.published_date}}
</div>
{% else %}
Publish
{% endif %}
<p class="postcontent">{{post.text|safe|linebreaksbr}}</p>
{% if user.is_authenticated %}
<a href="{% url 'post_edit' pk=post.pk %}" class="btn btn-primary">
<span class="glyphicon glyphicon-pencil"></span>
</a>
<a href="{% url 'post_remove' pk=post.pk %}" class="btn btn-primary">
<span class="glyphicon glyphicon-remove"></span>
</a>
{% endif %}
<hr>
Add Comment
<div class="container">
{% for comment in post.comments.all %}
<br>
{% if user.is_authenticated or comment.approved_comment %}
{{ comment.create_date }}
{% if not comment.approved_comment %}
<a href="{% url 'comment_approve' pk=comment.pk %}" class="btn btn-primary">
<span class="glyphicon glyphicon-ok"></span>
</a>
<a href="{% url 'comment_remove' pk=comment.pk %}" class="btn btn-default">
<span class="glyphicon glyphicon-remove"></span>
</a>
{% endif %}
<p>{{comment.text|safe|linebreaks}}</p>
<p>Posted by: {{comment.author}}</p>
{% endif %}
{% empty %}
<p>No comments!</p>
{% endfor %}
</div>
{% endblock %}
Post_list.html (The very first page that's supposed to be open on running the server)
{% extends 'blog/base.html' %}
{% block content %}
<div class="centerstage">
{% for post in post_list %}
<div class="post">
<h1>{{post.title}}</h1>
<div class="date">
<p>Published on: {{post.published_date|date:'D M Y'}}</p>
</div>
Comments: {{ post.approve_comments.count }}
</div>
{% endfor %}
</div>
{% endblock %}
urls.py
Blog.urls
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$',views.PostListView.as_view(),name='post_list'),
url(r'^about/$',views.AboutView.as_view(),name='about'),
url(r'^post/(?P<pk>\d+)/$',views.PostDetailView.as_view(),name='post_detail'),
url(r'^post/new/$',views.CreatePostView.as_view(),name='post_new'),
url(r'^post/(?P<pk>\d+)/edit/$',views.PostUpdateView.as_view(),name='post_edit'),
url(r'^post/(?P<pk>\d+)/remove/$',views.PostDeleteView.as_view(),name='post_remove'),
url(r'^drafts/$',views.DraftListView.as_view(),name='post_draft_list'),
url(r'^post/(?P<pk>\d+)/comment/$',views.add_comment_to_post,name='add_comment_to_post'),
url(r'^comment/(?P<pk>\d+)/approve/$',views.comment_approve,name='comment_approve'),
url(r'^comment/(?P<pk>\d+)/remove/$',views.comment_remove,name='comment_remove'),
url(r'^post/(?P<pk>\d+)/publish/$',views.post_publish,name='post_publish'),
]
Didn't receive this error before. Came all of a sudden. Clueless as to what went wrong. How to tackle this?
the problem is in post_list.html or post_detail.html .
basically you are having the url that is not matches with any urls in urls.py
ie({% url 'post_detail' pk=post.pk %})
so check your post_list.html and post_detail.html your base.html is well and good
The same error i was facing i looked to my firstly rendered page and the extra url was there.
As it says in the error message, the blog url with arguments {'pk: ''} is not found. This basically means that on the page where you're doing "{% url 'post_detail' pk=post.pk %}", post is probably None or not an object you're expecting. You need to check that your {% for post in post_list %} actually returns posts.
I am extending a template , and the two divs before the content block of container doesn't show in any of the ways, the only solution i found is to put this 2 divs in the child , but of course it will lose the sense using extend then.
Someone can tell me what I am missing?
Thanks in advance.
I have the following base template :
<!doctype html>
<html lang="es">
<head>
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
{% load static %}
{% block extra_css %}
{% endblock %}
</head>
<body {% block body_attributes %} {% endblock %} >
{% block body %}
{% if messages %}
<div>
<strong>Messages:</strong>
<ul>
{% for message in messages %}
<li>{{message}}</li>
{% endfor %}
</ul>
</div>
{% endif %}
<!-- THIS 2 HERE DOESN'T APPEAR -->
<div class="page-header header-filter" style="background-image: url({% static "material/img/pic.jpg" %}); background-size: cover; background-position: top center;">
<div class="container">
{% block content %}
{% endblock %}
</div>
</div>
{% endblock %}
{% block extra_body %}
{% endblock %}
<!-- Core JS Files -->
<script src="{% static 'material/js/core/jquery.min.js' %} ">
</script>
</body>
</html>
The template that extends is the following :
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block body_attributes %}
class="login-page"
{% endblock %}
{% block body %}
{% load account socialaccount %}
{% providers_media_js %}
{% block content %}
<div class="row">
<div class="col-md-4 col-sm-6 ml-auto mr-auto">
<div class="card card-signup">
<form class="form" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
<div class="card-header card-header-primary text-center">
<h4 class="card-title">Log in</h4>
<div class="social-line">
<a href="{% provider_login_url 'facebook' method="js_sdk" %}" class="btn btn-just-icon btn-link">
<i class="fa fa-facebook-square"></i>
</a>
<a href="{% provider_login_url 'twitter' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-twitter"></i>
</a>
<a href="{% provider_login_url 'google' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
<p class="description text-center">Or Be Classical</p>
<div class="card-body">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">face</i>
</span>
<input type="text" name="login" placeholder="Nombre de Usuario ..."
autofocus="autofocus" maxlength="150" required id="id_login"
class="form-control" >
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">lock_outline</i>
</span>
<input type="password" name="password" placeholder="Password..."
required id="id_password"
class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" id="id_remember" checked>
Remember me
</label>
</div>
</div>
<div class="footer text-center">
<button id="login-btn"class="btn btn-primary btn-link btn-wd btn-lg" type="submit">Sing in</button>
<a class="btn btn-primary btn-link btn-wd btn-lg" href="{% url 'account_reset_password' %}">Has olvidado la contraseña</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
{% endblock %}
Your block tags are nested, so when you override body in child you lose all the code inside body from base template, including that two divs. Override only content block in your child and place other code in block extra_body. If you need that code before content, add another block inside body in base template named like before_content and override it in child to place that load into it.
P. S. You have also lost your if messages code after overriding body in child template.
I leave here the code in case someone wants to see the solution with code in front of its eyes
Following approach of Alexandr
Solution 1 :
base.html
<!doctype html>
<html lang="es">
<head>
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
{% load static %}
{% block extra_css %}
{% endblock %}
</head>
<body {% block body_attributes %} {% endblock %} >
{% block body %}
<div class="page-header header-filter" style="background-image: url({% static "material/img/office2.jpg" %}); background-size: cover; background-position: top center;">
<div class="container">
{% if messages %}
<div>
<strong>Messages:</strong>
<ul>
{% for message in messages %}
<li>{{message}}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% block content%}
{% endblock %}
</div>
</div>
{% block extra_body %}
{% endblock %}
{% endblock %}
<!-- Core JS Files -->
<script src="{% static 'material/js/core/jquery.min.js' %} ">
</script>
</body>
</html>
extend.html
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block body_attributes %}
class="login-page"
{% endblock %}
{% load account socialaccount %}
{% providers_media_js %}
{% block content %}
<div class="row">
<div class="col-md-4 col-sm-6 ml-auto mr-auto">
<div class="card card-signup">
<form class="form" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
<div class="card-header card-header-primary text-center">
<h4 class="card-title">Log in</h4>
<div class="social-line">
<a href="{% provider_login_url 'facebook' method="js_sdk" %}" class="btn btn-just-icon btn-link">
<i class="fa fa-facebook-square"></i>
</a>
<a href="{% provider_login_url 'twitter' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-twitter"></i>
</a>
<a href="{% provider_login_url 'google' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
<p class="description text-center">Or Be Classical</p>
<div class="card-body">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">face</i>
</span>
<input type="text" name="login" placeholder="Nombre de Usuario ..."
autofocus="autofocus" maxlength="150" required id="id_login"
class="form-control" >
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">lock_outline</i>
</span>
<input type="password" name="password" placeholder="Password..."
required id="id_password"
class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" id="id_remember" checked>
Remember me
</label>
</div>
</div>
<div class="footer text-center">
<button id="login-btn"class="btn btn-primary btn-link btn-wd btn-lg" type="submit">Sing in</button>
<a class="btn btn-primary btn-link btn-wd btn-lg" href="{% url 'account_reset_password' %}">Has olvidado la contraseña</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
Solution 2 :
Base.html
Taking into account the comment of #DisneylandSC , I try this and even though is kind of strange way to solve it , it does the job.
<!doctype html>
<html lang="es">
<head>
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- Fonts and icons -->
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css"/>
{% load static %}
{% block extra_css %}
{% endblock %}
</head>
<body {% block body_attributes %} {% endblock %} >
{% block body %}
{% if messages %}
<div>
<strong>Messages:</strong>
<ul>
{% for message in messages %}
<li>{{message}}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% block content_top %}
<div class="page-header header-filter" style="background-image: url({% static "material/img/office2.jpg" %}); background-size: cover; background-position: top center;">
<div class="container">
{% endblock %}
{% block content_botton %}
</div>
</div>
{% endblock %}
{% endblock %}
{% block extra_body %}
{% endblock %}
<!-- Core JS Files -->
<script src="{% static 'material/js/core/jquery.min.js' %} ">
</script>
</body>
</html>
extend.html
{% extends "account/base.html" %}
{% load i18n %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block body_attributes %}
class="login-page"
{% endblock %}
{% block body %}
{% load account socialaccount %}
{% providers_media_js %}
{% block content_top %}
{{ block.super }}
<div class="row">
<div class="col-md-4 col-sm-6 ml-auto mr-auto">
<div class="card card-signup">
<form class="form" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
<div class="card-header card-header-primary text-center">
<h4 class="card-title">Log in</h4>
<div class="social-line">
<a href="{% provider_login_url 'facebook' method="js_sdk" %}" class="btn btn-just-icon btn-link">
<i class="fa fa-facebook-square"></i>
</a>
<a href="{% provider_login_url 'twitter' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-twitter"></i>
</a>
<a href="{% provider_login_url 'google' %}" class="btn btn-just-icon btn-link">
<i class="fa fa-google-plus"></i>
</a>
</div>
</div>
<p class="description text-center">Or Be Classical</p>
<div class="card-body">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">face</i>
</span>
<input type="text" name="login" placeholder="Nombre de Usuario ..."
autofocus="autofocus" maxlength="150" required id="id_login"
class="form-control" >
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">lock_outline</i>
</span>
<input type="password" name="password" placeholder="Password..."
required id="id_password"
class="form-control">
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" id="id_remember" checked>
Remember me
</label>
</div>
</div>
<div class="footer text-center">
<button id="login-btn"class="btn btn-primary btn-link btn-wd btn-lg" type="submit">Sing in</button>
<a class="btn btn-primary btn-link btn-wd btn-lg" href="{% url 'account_reset_password' %}">Has olvidado la contraseña</a>
</div>
</form>
</div>
</div>
</div>
{% endblock %}
{% block content_botton %}
{{ block.super }}
{% endblock %}
{% endblock %}