Override the :root in html and css in django template - html

I'm working on a project and during it I had to use :root to set the font size. However I also need to override it in the next section and I can't seem to do it.
I used the root from the online template here.
However in the main section I failed to reset the html font size to 16px. This is my code:
layout.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}{% endblock %}</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="{% static 'cs50gram/styles.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
{% block style %}{% endblock %}
{% block script %}{% endblock %}
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light" id="nav-background">
<a class="navbar-brand" id="nav-brand" href="{% url 'index' %}">CS50gram</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
{% if user.is_authenticated %}
<div class="navbar-nav">
<a class="nav-item nav-link" href="{% url 'index' %}">Home </a>
<a class="nav-item nav-link" href="{% url 'explore' %}">Explore</a>
<a class="nav-item nav-link" href="{% url 'profile' request.user %}">Profile</a>
<a class="nav-item nav-link" href="{% url 'add-post' %}">Add Post</a>
</div>
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="{% url 'logout' %}">Logout</a>
</div>
{% else %}
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
<a class="nav-item nav-link" href="{% url 'register' %}">Register</a>
</div>
{% endif %}
</div>
</nav>
<div id="body">
{% block body %}
{% endblock %}
</div>
<!-- Bootstrap 4 CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
The main page where I want to reset the font-size in <main>:
{% extends 'cs50gram/layout.html' %}
{% load static %}
{% block title %}
Profile
{% endblock %}
{% block body %}
<header>
<div class="container">
<div class="profile">
<div class="profile-image">
<img src="https://pbs.twimg.com/profile_images/1313117763519606784/IkM0WYGt_400x400.jpg" alt="Profile Picture" width="150px">
</div>
<div class="profile-user-settings">
<h1 class="profile-user-name">{{ profile.user.username }}</h1>
{% if user.is_authenticated and request.user.username == profile.user.username %}
<button class="btn profile-edit-btn">Edit Profile</button>
{% elif user.is_authenticated and request.user.username != profile.user %}
<button class="btn profile-edit-btn">Follow</button>
{% endif %}
<!-- button class="btn profile-settings-btn" aria-label="profile settings"><i class="fas fa-cog" aria-hidden="true"></i></button -->
</div>
<div class="profile-stats">
<ul>
<li><span class="profile-stat-count">{{ profile.user.posts.count }}</span> posts</li>
<li><span class="profile-stat-count">188</span> followers</li>
<li><span class="profile-stat-count">{{ profile.followings.count }}</span> following</li>
</ul>
</div>
<div class="profile-bio">
<hr>
<h2 class="profile-real-name">{{ profile.user.first_name }} {{ profile.user.last_name }}</h2>
<hr>
<p> <b> Date Joined:</b> {{ profile.user.date_joined|date:"D d M Y" }}
{% if profile.birthdate %}
<span style="margin-left: 10px"> <b> BirthDate: </b> {{ profile.birthdate }}</span></p>
{% endif %}
{% if profile.gender %}
<p> <b> Gender: </b> {{ profile.gender }}</p>
{% endif %}
<hr>
{% if profile.bio %}
<p> {{ profile.bio }}</p>
{% endif %}
</div>
</div>
<!-- End of profile section -->
</div>
<!-- End of container -->
</header>
<main> <!-- Here I want to restore font-size to 16px -->
<div class="container">
{% for post in profile.user.posts.all %}
<div class="row justify-content-center mt-3">
<div class="col-md-6" style="background-color: #f4f6f6">
<!-- Username -->
<h5 class="mt-2"> #{{ post.posted_by }} </h5>
<!-- Post image -->
<img src="{{ post.image.url }}" class="img-fluid" width="550px">
<!-- Like Icon and Counter -->
<img data-id="{{post.id}}" id="post-like-{{post.id}}" class="liked"
{% if request.user in post.like.all %}
data-is_liked="yes"
src="https://img.icons8.com/ios-filled/32/fa314a/hearts.png"
{% else %}
data-is_liked="no"
src="https://img.icons8.com/windows/32/000000/like--v2.png"
{% endif %}
/> <span id="like-counter-{{post.id}}"> {{ post.like.count }} </span>
<!-- Comment icon and counter -->
<span class="comment-pointer" data-id="{{post.id}}" id="view-comments" data-toggle="modal" data-target="#exampleModalCenter">
<img src="https://img.icons8.com/windows/32/000000/speech-bubble--v1.png" class="comment-icon" /> <span id="comment-counter-{{post.id}}"> {{ post.comments.all.count }} </span>
</span>
<!-- Caption -->
{% if post.caption %}
<h5 class="mt-2"><strong>{{ post.posted_by }}</strong> {{ post.caption }}</h5>
{% endif %}
<!-- Date Posted -->
<h6 class="gray">Posted on {{ post.date_posted }}</h6>
<!-- Add Comment -->
<div class="input-group mb-3">
<input type="text" placeholder="Add Comment" id="post-comment-{{post.id}}" class="form-control mr-1">
<button class="btn btn-outline-dark comment" data-id="{{post.id}}" type="button">Add Comment</button>
</div>
<!-- Show comments -->
{% if post.comments.all %}
<!-- Gets the comments of each post based on the related_name -->
{% for comment in post.comments.all.reverse|slice:":2" %}
<div>
<b> {{ comment.commented_by }} </b>
<span class="gray"> {{ comment.comment }} </span>
</div>
{% endfor %}
<!-- Div to show recently added comment -->
<div id="recent_comment"></div>
<div class="text-center mb-2 view-all">
<a data-toggle="modal" data-id="{{post.id}}" id="view-comments" data-target="#exampleModalCenter">View all comments...</a>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</main>
{% endblock %}
{% block style %}
<link href="{% static 'cs50gram/profile.css' %}" rel="stylesheet">
{% endblock %}
Please note that the profile.css is taken from the link provided above.

