I am learning Django by building an application, called TravelBuddies. It will allow travelers to plan their trip and keep associated travel items (such as bookings, tickets, copy of passport, insurance information, etc), as well as create alerts for daily activities. The application will also able to update local information such as weather or daily news to the traveler. Travelers can also share the travel information with someone or have someone to collaborate with them to plan for the trip.
I am facing a problem. There is extra space at the top and bottom of the navigation bar.
How can I remove this extra white space on top and bottom of the navigation bar? I tried modifying the style codes. But I haven't managed to fix the issue.
Here are my codes in triplist.html:
<!DOCTYPE html>
{% extends 'base.html' %}
{% load static %}
<html lang="en">
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
<head>
<meta charset="UTF-8">
{% block title%}Trip list{% endblock %}
<title>Trip list</title>
</head>
<body>
{% block content %}
<!--Page content-->
<h1>Upcoming Trips</h1><br>
<ol>
{% for trip in all_trips %}
<li>Trip name: {{ trip.trip_name }}</li>
<b>Date:</b> {{ trip.date }}<br>
<b>Planner:</b> {{ trip.planner_name }}<br>
<b>Coplanners:</b>
{% for user in trip.add_coplanner.all %}
{% if forloop.last %}
{{user.username}}
{% else %}
{{user.username}},
{% endif %}
{% endfor %}<br>
<b>Trip Description:</b> {{ trip.trip_description }}<br><br>
<!-- Co-planner: {{ trip.add_coplanner.all }}<br>-->
{% endfor %}
</ol>
<!-- <img src="{% static "images/botanical-garden.jpg" %}" alt="Botanical Garden" />-->
<!-- New line -->
{% endblock %}
</body>
</html>
Here are my codes in base.html:
<!--Result Size: 1392 x 239-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}
{% endblock %}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
</style>
</head>
<body>
<!--Logged in-->
<!--Left side-->
{% if user.is_authenticated %}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'trips:triplist' %}">TravelBuddies</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Trip List</li>
<li>Add Trip</li>
<li>Add Activity</li>
<!--
<li>Contact</li>
-->
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
{{ request.user.username }}
</a>
</li>
<li><span class="glyphicon glyphicon-log-in"></span> Logout</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container text-left">
{% else %}
<!--Not Logged in-->
<!--Left side-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'trips:triplist' %}">TravelBuddies</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Trip List</li>
<!--
<li>Contact</li>
-->
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-plus-sign"></span> Register </li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
{% endif %}
<div class="jumbotron">
<div class="container text-left">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
</body>
How can I fix this issue?
In your base html keep the main tags which is required for a template as shown below:
{% 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="">
<meta name="author" content="">
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
<title>Starter Template for Bootstrap</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/starter-template/">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
</head>
<body>
{% block content %}
{% endblock %}
</body>
And in other templates you don't have to use html tags or body tags because you are inheriting those from base.html
{% extends 'base.html' %}
{% block content %}
Your html code goes here
{% endblock %}
Your triplist.html should be like this:
{% block content %}
<!--Page content-->
<h1>Upcoming Trips</h1><br>
<ol>
{% for trip in all_trips %}
<li>Trip name: {{ trip.trip_name }}</li>
<b>Date:</b> {{ trip.date }}<br>
<b>Planner:</b> {{ trip.planner_name }}<br>
<b>Coplanners:</b>
{% for user in trip.add_coplanner.all %}
{% if forloop.last %}
{{user.username}}
{% else %}
{{user.username}},
{% endif %}
{% endfor %}<br>
<b>Trip Description:</b> {{ trip.trip_description }}<br><br>
<!--Co-planner: {{ trip.add_coplanner.all }}<br>-->
{% endfor %}
</ol>
<!--<img src="{% static "images/botanical-garden.jpg" %}" alt="Botanical Garden" />-->
<!-- New line -->
{% endblock %}
Related
How to apply a stylesheet to a specific nav or div? for instance:
<head>
<meta CharacterSet='UTF-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %}</title>
{% load static %}
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="{% static 'js/main.js' %}"></script>
{% block script %}{% endblock %}
</head>
<nav id="navbar" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand mb-0" href="#">Pizza</a>
</div>
{% if user is not none %}
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
{% block nav_list %}{% endblock %}
</ul>
<form class="navbar-form navbar-right" action="{% url 'logout' %}" method="get">
<span>Welcome, {{ user }}. </span>
<button id="logout" class="btn btn-default btn-sm">Log out</button>
</form>
</div>
{% endif %}
</div>
</nav>
in above code, how to apply "<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">" only to the part of <nav>...</nav>, without affecting the rest of the document.
Problem: CMS-toolbar is hiding Navigation bar menus & it's now disabled(not moving up).
Django version = 3.0.8
Django cms = 3.8.0
I have base template and a home template. Here I am sharing base template code. What should I add to solve the issue?
<!-- this is base template -->
{% load static %}
{% load cms_tags menu_tags sekizai_tags static %} <!--load template libraries of Sekizai and CMS tag -->
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}"> <!-- in case you want other languages -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> {% page_attribute "meta_description" %} <!--should have description of pages-->
<meta name="author" content="">
<title>Smart Learn - {% page_attribute "page_title" %} </title> <!--In title page name should come first then website title -->
{% render_block "css" %} <!-- loading css here render_block comes with sekizai lib to allow templates to included-->
<!-- Bootstrap core CSS -->
{% addtoblock "css" %} <!--for sekizai tags -->
<link href="{% static "vendor/bootstrap/css/bootstrap.min.css" %}" rel="stylesheet">
{% endaddtoblock %}
<!-- Custom styles for this template -->
{% addtoblock "css" %}
<link href="{% static "css/smart-learn.css" %}" rel="stylesheet">
{% endaddtoblock %}
</head>
{% cms_toolbar %}<!-- from cms toobar -->
<body>
<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="/">Smart Learn</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
{% show_menu 0 100 100 100 %} <!-- for cms menu -->
<li class="nav-item">
<a class="#" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="#" href="services.html">Services</a>
</li>
</ul>
</div>
</div>
</nav>
{% block content %}{% endblock %}
<!-- Footer -->
<footer class="py-5 bg-dark">
{% static_placeholder "Footer" %}
</footer>
<!-- Bootstrap core JavaScript -->
{% addtoblock "js" %}
<script src= "{% static "vendor/jquery/jquery.min.js" %}"></script>
{% endaddtoblock %}
{% addtoblock "js" %}
<script src= "{% static "vendor/bootstrap/js/bootstrap.bundle.min.js" %}"></script>
{% endaddtoblock %}
{% render_block "js" %} <!--to put all js template designs on home -->
</body>
</html>
How can I convert that icon to arrow one which can be moved up and down easily?
This is what I have
This is what I need
Do you have any placeholder tag inside template?
{% block base_content %}
{% placeholder some_content %}
{% endblock %}
If not, navigation bar will be disabled.
Hi guys I'm developing an app in Symfony 3 which has a navbar. The navbar is extended on every page, and displays correctly on every page as seen. The navbar uses bootstrap's css for designing a navbar.
{% extends 'base.html.twig' %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('css/css/bootstrap.css') }}"/>
<link rel="stylesheet" href="{{ asset('css/illnessPage.css') }}"/>
{% endblock %}
{% block body %}
<div class="art">
<div class="container">
<h1>Arthritis Care</h1>
<p>You have signed up to the app with your specified illness being Arthritis.</p>
<p>Try exploring our app</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm">
<div class="column1">
Arthritis Care & Exercises
</div>
<img src="../images/arthritisHands.png" alt="Hands With Arthritis" height="300" width="350">
</div>
<div class="col-sm">
<div class="column2">
Arthritis Ireland
</div>
<img src="../images/artIreland.png" alt="Arthritis Ireland Logo" height="300" width="350">
</div>
<div class="col-sm">
<div class="column3">
Useful Numbers & Information
</div>
<img src="../images/redphone.png" alt="Red Phone" height="300" width="350">
</div>
</div>
</div>
{% endblock %}
And it works like this for every other page. But for this one page it is displaying the navbar's options, but not the css? Does anyone know the reason for this?
{# default/scheduler.html.twig #}
{% extends 'base.html.twig' %}
{% block stylesheets %}
<link rel='stylesheet' type='text/css' href='{{ asset("libraries/dhtmlx/codebase/dhtmlxscheduler_flat.css") }}' charset="utf-8"/>
<link rel="stylesheet" href="{{ asset('css/scheduler.css') }}"/>
{% endblock %}
{% block body -%}
<div id="scheduler_element" class="dhx_cal_container" style='width:100%; height:600px;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
{% endblock %}
{% block javascripts %}
<!-- Include the scheduler library -->
<script src='{{ asset("libraries/dhtmlx/codebase/dhtmlxscheduler.js") }}' type='text/javascript' charset="utf-8"></script>
<!-- Include jQuery to handle AJAX Requests -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Include Momentjs to play with the dates -->
<script src="{{ asset("libraries/momentjs/moment.js") }}"></script>
<script>
window.GLOBAL_APPOINTMENTS = {{ appointments|raw }};
window.GLOBAL_SCHEDULER_ROUTES = {
create: '{{ path("scheduler_create") }}',
update: '{{ path("scheduler_update") }}',
delete: '{{ path("scheduler_delete") }}'
};
window.GLOBAL_CATEGORIES = {{ categories|raw }};
</script>
<!-- Include the schedulerScripts that you will need to write in the next step -->
<script src='{{ asset("libraries/schedulerScripts.js") }}' type='text/javascript' charset="utf-8"></script>
{% endblock %}
The navbar twig template for reference
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
{% block title %}Health Centre Ireland{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('css/css/bootstrap.css') }}"/>
<link rel="stylesheet" href="{{ asset('css/styles.css') }}"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('redcross.ico') }}" />
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" a href="#">Health Centre Ireland</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarsExampleDDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{{ path('login') }}">Home <span class="sr-only"></span> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path ('scheduler') }}">Calender</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Message Board</a>
</li>
<li class="nav-item">
{% if app.user %}
<a class="nav-link" href="
{{ logout_path('main') }}">
Log Out</a>
{% else %}
<a class="nav-link" href="
{{ path ('login') }}">
Log In</a>
{% endif %}
<li class="nav-item">
{% if app.user %}
<a class="nav-link" href="{{ path('deleteuser') }}"> Delete Account</a>
{% endif %}
</li>
</ul>
<img class="redcross"
src="../images/redcross.png" height="40" width="40">
</div>
{% if app.session.flashBag.has('success') %}
<div class ="alert alert-success">
{% for msg in app.session.flashBag.get('success') %}
{{ msg }}
{% endfor %}
</div>
{% endif %}
</nav>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
In your template, your erase the content of the stylesheets block.
You have to call the {{ parent() }} twig function to inherit from the base template:
{% block stylesheets %}
{{ parent() }}
<link rel='stylesheet' type='text/css' href='{{ asset("libraries/dhtmlx/codebase/dhtmlxscheduler_flat.css") }}' charset="utf-8"/>
<link rel="stylesheet" href="{{ asset('css/scheduler.css') }}"/>
{% endblock %}
https://twig.symfony.com/doc/2.x/tags/extends.html#child-template
I have included django-allauth into my site. It works but no styles on account pages, although index.html, that extends 'base.html' as well renders normal styles.
I have project structure like this:
root
-myproject
-myapp
-templates/
base.html
index.html
....
--/accounts/
login.html
logout.html
.....
-static/
--admin/
---css
---js
---img
--static/
---css
---js
-media
my settings.py path:
TEMPLATE_DIRS = (os.path.join(BASE_DIR,"templates"),)
STATICFILES_DIRS = (os.path.join(BASE_DIR,"static"), )
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static", "admin")
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static', 'media')
base.html:
{% load staticfiles %}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Title</title>
<!-- Bootstrap core CSS -->
<link href="../static/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../static/static/css/sticky-footer-navbar.css" rel="stylesheet">
<link href="../static/static/css/starter-template.css" rel="stylesheet">
<link href="../static/static/css/smart_wizard.css" rel="stylesheet" >
<link href="../static/static/css/demo_style.css" rel="stylesheet" >
<link href="../static/static/css/progressbutton.css" rel="stylesheet" >
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Pul</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Account <b class="caret"></b>
<ul class="dropdown-menu">
{% if not request.user.is_authenticated %}
<li>Login</li>
<li>Sign Up</li>
{% else %}
<li>Logout</li>
{% endif %}
</ul>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav><br><br><br><br><br>
{% block head_title %}
{% endblock %}
{% block main_content %}
{% endblock main_content %}
{% block content %}
{% endblock %}
{% block step1 %}
{% endblock %}
{% block step2 %}
{% endblock %}
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="../static/static/js/jquery.min.js"></script>
<script src="../static/static/js/button_click.js"></script>
<script src="../static/static/js/bootstrap.min.js"></script>
<script src="../static/static/js/jquery.smartWizard.js"></script>
</body>
</html>
login.html:
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% load i18n %}
{% load account socialaccount %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block content %}
<div class = ' col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3'>
<h1>{% trans "login" %}</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">
<!-- connecting login with scial account -->
<!-- {% 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|crispy }}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<a class="btn btn-link button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
<button class="btn btn-default primaryAction" type="submit">{% trans "Sign In" %}</button>
</form>
</div>
{% endblock %}
I still can not figure out what strange issue it is. Please help!
You load staticfiles with {% load staticfiles %} but you don't use static template tag.
Replace all your asset links with {% static 'path/to/file.ext' %}
E.g :
replace
../static/static/css/sticky-footer-navbar.css
with this : (if your files is a global static files)
{% static 'app_name/css/sticky-footer-navbar.css' %}
with this : (if your files is an app static files)
{% static 'app_name/css/sticky-footer-navbar.css' %}
I recommend you to read carefully Django docs : Managing static files
I'm new to django and have a small problem, which I cannot resolve. I use django-allauth for authentification and twitter-bootstrap for front-page. I want to create a page which is different whether user is logged in or not. So in {% block header %} I check it to show the correct buttons. However, I don't get anything(no Home, News, Dashboard and Data) if I'm not logged in, and I see four of them if I log in. Please help!
{% 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_URL }}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>
{% block content %}
{% endblock %}
{% endblock %}
{% block extra_body %}
{% endblock %}
{% block footer %}
<footer>
<p>© Blog 2013</p>
</footer>
{% endblock %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/dist/js/bootstrap.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/affix.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/alert.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/modal.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/dropdown.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/scrollspy.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/tab.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/tooltip.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/popover.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/button.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/collapse.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/carousel.js"></script>
<script src="{{ STATIC_URL }}twitter_bootstrap/js/transition.js"></script>
You have a typo.
It's not "{%else}"; it's "{% else %}'.