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 %}
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 am new django. I'm practicing it after finishing youtube videos. I'm facing the following error
django.template.exceptions.TemplateSyntaxError: Invalid block tag on line 42: 'static', expected 'endblock'. Did you forget to register or load this tag?
The problem that it tells me that it can't find the endblock tag but I've put it at the end of the code. I don't know what causes this problem or how to solve it I need help please
my html
{% extends "Books/base.html" %}
{% block content %}
<div class="page" id="page">
<div class="main">
<div class="main-content">
{% for book in books %}
<div class="container">
<div class="img">
<img
src="{{ book.image.url }}"
width="250px"
height="300px"
/>
</div>
<div class="title">
{{ book.title }}
</div>
<p class="description">{{ book.mini_description }}</p>
<p class="category">
{% for categ in book.category.all %}
{% if categ == book.category.all.last %}
{{ categ }}
{% else %}
{{categ}}-
{% endif %}
{% endfor %}
</p>
<h2 class="price">{{ book.price }} EGP.</h2>
<h3 class="rate">{{ book.rate }}</h3>
<a href="{% url 'buy' %}" target="_blank"
><button class="buy_now nav buy_now_position">Buy Now</button></a
>
</div>
{% endfor %}
</div>
</div>
<div class="nav-bar">
<header class="nav">
<a class="nav logo">
<img
src="{% static 'images/Main Logo.png' %}"
class="logo"
alt="logo"
/>
</a>
<a class="nav">All</a>
<a class="nav">Horror</a>
<a class="nav">Classics</a>
<a class="nav">Graphic Novel</a>
<a class="nav">Fantasy</a>
<div class="drop_down nav">
<a
class="drop_down_btn nav"
type="button"
data-toggle="dropdown"
aria-haspopup
>
more
</a>
<i class="fa fa-caret-down menu"></i>
<div class="drop_down-content nav">
<a class="nav">Action and Adventure</a>
<a class="nav">Detective and Mystery</a>
<a class="nav">Fiction</a>
<a class="nav">Romance</a>
<a class="nav">Short Stories</a>
<a class="nav">Educational</a>
</div>
</div>
<div class="control">
<button class="filter nav" type="button">
<i
class="fa-solid fa-arrow-down-wide-short"
id="toggle-filter"
></i>
</button>
<label>
<input type="search" placeholder="search..." class="search" />
</label>
</div>
</header>
</div>
<div class="panel nav">
<h2>Filter:</h2>
<p>Enter the range of the prices you want</p>
<br />
<label>
From:
<input type="number" min="0" />
</label>
<br /><br />
<label>
To:
<input type="number" min="0" />
</label>
<br /><br />
<button type="button">Apply</button>
</div>
</div>
{% if is_paginated %}
{% if page_obj.has_previous %}
<a class="btn btn-outline-info mb-4" href="?page=1">First</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
<a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
{% endif %}
{% endif %}
{% endblock content %}
The error is raised at the line
src="{% static 'images/Main Logo.png' %}"
Edit: My Base file is as follows I Forgot to Include it in the question
{% load static %}
<!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" />
<meta name="author" content="Mohammad Ayman" />
<title>{{ title }}</title>
<link rel="stylesheet" href="{% static 'styles/style.css' %}" />
<link rel="stylesheet" href="{% static 'styles/details_style.css' %}" />
<link rel="icon" href="{% static 'images/Title Bar Logo.png' %}" />
<script src="{% static 'js-files/jquery-3.6.0.js' %}"></script>
<script src="{% static 'js-files/home.js' %}"></script>
<script
src="https://kit.fontawesome.com/2a5c8c2bca.js"
crossorigin="anonymous"
></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="{% static 'styles/buy_style.css' %}" />
<script src="{% static 'js-files/buy.js' %}"></script>
</head>
<body>
{% block content %} {% endblock content %}
</body>
</html>
I've search for an answer but didn't find any thing
{% extends "Books/base.html" %}
{% load static %} <!--You need to load static here -->
{% block content %}
<div class="page" id="page">
<div class="main">
<div class="main-content">
{% for book in books %}
<div class="container">
<div class="img">
<img
src="{{ book.image.url }}"
width="250px"
height="300px"
/>
</div>
<div class="title">
{{ book.title }}
</div>
<p class="description">{{ book.mini_description }}</p>
<p class="category">
{% for categ in book.category.all %}
{% if categ == book.category.all.last %}
{{ categ }}
{% else %}
{{categ}}-
{% endif %}
{% endfor %}
</p>
<h2 class="price">{{ book.price }} EGP.</h2>
<h3 class="rate">{{ book.rate }}</h3>
<a href="{% url 'buy' %}" target="_blank"
><button class="buy_now nav buy_now_position">Buy Now</button></a
>
</div>
{% endfor %}
</div>
</div>
<div class="nav-bar">
<header class="nav">
<a class="nav logo">
<img
src="{% static 'images/Main Logo.png' %}"
class="logo"
alt="logo"
/>
</a>
<a class="nav">All</a>
<a class="nav">Horror</a>
<a class="nav">Classics</a>
<a class="nav">Graphic Novel</a>
<a class="nav">Fantasy</a>
<div class="drop_down nav">
<a
class="drop_down_btn nav"
type="button"
data-toggle="dropdown"
aria-haspopup
>
more
</a>
<i class="fa fa-caret-down menu"></i>
<div class="drop_down-content nav">
<a class="nav">Action and Adventure</a>
<a class="nav">Detective and Mystery</a>
<a class="nav">Fiction</a>
<a class="nav">Romance</a>
<a class="nav">Short Stories</a>
<a class="nav">Educational</a>
</div>
</div>
<div class="control">
<button class="filter nav" type="button">
<i
class="fa-solid fa-arrow-down-wide-short"
id="toggle-filter"
></i>
</button>
<label>
<input type="search" placeholder="search..." class="search" />
</label>
</div>
</header>
</div>
<div class="panel nav">
<h2>Filter:</h2>
<p>Enter the range of the prices you want</p>
<br />
<label>
From:
<input type="number" min="0" />
</label>
<br /><br />
<label>
To:
<input type="number" min="0" />
</label>
<br /><br />
<button type="button">Apply</button>
</div>
</div>
{% if is_paginated %}
{% if page_obj.has_previous %}
<a class="btn btn-outline-info mb-4" href="?page=1">First</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
<a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
{% endif %}
{% endif %}
{% endblock content %}
When I attempt to log in to my django website, I always get a 403 Forbidden CSRF cookie not set error. When viewed via developer tools, the CSRF token was in the form response, but there were no cookies. I have django.middleware.csrf.CsrfViewMiddleware in my middleware, and I am using the standard django.contrib.auth.views.LoginView.
Here is my template:
{% extends 'base/formbase.html' %}
{% block title %}Login{% endblock title %}
{% block menuid %}menu-login{% endblock menuid %}
{% block submitname %}Login{% endblock submitname %}
{% block extra %}
<div class="alert alert-danger">
Forgot Your Password?
</div>
<div class="alert alert-secondary">
Don't have an account? Sign Up!
</div>
{% endblock extra %}
base/formbase.html:
{% extends 'base/base.html' %}
{% load crispy_forms_tags %}
{% block body %}
<div class="row justify-content-center">
<div class="col-6">
<div class="card">
<div class="card-body">
{% block form %}
<h2>{% block title %}{% endblock title %}</h2>
<form method="post" novalidate>
{% csrf_token %}
{{ form|crispy }}
<button type="submit" class="btn btn-primary">{% block submitname %}{% endblock submitname %}
</button>
</form>
{% endblock form %}
</div>
{% block extra %}{% endblock extra %}
</div>
</div>
</div>
{% endblock body %}
base/base.html:
<!DOCTYPE html>
{% load base_extra %}
<html lang="en">
<head>
{% settings gamename "GAME_NAME" %}
<meta charset="UTF-8">
<title>{{ gamename }} - {% block title %}{% endblock title %}</title>
{% block head %}{% endblock head %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% settings debug "DEBUG" %}
{% if debug %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/latest/css/bootstrap.css">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://unpkg.com/#popperjs/core/dist/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/latest/js/bootstrap.js"></script>
{% else %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://unpkg.com/#popperjs/core/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
{% endif %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="{% url 'index' %}">{{ gamename }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item" id="menu-home">
<a class="nav-link" href="{% url 'index' %}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" id="menu-gamelist">
<a class="nav-link" href="{% url 'game:game_list' %}">Game List</a>
</li>
<li class="nav-item" id="menu-leaderboard">
<a class="nav-link" href="{% url 'user_list' %}">Leaderboard</a>
</li>
{% if request.user.is_staff %}
<li class="nav-item" id="menu-admin">
<a class="nav-link" href="{% url 'admin:index' %}">Admin</a>
</li>
{% endif %}
</ul>
<!--
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
-->
<ul class="navbar-nav ml-auto">
{% if request.user.is_authenticated %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
{{ request.user }}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'user' user.pk %}">Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">Log out</a>
</div>
</li>
<li class="nav-item">
<div class="nav-link">${{ request.user.gameinfo.money }}</div>
</li>
{% else %}
<li class="nav-item" id="menu-signup">
<a class="nav-link" href="{% url 'signup' %}">Sign Up</a>
</li>
<li class="nav-item" id="menu-login">
<a class="nav-link" href="{% url 'login' %}">Log In</a>
</li>
{% endif %}
</ul>
</div>
</nav>
<div class="mx-3 mt-2">
<script>
try {
document.getElementById("{% block menuid %} {% endblock menuid %}").classList.add("active");
}
catch {}
</script>
{% block body %}
{% endblock body %}
</div>
</body>
</html>
Adding the #csrf_protect decorator does not solve the problem.
This may occur if you have CSRF_COOKIE_SECURE = True explanation in the docs Or if you have CSRF_COOKIE_HTTPONLY = True explanation or if you wish to just disable the csrf token you can add the #csrf_exempt decorator to the view
Edit: Adding the full versions of my base and child template.
I'm using Django 1.5.8 and have a base template (in template root) and sub folders for child templates which extend the base.
When I extend base.html all the contents of the base template show up in the body of the child template. This happens on all child pages except the index. Is there some Django template inheritance rule that I'm not aware of?
Here is my full base:
<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
{% load ganalytics %}
{% load twitter_tag %}
{% load compress %}
{% load tags %}
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block othermeta %}
<meta name="description" content="Welcome to Multimechanics">
<title>MultiMechanics</title>
<link rel="icon" type="image/png" href="{{ STATIC_URL }}ico/favicon.ico" />
<!--Needed for salesforce-->
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
{% endblock %}
<!-- Bootstrap core CSS -->
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
{% compress css %}
<link href="{{ STATIC_URL }}css/style.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/animate.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/lightbox.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>
{% endcompress %}
{% ganalytics %}
{% block otherheader %}{% endblock %}
</head>
<body>
<!-- Navigation -->
<header>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
</button>
<a class="navbar-brand" href="/"><img src="{{ STATIC_URL }}img/logo.png" alt="..."></a>
</div>
<div class="collapse navbar-collapse">
{% if user.is_authenticated %}
Log Out
{% else %}
Log In
{% endif %}
<ul class="nav navbar-nav navbar-right">
<li class='dropdown {% active request "^/faqs/$" %} {% active request "^/multiscale/$" %} {% active request "^/about-us/$" %}'>
About<b class="caret"></b>
<ul class="dropdown-menu">
{% if request.get_full_path == "/" %}
<li>Product Overview</li>
<li>Product Applications</li>
{% else %}
<li>Multimech Home</li>
{% endif %}
<li>MultiMech Details</li>
<li>What's Multiscale?</li>
<!--<li>Demos</li>
<li>Case Studies</li>-->
<li>Frequent Questions</li>
</ul>
</li>
<li class='dropdown {% active request "^/trueinnovation/$" %} {% active request "^/portfolio/$" %}'>
Showcases <b class="caret"></b>
<ul class="dropdown-menu">
{% if request.get_full_path == "/" %}
<li>Featured Demos</li>
{% endif %}
<li>Demo Gallery</li>
<li>Blog</li>
</ul>
</li>
<li class='dropdown {% active request "^/careers/$" %} {% active request "^/contact-us/$" %} {% active request "^/login/$" %} {% active request "^/help/$" %} {% active request "^/register/$" %} {% active request "^/thanks/$" %}'>
Connect<b class="caret"></b>
<ul class="dropdown-menu">
<li>Contact Us</li>
<li>Careers</li>
<li>Help</li>
<li>User Login</li>
</ul>
</li>
{% if request.get_full_path != "/" %}
<li class="dropdown">
Contact
</li>
{% else %}
<li class="dropdown">
Contact
</li>
{% endif %}
<!-- Navbar Search -->
<li class="hidden-xs" id="navbar-search">
<a href="#">
<i class="fa fa-search"></i>
</a>
<div class="hidden" id="navbar-search-box">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</li>
</ul>
<!-- Mobile Search -->
<form class="navbar-form navbar-right visible-xs" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-red" type="button">Search!</button>
</span>
</div>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</header>
<!-- / .navigation -->
{% block content %}
{% endblock %}
<!-- footer
================================================== -->
<footer>
<div class="container">
<div class="row">
<!-- Contact Us -->
<div class="col-sm-4">
<h4><i class="fa fa-map-marker text-red"></i> Contact Us</h4>
<p>Do not hesitate to contact us if you have any questions or feature requests:</p>
<p>
Omaha, NE 68154<br />
14301 FNB Parkway, Suite 100<br />
Phone: +1 402 957 1336<br />
Email: sales#multimechrd.com
</p>
</div>
<!-- Recent Tweets -->
{% load twitter_tag cache %}
{% cache 60 my_tweets %}
{% get_tweets for "multimechanics" as tweets limit 2 %}
<div class="col-sm-4">
<h4><i class="fa fa-twitter-square text-red"></i> Recent Tweets</h4>
{% for tweet in tweets %}
<div class="tweet">
<i class="fa fa-twitter fa-2x"></i>
<p>
{{ tweet.html|safe }}
</p>
</div>
{% endfor %}
</div>
{% endcache %}
<!-- Newsletter -->
<div class="col-sm-4">
<h4><i class="fa fa-envelope text-red"></i> Newsletter</h4>
<p>
Enter your e-mail below to subscribe to our free newsletter.
<br>
We promise not to bother you often!
</p>
<!--<form class="form" role="form" method="post" action="/newsletter{{ request.get_full_path }}">-->
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name="oid" value="00Di0000000fkHM">
<input type=hidden name="retURL" value="http://multimech2.azurewebsites.net/thanks/newsletter">
<input type=hidden name="lead_source" id="lead_source" value="Web">
<input type=hidden name="city" id="city" value="{{ip}}">
{% csrf_token %}
<div class="row">
<div class="col-sm-8">
<div class="input-group">
<label class="sr-only" for="subscribe-email">Email address</label>
<!--<input type="email" class="form-control" id="subscribe-email" placeholder="Enter your email">-->
<div class="fieldWrapper">{{ newsletter_form.email }}</div>
<span class="input-group-btn">
<button type="submit" class="btn btn-default" name="newsletter_form">OK</button>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</footer>
<!-- Copyright -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="copyright">
Copyright 2014 - MultiMechanics, LLC | All Rights Reserved
</div>
</div>
</div> <!-- / .row -->
</div> <!-- / .container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
{% compress js %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
<script src="{{ STATIC_URL }}js/scrolltopcontrol.js"></script>
<script src="{{ STATIC_URL }}js/lightbox-2.6.min.js"></script>
<script src="{{ STATIC_URL }}js/custom.js"></script>
{% endcompress %}
{% block otherfooter %}{% endblock %}
</body>
</html>
Here is my full child:
{% extends "base.html" %}
{% block content %}
<!-- Wrapper -->
<div class="wrapper">
<!-- Topic Header -->
<div class="topic">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Sign In</h3>
</div>
<div class="col-sm-8">
<ol class="breadcrumb pull-right hidden-xs">
<li>Home</li>
<li class="active">Log In</li>
</ol>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="sign-form">
<div class="sign-inner">
<h3 class="first-child">Log In To Your Account</h3>
<hr>
<form role="form" action="" method="post">
{% csrf_token %}
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
{{form.username}}
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
{{form.password}}
</div>
<div class="checkbox">
<!--<label>
<input type="checkbox"> Remember me
</label>-->
</div>
<button type="submit" class="btn btn-red" name="login_form">Submit</button>
<hr>
</form>
<p>Not registered? Create an Account.</p>
<div class="pwd-lost">
<div class="pwd-lost-q show">Lost your password? Click here to recover.</div>
<!--https://github.com/brutasse/django-password-reset-->
<div class="pwd-lost-f hidden">
<p class="text-muted">Enter your email address below and we will send you a link to reset your password.</p>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="email-pwd">Email address</label>
<input type="email" class="form-control" id="email-pwd" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-blue">Send</button>
</form>
</div>
</div> <!-- / .pwd-lost -->
</div>
</div>
</div>
</div> <!-- / .row -->
</div> <!-- / .container -->
</div> <!-- / .wrapper -->
{% endblock %}
Here is how the html is rendered:
<html lang="en">
<head>
<style type="text/css"></style>
</head>
<body style="">
<!-- base.html -->
<!--[if lt IE 8 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!-->
<!--<![endif]-->
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Navigation -->
<header>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
</button>
<a class="navbar-brand" href="/"><img src="/static/img/logo.png" alt="..."></a>
</div>
<div c
Here is how I render that page (but I use "render_to_response" for other templates and get the same result:
url(r'^about-us/', TemplateView.as_view(template_name="about-us.html"), name='about-us'),
Thanks in advance for the help.
I had similar problem.
Changing encoding of my files to "utf-8 without BOM" solved my issue.
(http://validator.w3.org/ may help u.)
Are you sure you're editing the correct "base.html" file? It appears that you may be editing a file that has the same name, but is in a different location. Also, are you using Javascript or something to populate your <navigation> </navigation> ? The rendered result does not match your base.html. If you are generating this navigation section using Javascript, this could be your culprit. If it was redacted for readability, then I would search for another instance of "base.html" or "about-us.html" in your project folder. You may find that you are editing the wrong file. Can you post the complete files "base.html" and "about-us.html" and the entire response?
Edit: I believe the issue may be in your "othermeta" block. You can see that the following lines render correctly:
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
This is the point in your result that gets messy. It is also the point in your base when you call for {% block othermeta %}. Is there a reason you have that block with content inside? I'm not sure it is accepting the {% endblock %} correctly. If you want the block othermeta to be dynamic, you must have it in its own othermeta.html, which extends base.html as well. Then, you would change your code to simply:
{% block othermeta %} {% endblock %}
I think the error may be that you're trying to define the contents of this block in an extended template. I'm new at this like you, so I could be completely wrong, but try removing your othermeta block entirely for now and see if it helps.
Hope this helps!
After having the same issue in 2019, this was, as Majid Mobini said, due to the encoding of the source files by Visual Studio. As VS 2019 no longer has the Advanced Save options, my solution was to install the Fix File Encoding extension from the VS Marketplace and resave my files - which then placed the meta in the HEAD as expected.
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 %}