Related

Why isn't my html style only applying to the body even though I am using block content?

So I am attempting to add a style for the body of my page but unfortunately it is applying to my navbar too which is coming from my base.html. What am I doing wrong here that it's applying to my navbar too? I only want it to apply the contents in <body>
messages.html
{% extends "dating_app/base.html" %}
{% load bootstrap4 %}
{% load static %}
<!DOCTYPE html>
<html>
<head>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block content %}
<style>
body {
margin: 0 auto;
max-width: 800px;
padding: 0 20px;
}
.container {
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
.darker {
border-color: #ccc;
background-color: #ddd;
}
.container::after {
content: "";
clear: both;
display: table;
}
.container img {
float: left;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
.container img.right {
float: right;
margin-left: 20px;
margin-right:0;
}
.time-right {
float: right;
color: #aaa;
}
.time-left {
float: left;
color: #999;
}
</style>
<body>
Start messaging!
<h2>Chat Messages</h2>
{% for message in messages %}
{% if message.sender_id == request.user.id %}
<div class="container">
<img src="{{ profile.photo.url }}" alt="Avatar" style="width:100%;">
<p>{{ message.message }}</p>
<span class="time-right">{{ message.date }}</span>
</div>
{% elif message.sender_id == other_user.id %}
<div class="container">
<img src="/w3images/bandmember.jpg" alt="Avatar" class="right" style="width:100%;">
<p>{{ message.message }}</p>
<span class="time-left">{{ message.date }}</span>
</div>
{% endif %}
<!--
{% if message.sender_id == request.user.id %}
<li class="text-right list-group-item"> {{ message.message }}<br>{{ message.date }} </li>
{% elif message.sender_id == other_user.id %}
<li class="text-left list-group-item"> {{ message.message }}<br>{{ message.date }} </li>
{% endif %}
-->
{%endfor %}
</body>
{% endblock content %}
</html>
base.html
{% load bootstrap4 %}
{% load static %}
{% load unread_messages_counter %}
<!-- Navbar is located in this file -->
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
{% block head %}
<title>Base</title>
{% endblock %}
<link rel="stylesheet" href="{% static 'css/style.css' %}"/>
<link rel="stylesheet" href="{% static 'css/notification.css' %}" type="text/css" class = "notification"/>
<style>
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-expand-md ">
<div class="container-fluid">
<a class= 'navbar-brand' href="{% url 'dating_app:home' %}"><img src="{% static 'images/cupids_corner_logo.jpg' %}"><h5 style="color:red"></h5> </a>
<button class= "navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" >
<ul class ="navbar-nav ml-auto" >
{% if user.is_authenticated %}
{% unread_messages request.user as user_unread_messages %}
{% if user_unread_messages > 0 %}
<li class="nav-item" >
<a class= "notification" style="color:brown" href="{% url 'dating_app:conversations' user.id %}" type="text/css" >
<span>Inbox</span>
<span class="badge">{% unread_messages request.user %}</span>
</a>
</li>
{% else %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:conversations' user.id %}">
<span>Inbox</span>
</a>
</li>
{% endif %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:view_matches' user.id %}">Matches</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:mingle' %}">Mingle</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:profile' user.id %}">My Profile</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:logout' %}">log out</a>
</li>
{% else %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:login' %}">login</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:register' %}">register</a>
</li>
{% endif %}
</ul>
</div>
<div>
</nav>
</div>
<!-- HEADER END -->
<!--Below is individual page will html will be rendered -->
{% block content %}
{% endblock %}
<hr class="my-4">
<!--Connect -->
<div class="container-fluid padding">
<div class="row text-center padding">
<div class="col-12">
<h2>Connect</h2>
</div>
<div class="col-12 social padding">
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</div>
<!-- FOOTER AREA BEGINS BELOW-->
<footer>
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<img src="{% static 'images/cupids_corner_logo.jpg' %}">
<hr class="light">
<p>703-309-9572</p>
<p>rezazandirz#gmail.com</p>
<p>100 Street Name</p>
<p>City, State, 000</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Our hours</h5>
<hr class="light">
<p>Monday: 9am-5pm</p>
<p>Saturday: 10am-4pm</p>
<p>Sunday: closed(like Chick-fil-A)</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Our satellite offices</h5>
<hr class="light">
<p>City, State, 00000</p>
<p>City, State, 00000</p>
<p>City, State, 00000</p>
</div>
<div class="col-12">
<hr class="light-100">
<h5>©CupidsCorner.com</h5>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>

Lets correct base.html
{% load bootstrap4 %}
{% load static %}
{% load unread_messages_counter %}
<!-- Navbar is located in this file -->
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
{% block head %}
<title>Base</title>
{% endblock %}
<link rel="stylesheet" href="{% static 'css/style.css' %}"/>
<link rel="stylesheet" href="{% static 'css/notification.css' %}" type="text/css" class = "notification"/>
<style>
<!-- Add this tag -->
{% block styles %}
{% endblock %}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-expand-md">
<div class="container-fluid">
<a class= 'navbar-brand' href="{% url 'dating_app:home' %}"><img src="{% static 'images/cupids_corner_logo.jpg' %}"><h5 style="color:red"></h5> </a>
<button class= "navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" >
<ul class ="navbar-nav ml-auto" >
{% if user.is_authenticated %}
{% unread_messages request.user as user_unread_messages %}
{% if user_unread_messages > 0 %}
<li class="nav-item" >
<a class= "notification" style="color:brown" href="{% url 'dating_app:conversations' user.id %}" type="text/css" >
<span>Inbox</span>
<span class="badge">{% unread_messages request.user %}</span>
</a>
</li>
{% else %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:conversations' user.id %}">
<span>Inbox</span>
</a>
</li>
{% endif %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:view_matches' user.id %}">Matches</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:mingle' %}">Mingle</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:profile' user.id %}">My Profile</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:logout' %}">log out</a>
</li>
{% else %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:login' %}">login</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:register' %}">register</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<!-- HEADER END -->
<!--Below is individual page will html will be rendered -->
{% block content %}
{% endblock %}
<hr class="my-4">
<!--Connect -->
<div class="container-fluid padding">
<div class="row text-center padding">
<div class="col-12">
<h2>Connect</h2>
</div>
<div class="col-12 social padding">
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</div>
<!-- FOOTER AREA BEGINS BELOW-->
<footer>
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<img src="{% static 'images/cupids_corner_logo.jpg' %}">
<hr class="light">
<p>703-309-9572</p>
<p>rezazandirz#gmail.com</p>
<p>100 Street Name</p>
<p>City, State, 000</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Our hours</h5>
<hr class="light">
<p>Monday: 9am-5pm</p>
<p>Saturday: 10am-4pm</p>
<p>Sunday: closed(like Chick-fil-A)</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Our satellite offices</h5>
<hr class="light">
<p>City, State, 00000</p>
<p>City, State, 00000</p>
<p>City, State, 00000</p>
</div>
<div class="col-12">
<hr class="light-100">
<h5>©CupidsCorner.com</h5>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
Now, messages.html:
{% extends "dating_app/base.html" %}
{% load bootstrap4 %}
{% load static %}
{% block head %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
{% endblock %}
{% block styles %}
body {
margin: 0 auto;
max-width: 800px;
padding: 0 20px;
}
.container {
border: 2px solid #dedede;
background-color: #f1f1f1;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
.darker {
border-color: #ccc;
background-color: #ddd;
}
.container::after {
content: "";
clear: both;
display: table;
}
.container img {
float: left;
max-width: 60px;
width: 100%;
margin-right: 20px;
border-radius: 50%;
}
.container img.right {
float: right;
margin-left: 20px;
margin-right:0;
}
.time-right {
float: right;
color: #aaa;
}
.time-left {
float: left;
color: #999;
}
{% endblock %}
{% block content %}
Start messaging!
<h2>Chat Messages</h2>
{% for message in messages %}
{% if message.sender_id == request.user.id %}
<div class="container">
<img src="{{ profile.photo.url }}" alt="Avatar" style="width:100%;">
<p>{{ message.message }}</p>
<span class="time-right">{{ message.date }}</span>
</div>
{% elif message.sender_id == other_user.id %}
<div class="container">
<img src="/w3images/bandmember.jpg" alt="Avatar" class="right" style="width:100%;">
<p>{{ message.message }}</p>
<span class="time-left">{{ message.date }}</span>
</div>
{% endif %}
<!--
{% if message.sender_id == request.user.id %}
<li class="text-right list-group-item"> {{ message.message }}<br>{{ message.date }} </li>
{% elif message.sender_id == other_user.id %}
<li class="text-left list-group-item"> {{ message.message }}<br>{{ message.date }} </li>
{% endif %}
-->
{%endfor %}
{% endblock content %}
I have added styles block to add styles. And there was extra ```</div>```. Please check.

Django and HTML: Problem with Extra Space Around Navigation Bar

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 %}

Symfony 3 - Navbar showing correctly on every page but one?

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

how to make a Vertical menu bar in Buycraft

I am trying to make a vertical menu bar on the left of the buycraft shop, however I sadly do not know the css for this, I would appreciate help. The menu bar should look something like this
This is to be used for a 'Buycraft' shop page.
My code:
<!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">
<title>{{ store.name }} | {{ page.title }}</title>
<link href="/templates/209/css/style.min.css" rel="stylesheet">
<link rel="shortcut icon" href="/templates/209/img/favicon.ico">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36735942-3']);
_gaq.push(['_trackPageview']);
{% if store.googleAnalytics %}
_gaq.push(['b._setAccount', '{{ store.googleAnalytics }}']);
_gaq.push(['b._trackPageview']);
{% endif %}
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<style>{{ store.css|raw }}</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
{% if store.logo %}
<img src="{{ store.logo }}" />
{% else %}
<span>{{ store.name }}</span>
{% endif %}
</div>
<div class="buttons">
<div class="toolbar">
<div class="logout">
{% if basket.username %}
{{ lang("button.logout") }}
{% endif %}
</div>
<div class="currency">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
{{ basket.currency }} <span class="fa fa-caret-down"></span>
</button>
<ul class="dropdown-menu" role="menu">
{% for currency in store.currencies %}
{% if currency.code in [store.currency, "AUD", "BRL", "CAD", "DKK", "EUR", "NOK", "NZD", "GBP", "SEK", "USD", "PLN"] %}
<li {% if basket.currency == currency.code %}class="active"{% endif %}>
{{ currency.code }}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="basket">
{% if basket.packages|length > 0 %}
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
{{ lang("basket.count", basket.packages|length, basket.price|money, basket.currency) }} <span class="fa fa-caret-down"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
{% for package in basket.packages %}
<li class="item">
<div class="name">{{ package.name[:25] }}</div>
<div class="price">{{ package.price|money }} <small>{{ basket.currency }}</small></div>
<div class="remove"><span class="fa fa-times"</span></div>
</li>
{% endfor %}
<li class="checkout">
<div class="total"><b>{{ lang("basket.total") }}:</b> {{ basket.price|money }} <small>{{ basket.currency }}</small></div>
<div class="button">Checkout</div>
</li>
</ul>
{% else %}
<i class="icon-shopping-cart icon-white"></i> {{ lang("basket.count", 0, 0.00, basket.currency) }}
{% endif %}
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">{{ store.name }}</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="{% if page.category == "index" %}active{% endif %}">{{ lang("category.home") }}</li>
{% for category in store.categories %}
{% if category.subcategories|length > 0 %}
<li class="dropdown {% if category.active %}active{% endif %}">
{{ category.name }} <i class="fa fa-caret-down"></i>
<ul class="dropdown-menu">
{% for subcategory in category.subcategories %}
<li>{{ subcategory.name }}</li>
{% endfor %}
</ul>
{% else %}
<li class="{% if category.active %}active{% endif %}">{{ category.name }}</li>
{% endif %}
{% endfor %}
{% if basket.packages|length > 0 %}
<li class="visible-xs {% if page.category == "checkout" %}active{% endif %}">Checkout</li>
{% endif %}
{% if basket.username %}
<li class="visible-xs">Logout</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<div class="notification">
{% if page.message.display %}
<div class="alert alert-{{ page.message.type}} alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
{{ page.message.text }}
</div>
{% endif %}
</div>
{% block content %}{% endblock %}
{% if store.plan == "1" %}
<div class="advertisement">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px;" data-ad-client="ca-pub-9830135219921132" data-ad-slot="7404819681"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
{% endif %}
<div class="footer">
<div class="language">
<div class="dropdown dropup">
<span class="fa fa-globe"></span> Language
<ul class="dropdown-menu up">
{% for language in store.languages %}
<li>{{ language.name }}</li>
{% endfor %}
</ul>
</div>
</div>
{% if store.branding or store.plan != "3" %}
<div class="branding">
<!-- Do not remove the Buycraft branding if you are not on the Ultimate Plan. Your account will be deleted. -->
Powered by Buycraft.net
</div>
{% endif %}
</div>
</div>
<div class="modal" id="popup-modal" tabindex="-1" role="dialog"></div>
{% if page.category == "checkout" %}
<script src="https://wallet.google.com/inapp/lib/buy.js"></script>
<script src="https://js.stripe.com/v2/"></script>
{% endif %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/templates/209/js/bootstrap.min.js"></script>
<script src="/templates/209/js/skin.min.js"></script>
<script src="/templates/209/js/site.js"></script>
</body>
</html>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a:link, a:visited {
display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #7A991A;
}
</style>

Django allauth + twitter bootstrap, request.user.is_authenticated doesn't show correct navbar

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 %}'.