Adding a Sidebar

Subscribe to Tech with Tim

YouTube

Adding a Sidebar

This django tutorial will show you how to create a simple static sidebar for your website. In future tutorial we will modify this and make it look better by adding some more custom css.

Modifying the Base Template

Since we have been extending all of our html templates from base.html all we need to do to add a sidebar is add it to the base template. Simple replace the code in your base template with the following and modify the elements in the sidebar to link to your own pages.

<html>
<head>
	<style type="text/css">
		.sidenav {
			height:100%;
			width:160px;
			position: fixed;
			z-index:1;
			top:0;
			left:0;
			background-color:#111;
			overflow-x: :hidden;
			padding-top:20px;
		}
 
		.sidenav a {
			padding:6px 8px 6px 16px;
			text-decoration: none;
			font-size:25px;
			color: #818181;
			display:block;
		}
 
		.sidenav a:hover{
			color:#f1f1f1;
		}	
 
		.main{
			margin-left:160px;
			padding: 0px 10px;
		}
 
	</style>
	<title>{% block title %}Tim's Site{% endblock %}</title>
</head>
 
<body>
	<div class="sidenav">
		<a href="/">Home</a>
		<a href="/create">Create</a>
		<a href="/2">View</a>
	</div>
 
	{% block content %}
	{% endblock %}
 
</body>
</html>

Setup, Installation & Page Navigation

SQLite3 Database Setup

User Registration & Sign Up

User Specific Pages & Data

Next lessonAdding Bootstrap

Design & Development by