When I use {% extends %} tag its not pulling through my standard html. Is there something am missing am new to Django template tags. I want to add the Standard,html into my index.html file which also resides in the templates folder.
My index file in the template folder:
{% extends "Standard.html" %}
{% block maincontent %}
{% block headcontent %}
<link rel="stylesheet" type="text/css" href="/media/css/Panels.css" />
<link rel="stylesheet" type="text/css" href="/media/css/HostOverview.css" />
{% endblock %}
<script>
function disaT(c,f){
if(c.checked){f.txt1.disabled=false;
f.submit.disabled=false;
}
else{f.txt1.disabled=true;
f.submit.disabled=false;
}
}
</script>
<style>
a:link {
color: #39F;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #63C;
}
a:hover {
text-decoration: none;
color: #CCC;
}
a:active {
text-decoration: none;
color: #000;
}
</style>
<div style="display:none" id="dialog" title="Disable Your Account?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This will disable your account and log you out. You won't be able to log back in. Are you sure you want to continue?</p>
</div>
<h1></h1>
<form name="logger" action="" method="post">
<label>Input : </label><textarea name="txtexec" id="txtexec" cols="50"/>{{ txtexec }}</textarea> <input type="submit" name="execute" value="Execute" /><br /><br />
<label>Pattern Input : </label><input name="txtpattern" id="txtpattern" type="text" size="100" value="{{ txtpattern }}" /><br />
<label>Result : </label><br />
</form>
<P>Discover</P>
<pre>
{{ file_content }}
</pre>
<P>Console output</P>
<pre>
{{ Output_content }}
</pre>
<form name="checkin_form" action="#" method="post" enctype="multipart/form-data"><br><br>
Full pattern : <span style="color:#000; font-size:10px; background:#CCC;" >{{ session_fullpattern }}</span><br><br>
<label>Check In : </label><input type="checkbox" onclick="disaT(this,this.form)"><br>
<label>Enter pattern name : </label><input name="txt1" type="text" disabled="true"> <input type="submit" name="submit" value="Submit" disabled="true" />
</form>
<div style="clear:both;" />
{% endblock %}
My standard.html page:
{% extends "Base.html" %}
{% block head %}
<link rel="stylesheet" type="text/css" href="/media/css/Standard.css" />
<link rel="stylesheet" type="text/css" href="/media/css/Menu.css" />
<link rel="stylesheet" type="text/css" href="/media/css/Tooltip.css" />
<link rel="Stylesheet" type="text/css" href="/media/css/custom_theme/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript" src="/media/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/media/js/jquery-ui-personalized-1.6rc6.min.js"></script>
{% block headcontent %}{% endblock %}
{% endblock %}
You're nesting blocks inside each other, which is rarely the right thing to do.
Your index.html should start like this:
{% extends "standard.html" %}
{% block headcontent %}
<link rel="stylesheet" type="text/css" href="/media/css/Panels.css" />
<link rel="stylesheet" type="text/css" href="/media/css/HostOverview.css" />
{% endblock %}
{% block maincontent %}
... etc
but then you also need a place for maincontent to go in standard.html:
{% extends "Base.html" %}
{% block head %}
.... content ...
{% endblock %}
{% block headcontent %}{% endblock %}
{% block maincontent %}{% endblock %}
Your inheritance and naming is way of. Examine the template language documentation. The example below should give you an idea aswell.
base.html
<html>
<head>
<!-- this will always be inherited -->
{% block head %}
<!-- this can be overruled -->
{% endblock %}
</head>
<body>
<!-- this will always be inherited -->
{% block body %}
<!-- this can be overruled -->
{% endblock %}
</body>
</html>
page.html
{% extends "base.html" %}
{% block head %}
<!-- Hello I am overwriting the base head, but not touching it's body. -->
{% endblock %}
Related
I am using Django 3.2
This is my base template (snippet):
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content={% block page_description %}""{% endblock page_description %}>
<meta name="keywords" content={% block page_keywords %}""{% endblock page_keywords %}>
<link rel='icon' href='{% static "img/favicon.ico" %}' type='image/x-icon'/ >
<title>{% block page_title %}Demo{% endblock page_title %}</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C300%2C500%2C600%2C700%7CPlayfair+Display%7CRoboto%7CRaleway%7CSpectral%7CRubik">
<link rel="stylesheet" href="{% static 'css/footer.css' %}">
<link rel="stylesheet" href="{% static 'css/header.css' %}">
{% block head_styles %}
{% endblock head_styles %}
{% block head_js %}
{% endblock head_js %}
</head>
<body>
{% block header %}
{% include "partials/header.html" %}
{% endblock header %}
{% block messages %}
{% include 'partials/messages.html' %}
{% endblock messages %}
<!-- Page Content -->
<div class="d-flex flex-column sticky-footer-wrapper">
{% block content %}
{% endblock content %}
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js" integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g==" crossorigin="anonymous"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Site footer -->
{% block footer %}
{% include 'partials/footer.html' %}
{% endblock footer %}
{% block body_js %}
{% endblock body_js %}
<script>
$().ready(function() {
});
</script>
</body>
</html>
/path/to/header.html
{% load static %}
<!-- Header -->
<header id="js-header" class="u-header u-header--static">
<!-- ... # snipped -->
<form action="/action_page.php" method="GET">
<button id="btn-submit-item" type="submit" class="btn" style="margin-right: 10px;border: 1px solid #CACACA;">Submit</button>
</form>
{% if not user.is_authenticated %}
<a class="btn btn-success btn" href="#" role="button">Sign In</a>
{% else %}
<a class="nav-link text-dark" href="#">{{ user.username }}</a>
{% endif %}
</ul>
</div>
<!-- End Navigation -->
</div>
</nav>
</div>
</header>
<!-- End Header -->
{% block body_js %}
<script>
$().ready(function(){
$( "#btn-submit-item" ).click(function() {
alert( "Handler for .click() called." );
});
});
</script>
{% endblock body_js %}
In rendered page HTML, I get something like this:
# ...
<!-- End Header -->
<script>
$().ready(function(){
$( "#btn-submit-photo" ).click(function() {
alert( "Handler for .click() called." );
});
});
</script>
# ...
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js" integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g==" crossorigin="anonymous"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Site footer -->
The placement is in the wrong place - so the JQuery operator $ is attempting to be used - BEFORE the JQuery library is loaded - hence the error.
My question is - why is Django rendering the block in the wrong place - and how do I fix this error?
You're rendering header.html in {% block header %} which is added before the jquery script. Therefore, $ is undefined.
Solution 1:
Move the jquery include to the <head></head> of your html, like you did with the bootstrap.min.css file.
Solution 2:
If you want to have your jquery loaded just before the body closing tag (</body>), you should move your inline jquery to a .js file and include that after including jQuery. For example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"
integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g=="
crossorigin="anonymous"></script>
<script src="your_script.js"></script>
</body>
Read more about django and static files here: https://docs.djangoproject.com/en/3.2/howto/static-files/
When I use {% extends 'base.html' %} my navbar displays correctly but when I use {% block content %} Hello World{% endblock content %} my navbar disappears and I only see the text "Hello World". I dont really know what to try it appeared to be straight forward but apparently it isn't until you actually know.
{% extends "base.html" %}
{% block content %}<h1>Hello World</h1>{% endblock content %}
My 'base.html' file
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>my title goes here</title>
{% endblock %}
</head>
<body>
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col">
<nav class="navbar custom-navbar">
<h1>World Truthers</h1>
<div class="col navbar-buttons">
<button class="btn custom-button"><p><b>Contact</b></p></button>
<button class="btn custom-button"><p><b>About</b></p></button>
<button class="btn custom-button"><p><b>Returns</b></p></button>
<button class="btn custom-button"><p><b>Payment</b></p></button>
<button class="btn custom-button"><p><b>Delivery</b></p></button>
<button class="btn custom-button"><p><b>Store</b></p></button>
</div>
</nav>
</div>
</div>
</div>
{% endblock %}
</body>
Change your base.html to the one below. What is happening is you are overwriting your content block with whats in your template ("Hello world"). If you want to stick with this, in your child template, put {{block.super}} after {% block content %}, but the "correct" way would be to change your base.html with the one below.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>my title goes here</title>
{% endblock %}
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<nav class="navbar custom-navbar">
<h1>World Truthers</h1>
<div class="col navbar-buttons">
<button class="btn custom-button"><p><b>Contact</b></p></button>
<button class="btn custom-button"><p><b>About</b></p></button>
<button class="btn custom-button"><p><b>Returns</b></p></button>
<button class="btn custom-button"><p><b>Payment</b></p></button>
<button class="btn custom-button"><p><b>Delivery</b></p></button>
<button class="btn custom-button"><p><b>Store</b></p></button>
</div>
</nav>
</div>
</div>
</div>
{% block content %}
{% endblock %}
</body>
Trying to recreate a notes app on pythonanywhere.
Link suggesting how it can be done gives output like this.
Attempting same is here
http://lastchance.pythonanywhere.com/notes/
How does one get notes as given in first image ?
<link href="http://codepen.io/edbond88/pen/CcgvA.css" media="screen" rel="stylesheet" type="text/css">
<style>
body {<br />
background: rgba(222,222,222,1);<br />
margin: 20px;<br />
}<br />
</style>
<h1>Django Note Taking App</h1>
<ul>
{% for note in notes.all %}
<li>{{ note.text }}</li>
{% endfor %}
</ul>
<form method="POST" action="">
{% csrf_token %}
{{ form.as_p }}
<input type="submit">
</form>
<link rel="stylesheet" href="http://lastchance.pythonanywhere.com/notes/"/>
This should work
enter image description hereI have js gallery and i use django.I have many gallery boxs in one page but only first box realy work.It's can zoom in, zoom out etc.I think i have js problem but others js works normal. Only gallery boxs doesn't work.
i want do many thik but never work.
1.i add script in forloop
2.i add manualy class
3.i add style
gallery.html
{% extends 'BaseScreen/based.html' %}
{% load static %}
{% block body %}
{% for photos in x %}
{% with a=photos %}
<main id="js-page-content" role="main" class="page-content">
<div class="row">
<div class="col-xl-12">
<div id="panel-1" class="panel">
<div class="panel-hdr">
<h2>
{{ a }} <span class="fw-300"><i>Example</i></span>
</h2>
<div class="panel-toolbar">
<button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
<button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
<button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
</div>
</div>
<div class="panel-container show">
<div class="panel-content">
<div id="js-lightgallery">
{% for photo in post %}
{% if photo.ders == a %}
{% if photo.img %}
<a class="jg-entry entry-visible" href="{{photo.img.url}}" data-sub-html="{{photos.title}}">
<img class="img-responsive" src="{{ photo.img.url }}" alt="{{photo.title}}">
</a>
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</main>
{% endwith %}
{% endfor %}
{% endblock %}
based.html
{% load static %}
<head>
<meta charset="utf-8">
<title>
Light Gallery - Miscellaneous - SmartAdmin v4.0.2
</title>
<meta name="description" content="Light Gallery">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
<!-- Call App Mode on ios devices -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- Remove Tap Highlight on Windows Phone IE -->
<meta name="msapplication-tap-highlight" content="no">
<!-- base css -->
<link rel="stylesheet" media="screen, print" href="{% static 'css/vendors.bundle.css' %}">
<link rel="stylesheet" media="screen, print" href="{% static 'css/app.bundle.css' %}">
<link rel="stylesheet" media="screen, print" href="{% static 'css/miscellaneous/lightgallery/lightgallery.bundle.css' %}">
{% block stylesheet %}{% endblock %}
<!-- Place favicon.ico in the root directory -->
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/favicon/apple-touch-icon.png' %}">
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'img/favicon/apple-touch-icon.png' %}">
<link rel="mask-icon" href="{% static 'img/favicon/safari-pinned-tab.svg' %}" color="#5bbad5">
<link rel="stylesheet" media="screen, print" href="{% static 'css/miscellaneous/lightgallery/lightgallery.bundle.css' %}">
</head>
<body class="mod-bg-1 nav-function-top" >
<div class="page-wrapper">
<div class="page-inner">
{% include 'BaseStyle/SideBar.html' %}
<div class="page-content-wrapper">
{% include 'BaseStyle/Header.html' %}
<main id="js-page-content" role="main" class="page-content">
{% block body %}
{% endblock %}
</main>
<div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div>
<footer class="page-footer" role="contentinfo">
<div class="d-flex align-items-center flex-1 text-muted">
<span class="hidden-md-down fw-700">2019 © SmartAdmin by <a href='https://www.gotbootstrap.com' class='text-primary fw-500' title='gotbootstrap.com' target='_blank'>gotbootstrap.com</a></span>
</div>
<div>
<ul class="list-table m-0">
<li>About</li>
<li class="pl-3">License</li>
<li class="pl-3">Documentation</li>
<li class="pl-3 fs-xl"><i class="fal fa-question-circle" aria-hidden="true"></i></li>
</ul>
</div>
</footer>
</div>
</div>
</div>
<script src="{% static 'js/vendors.bundle.js '%}"></script>
<script src="{% static 'js/app.bundle.js' %}"></script>
<script src="{% static 'js/miscellaneous/lightgallery/lightgallery.bundle.js' %}"></script>
<script>
$(document).ready(function()
{
var $initScope = $('#js-lightgallery');
if ($initScope.length)
{
$initScope.justifiedGallery(
{
border: -1,
rowHeight: 150,
margins: 8,
waitThumbnailsLoad: true,
randomize: false,
}).on('jg.complete', function()
{
$initScope.lightGallery(
{
thumbnail: true,
animateThumb: true,
showThumbByDefault: true,
});
});
};
$initScope.on('onAfterOpen.lg', function(event)
{
$('body').addClass("overflow-hidden");
});
$initScope.on('onCloseAfter.lg', function(event)
{
$('body').removeClass("overflow-hidden");
});
});
</script>
</body>
script
$(document).ready(function()
{
var $initScope = $('#js-lightgallery');
if ($initScope.length)
{
$initScope.justifiedGallery(
{
border: -1,
rowHeight: 150,
margins: 8,
waitThumbnailsLoad: true,
randomize: false,
}).on('jg.complete', function()
{
$initScope.lightGallery(
{
thumbnail: true,
animateThumb: true,
showThumbByDefault: true,
});
});
};
$initScope.on('onAfterOpen.lg', function(event)
{
$('body').addClass("overflow-hidden");
});
$initScope.on('onCloseAfter.lg', function(event)
{
$('body').removeClass("overflow-hidden");
});
});[enter image description here][1]
[1]: https://i.stack.imgur.com/6b7AX.jpg
I think dynamic id can solve problems
I am trying to get Zurb's Foundation to work like what I have seen on youtube, and how the demo works speaking of
I got the demo index.html working fine
The screen won't scale like it should
This is my skeleton.html
{% load zinnia_tags i18n %}
{% load url from future %}
{% get_tags as entry_tags %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="{{ LANGUAGE_CODE }}" lang="{{ LANGUAGE_CODE }}" version="-//W3C//DTD XHTML 1.1//EN" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{% block title %}{% endblock %}</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="cache-control" content="public" />
<meta name="robots" content="follow, all" />
<meta name="language" content="{{ LANGUAGE_CODE }}" />
<meta name="viewport" content="width=device-width">
<meta name="description" content="{% block meta-description %}Time Tool,TimeBank,Barter{% endblock %}" />
<meta name="keywords" content="{% block meta-keywords %}Time Trade Barter {{ entry_tags|join:", "}}{% endblock %}" />
<meta name="author" content="Brian Scott Carpenter" />
{% block meta %}{% endblock %}
<link rel="shortcut icon" href="{{ STATIC_URL }}img/favicon.ico" />
<link rel="home" href="{% url "home" %}" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ STATIC_URL }}stylesheets/app.css">
<script src="{{ STATIC_URL }}javascripts/vendor/custom.modernizr.js"></script>
<link href='http://fonts.googleapis.com/css?family=Jolly+Lodger' rel='stylesheet' type='text/css'>
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" media="screen, projection" href="{{ STATIC_URL }}/css/ie.css" />
<![endif]-->
{% block link %}{% endblock %}
{% block script %}{% endblock %}
</head>
<body class="skeleton {% block body-class %}{% endblock %}">
{% block header %}{% endblock%}
<div class="row">
<div class="small-8 columns">
<div class="panel">
{% block content %}{% endblock %}
</div>
</div>
<div class ="small-4 columns">
{% block sidebar %}{% endblock %}
</div>
</div>
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li id="message_{{ forloop.counter }}"
{% if message.tags %} class="{{ message.tags }}"
{% endif %}>
{{ message }}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% block footer %}{% endblock %}
</div>
<script>
document.write('<script src=' +
('__proto__' in {} ? 'javascripts/vendor/zepto' : 'javascripts/vendor/jquery') +
'.js><\/script>')
</script>
<script src="javascripts/foundation/foundation.js"></script>
<script src="javascripts/foundation/foundation.reveal.js"></script>
<script src="javascripts/foundation/foundation.topbar.js"></script>
<script src="javascripts/foundation/foundation.interchange.js"></script>
<script src="javascripts/foundation/foundation.forms.js"></script>
<script src="javascripts/foundation/foundation.placeholder.js"></script>
<script src="javascripts/foundation/foundation.tooltips.js"></script>
<script src="javascripts/foundation/foundation.joyride.js"></script>
<script src="javascripts/foundation/foundation.cookie.js"></script>
<script src="javascripts/foundation/foundation.clearing.js"></script>
<script src="javascripts/foundation/foundation.alerts.js"></script>
<script src="javascripts/foundation/foundation.dropdown.js"></script>
<script src="javascripts/foundation/foundation.orbit.js"></script>
<script src="javascripts/foundation/foundation.abide.js"></script>
<script src="javascripts/foundation/foundation.magellan.js"></script>
<script src="javascripts/foundation/foundation.section.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
base.html
{% extends "skeleton.html" %}
{% load zinnia_tags i18n %}
{% load url from future %}
{% load postman_tags %}
{% block title %}Tempilo{% endblock %}
{% block header %}
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1><li>{% trans "Home" %}</li></h1>
</ul>
<section class="top-bar-section">
{% if user.is_authenticated %}
{% trans "Logged in" %}: {{ user.username }}
<ul class="right">
<li><a href={% url "postman_inbox" %}> {% trans "Inbox" %}</a></li>
<li>{% trans "Log out" %}</li>
{% else %}
<ul class="right">
<li>{% trans "Log in" %}</li>
{% endif %}
</ul>
</ul>
</div>
<h1>Tempilo<small> It's a Time tool</small></h1>
<hr />
</div>
<!-- End Nav -->
{% endblock %}
{% block sidebar %}
<div class="side-nav right">
<ul class="button-group">
<li>{% trans "Create an Offer" %}</li>
<li class="divider"></li>
<li>{% trans "See the Offer's" %}</li>
<li class="divider"></li>
<li class="divider"></li>
<li>{% trans "Transaction List" %}</li>
<li class="divider"></li>
<li>{% trans "Create a Request" %}</li>
<li class="divider"></li>
<li>{% trans "See the Requests" %}</li>
<li class="divider"></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %} {% endblock %}
{% block footer %}
<div id="footer">
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Tempilo</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://bitbucket.org/BrianScottCarpenter/tempilo" property="cc:attributionName" rel="cc:attributionURL">Leprechaun King</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.<br />Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="https://bitbucket.org/BrianScottCarpenter/tempilo" rel="dct:source">https://bitbucket.org/BrianScottCarpenter/tempilo</a>.
<img src="http://s06.flagcounter.com/count/bLXn/bg_FFFFFF/txt_000000/border_CCCCCC/columns_8/maxflags_250/viewers_0/labels_0/pageviews_0/flags_0/" alt="Flag Counter" border="0">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-47015323-1', 'bitbucket.org');
ga('send', 'pageview');
</script>
</div>
{% endblock %}
</body>
</html>
Your HTML in base.html is not valid. Among the mistakes are:
You have closing divs that don't appear to have opening div tags in your sidebar block.
There's an opening <li> without a closing tag in the header block.
There's no closing </section> tag in the header block.
There is an extraneous </body></html> at the bottom.
Fix all the errors in the HTML and retry.