HTML CSS: Adding in new lines - python

I am following the tutorial/code described here. The specific code in question is this part:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Harrison Kinsley</title>
<meta charset="utf-8" />
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<style type="text/css">
html,
body {
height:100%
}
</style>
</head>
<body class="body" style="background-color:#f6f6f6">
<div class="container-fluid" style="min-height:95%; ">
<div class="row">
<div class="col-sm-2">
<br>
<center>
<img src="{% static 'personal/img/profile.jpg' %}" class="responsive-img" style='max-height:100px;' alt="face">
</center>
</div>
<div class="col-sm-10">
<br>
<center>
<h3>Programming, Teaching, Entrepreneurship</h3>
</center>
</div>
</div><hr>
<div class="row">
<div class="col-sm-2">
<br>
<br>
<!-- Great, til you resize. -->
<!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">-->
<div class="well bs-sidebar" id="sidebar" style="background-color:#fff">
<ul class="nav nav-pills nav-stacked">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</div> <!--well bs-sidebar affix-->
</div> <!--col-sm-2-->
<div class="col-sm-10">
<div class='container-fluid'>
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid" style='margin-left:15px'>
<p>Contact | LinkedIn | Twitter | Google+</p>
</div>
</footer>
</body>
</html>
When I run this code, the links to 'Home', Blog' and 'Content' pages are all on one line, with no spaces between them (i.e. the links are like this: HomeBlogContent).
I want them to look like:
Home
Blog
Content
When I add this line into the code:
<p>This is<br>a paragraph<br>with line breaks</p>
The output is as expected:
This is
a paragraph
with line breaks
When I replace the strings in this line, like this:
<p><li><a href='/'>Home</a></li><br>li><a href='/blog/'>Blog</a></li><br>li><a href='/contents/'>Contents</a></li></p>
I would have hoped that solved my problem, but it doesn't. Can someone tell me where I'm going wrong, how can I get the Home, Blog and Content links to print on separate lines? Thanks.


You are missing the left bracket for your <li> tags.
Or if you're not a noob just get rid of those <br> tags. <li> will go to next line automatically.
nav {
display: flex;
flex-direction: column;
}
<nav>
<a href='/'>Home</a>
<a href='/blog/'>Blog</a>
<a href='/contents/'>Contents</a>
</nav>


Your markup looks good to me in the original file. However, from the problem you are describing sounds like there is something wrong with how you are importing Bootstrap 3 into this file. Check that you have the file bootstrap.min.css where you say you have it under personal/css/bootstrap.min.css


This should work.
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/contents/'>Contents</a></li>
</ul>

Related

my navbar dropdown menu is not working in django project using bootstrap4

Building my first Django app from a tutorial, following the instructions pretty much verbatim but my navbar dropdown menu is not working & im unable to logout or change password.
Here is my base.html file i don't know html i copy this code from tutorial & maybe I'm messing anything please take a look & help me to solve the problem, Thank You :)
<!-- templates/base.html -->
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81i\
uXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<title>{% block title %}Bk - Newspaper App {% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="{% url 'home' %}">Bk-Styles-007</a>
{% if user.is_authenticated %}
<ul class="navbar-nav mr-auto">
<li class="nav-item">+ New</li>
</ul>
{% endif %}
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
{% if user.is_authenticated %}
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="userMenu">
<a class="dropdown-item"
href="{% url 'password_change' %}">Change password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">
Log Out</a>
</div>
</li>
</ul>
{% else %}
<form class="form-inline ml-auto">
<a href="{% url 'login' %}" class="btn btn-outline-secondary">
Log In</a>
<a href="{% url 'signup' %}" class="btn btn-primary ml-2">
Sign up</a>
</form>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-8i/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+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAKl8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ/6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
**I update to
<li class="nav-item dropdown">
but still facing same problem.
.**

I was not able to reproduce your problem in its entirety, but your li tag in line 20 (right after {% if user.is_authenticated %}) is missing a class from bootstrap called dropdown.
So in line 20 instead of
<li class="nav-item">
Should be
<li class="nav-item dropdown">
If that doesn't fully solve your problem, I suggest you edit your question and add the entire code (maybe you didn't import the Bootstrap Javascript? I'm not able to know with just this code snippet).
EDIT
Ok, since you posted your entire code I found what is wrong with it. As suspected, the javascript code was not being imported correctly, because your SHA hashes from the scripts tag, parameter integrity are invalid. This is a really important feature to guarantee that you're importing the right code from a CDN (not some malicious code). Since you're following a tutorial, you probably got a hash that's no longer valid.
I recommend getting the most up to date version of Bootstrap 4 from their site (at the time of writing, it's 4.5). Replace your imports by these and it should work. To save you some time, I've copied the new info:
CSS:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
JS:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
If you really need the 4.1.3 version of Bootstrap, you can find it in this site, but my guess is that you don't. Prefer the most up to date version.

How to load background image from style.css in django framework

`
.testimonials {background: url('./images/s8.png'); padding:55px 0; overflow:hidden; }
`Am using django 2.1 having a problem in displaying a background image which is styled in my css folder
I have tried several ways like
.testimonials {background: url("/static/images/s8.png"); padding:55px 0; overflow:hidden; }
and having an inline customization both didn't work please help
<div class="testimonials" style="background: url({% static "images/s8.jpg" %})">

Using a background image in CSS file doesn't require a static block. Just make sure you have path correctly matched with your folders. Use ./ to go back in path mapping.
css/base.css
images/slide1Back.png
My CSS file was in CSS folder and images were in the images folder. So I used this.
background-image: url('./images/slide1Back.png');

First of all, make sure you added this line to your html file:
{% load staticfiles %}
then put this to your settings.py:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
now everythings work like what!
UPDATE
Here is my profile.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Profile</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<!-- SUBHEADER -->
<div id="subheader" class="about">
<div class="subheader-text">
<h1>A unique cloud hosting provider</h1>
<h2>Our efforts and focus are always directed to our clients and their needs</h2>
</div>
</div>
<!-- END OF SUBHEADER -->
</body>
</html>
and my style.css
#subheader.about {
background: url("../images/s8.jpg") center center no-repeat;
padding: 100px 25px;
}
#subheader.about:after {
background: rgba(34, 43, 50, .9);
bottom: 0px;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
please attention, i used ../ instead of ./
and this is my tree:
tree
and this is result:
result view

Am using this template here as about.html
{% extends "base.html" %}
{% load static %}
{% block Content %}
<!-- SUBHEADER -->
<div id="subheader" class="about">
<div class="subheader-text">
<h1>A unique cloud hosting provider</h1>
<h2>Our efforts and focus are always directed to our clients and their needs</h2>
</div>
</div>
<!-- END OF SUBHEADER -->
<!-- DESCRIPTION -->
<div class="about-descr">
<div class="row">
<div class="col-sm-12 col-md-10 center-block">
<h3>WHAT ARE WE ALL ABOUT?</h3>
<div class="titleborder centered">
<div class="titleborder_left"></div>
<div class="titleborder_sign"></div>
<div class="titleborder_right"></div>
</div>
</div>
</div>
<div class="row spacing-25">
<div class="col-sm-12 col-md-7">
<img src="images/about-us.jpg" alt=""/>
</div>
<div class="col-sm-12 col-md-5">
<p class="topspacing">We work hard to provide Maelezo mazuri huwajenga wengine kutanikoni. (Ro 14:19) Pia, yanawanufaisha wale wanaotoa maelezo. (Met 15:23, 28) Kwa hiyo, tunapaswa kujitahidi kutoa maelezo angalau mara moja kila mkutano. Bila shaka, hatutachaguliwa kutoa maelezo kila wakati tunapoinua mkono. Kwa hiyo, ni muhimu kutayarisha majibu kadhaa. </p>
<p>Maelezo mazuri huwajenga wengine kutanikoni. (Ro 14:19) Pia, yanawanufaisha wale wanaotoa maelezo. (Met 15:23, 28) Kwa hiyo, tunapaswa kujitahidi kutoa maelezo angalau mara moja kila mkutano. Bila shaka, hatutachaguliwa kutoa maelezo kila wakati tunapoinua mkono. Kwa hiyo, ni muhimu kutayarisha majibu kadhaa..</p>
</div>
</div>
</div>
<!-- END OF DESCRIPTION -->
<!-- ABOUT ICONS -->
<div class="about-icons">
<div class="row">
<div class="col-sm-3"><img src="images/icon17.png" alt=""/><p>CHOOSE</p></div>
<div class="col-sm-3"><img src="images/icon18.png" alt=""/><p>SCALE</p></div>
<div class="col-sm-3"><img src="images/icon19.png" alt=""/><p>LAUNCH</p></div>
<div class="col-sm-3"><img src="images/icon20.png" alt=""/><p>USE</p></div>
</div>
</div>
<!-- END OF ABOUT ICONS -->
{% endblock Content%}
and this is my css
======================== */
#subheader.about {background: url("../images/s8.jpg") center center no-repeat; padding:100px 25px;}
#subheader.about:after { background: rgba(34,43,50,.9); bottom: 0px; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 1; }
Can tell where is the mistake or am missing something here
here is the path to image projects/djangoprojects/static/images/s8.jpg

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content=" ">
<meta name="keywords" content="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>| Web | Software </title>
<link rel="shortcut icon" href="{% static "images/favicon.png" %}" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Bootstrap & Styles -->
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/bootstrap-theme.min.css" %}" rel="stylesheet">
<link href="{% static "css/block_grid_bootstrap.css" %}" rel="stylesheet">
<link rel="stylesheet" href="{% static "css/owl.carousel.css" %}">
<link rel="stylesheet" href="{% static "css/owl.theme.css" %}">
<link rel="stylesheet" href="{% static "css/animate-custom.css" %}">
<link rel="stylesheet" href="{% static "css/flexslider.css" %}">
<link rel="stylesheet" href="{% static "css/font-awesome.min.css" %}">
<link rel="stylesheet" href="{% static "css/slicknav.min.css" %}">
<link href="{% static "css/style.css" %}" rel="stylesheet">
</head>
<body>
<!-- TOP NAV -->
<div class="topmenu">
<div class="row">
<div class="col-sm-3">
<ul class="top left">
<li><i class="fa fa-phone"></i>+666666666 Call us</li>
</ul>
</div>
<div class="col-sm-9">
<ul class="topright">
<li><i class="fa fa-unlock-alt"></i> CLIENT AREA</li>
<li><i class="fa fa-commenting-o"></i> LIVE CHAT</li>
<li><i class="fa fa-hand-pointer-o"></i> Support</li>
</ul>
</div>
</div>
</div>
<!-- END OF TOP NAV -->
<!-- HEADER -->
<div class="header">
<div class="row">
<div class="col-sm-3">
<div class="logo">
<a href="/"><img src="{% static "images/logo.png" %}" alt="" />
</a>
</div>
</div>
<div class="col-sm-9">
<nav id="desktop-menu">
<ul class="sf-menu" id="navigation">
<li class="current">Home
<ul>
<li>Billing</li>
<li>Web Design</li>
</ul>
</li>
<li>Hosting
<ul>
<li>Shared Hosting</li>
<li>Cloud VPS</li>
</ul>
</li>
<li>Domains</li>
<li>Pages
<ul>
<li>About</li>
<li>FAQ</li>
<li>Datacenter</li>
</ul>
</li>
<li>Blog
<ul>
<li>hosting tips</li>
<li>Facebook</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- END OF HEADER -->
{% block Content %}
{% endblock Content %}
<!-- FOOTER -->
<div class="footer">
<div class="row">
<div class="col-sm-3">
<h4>CLOUD HOSTING</h4>
<ul>
<li>cPanel Hosting</li>
<li>Shared Hosting</li>
<li>Cloud VPS</li>
<li>WordPress Hosting</li>
</ul>
</div>
<div class="col-sm-3">
<h4>HOSTING FOR APPS</h4>
<ul>
<li>WordPress Hosting</li>
<li>Joomla Hosting</li>
<li>Drupal Hosting</li>
<li>Magento Hosting</li>
</ul>
</div>
<div class="col-sm-3">
<h4>COMPANY</h4>
<ul>
<li>About Us</li>
<li>Privacy Policy</li>
<li>Acceptable Usage Policy</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div class="col-sm-3">
<h4>NEWSLETTER SIGNUP</h4>
<div id="mc_embed_signup">
<form class="form-inline validate material" action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<input id="mce-EMAIL" type="email" name="EMAIL" placeholder="E-mail" required>
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_b5638e105dac814ad84960d90_9345afa0aa" tabindex="-1" value="">
</div>
<input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="mtr-btn button-blue">
</form>
</div>
</div>
</div>
</div>
<!-- END FOOTER -->
<!-- SOCIAL & COPYRIGHT -->
<div class="social">
<div class="row">
<div class="col-sm-12">
<ul class="social-links">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-linkedin"></i></li>
<li><i class="fa fa-pinterest-p"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-github-alt"></i></li>
</ul>
<p class="text-center">Copyright© . All rights reserved.</p>
</div>
</div>
</div>
<!-- END OF SOCIAL & COPYRIGHT -->
<!-- LOGIN MODAL -->
<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="LoginModal">
<div class="modal-dialog" role="document">
<form method="post" action="#" class="material">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><i class="fa fa-lock"></i>LOGIN TO YOUR ACCOUNT</h4>
</div>
<div class="modal-body">
<input type="text" name="username" placeholder="E-mail Address">
<input type="password" name="password" placeholder="Password">
<button type="submit" class="mtr-btn button-fab">LOGIN</button>
</div>
</div>
</form>
</div>
</div>
<!-- END OF LOGIN MODAL -->
<i class="fa fa-angle-up"></i>
<script src="{% static "js/jquery.min.js" %}"></script>
<script src="{% static "js/bootstrap.min.js" %}"></script>
<script src="{% static "js/jquery.flexslider-min.js" %}"></script>
<script src="{% static "js/jquery.easing.1.3.js" %}"></script>
<script src="{% static "js/hoverIntent.js" %}"></script>
<script src="{% static "js/superfish.min.js" %}"></script>
<script src="{% static "js/owl.carousel.js" %}"></script>
<script src="{% static "js/ripple-effect.js" %}"></script>
<script src="{% static "js/wow.min.js" %}"></script>
<script src="{% static "js/jquery.form.min.js" %}"></script>
<script src="{% static "js/jquery.slicknav.min.js" %}"></script>
<script src="{% static "js/retina.min.js" %}"></script>
<script src="{% static "js/custom.js" %}"></script>
</body>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5933bc17b3d02e11ecc6824e/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
</html>

login_required decorator in Django doesn't work

I'm working on a Django(1.10) project in which I need to load a template only for logged in users, which is coming from profile template.I need to load generateCert.html only for logged in user, this template should display the same navbar as profile template because both of these templates have the same header.
Here's my generateCert.html template:
{% load staticfiles %}
{% load static from staticfiles %}
{% load mathfilters %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NAMI Montana | User's Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content=""/>
<meta name="author" content="http://webthemez.com"/>
<!-- css -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"/>
<link href="{% static 'css/fancybox/jquery.fancybox.css' %}" rel="stylesheet">
<link href="{% static 'css/flexslider.css' %}" rel="stylesheet"/>
<link href="{% static 'css/style.css' %}" rel="stylesheet"/>
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
<!--Pulling Awesome Font -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]><![endif]-->
<style>
input[type="image"] {
padding-left: 30%;
padding-top: 5%;
font-size: 1em;
color: #fff;
background: transparent;
border: 1px solid #fff;
font-weight: bold;
width: 70%;
}
</style>
</head>
<body>
<div class="topbar">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="pull-left hidden-xs"><i class="fa fa-envelope"></i><span>matt#namimt.org </span></p>
<p class="pull-right"><i class="fa fa-phone"></i>Tel No. (406) 443-7871</p>
</div>
</div>
</div>
</div>
<!-- start header -->
<header>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<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="{% url 'home' %}"><img src="{% static 'images/logo.png' %}" alt="logo"
width="190px" height="50px;"/></a>
</div>
<div class="navbar-collapse collapse ">
<ul class="nav navbar-nav">
{% if not user.is_authenticated %}
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Login</li>
<li>SignUp</li>
<li>Contact</li>
{% endif %}
{% if user.is_authenticated %}
<li>Home</li>
<li>Dashboard</li>
<li class="active">Profile</li>
<li>Logout</li>
<li>Contact</li>
{% endif %}
</ul>
</div>
</div>
</div>
</header>
<!-- end header -->
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8" style="margin-top: 5%">
<div class="panel panel-default">
<div class="panel-heading">
<h4> You have to pay <b> $95 </b> to generate your certificate.</h4>
</div>
{% block content %}
{{ form.render }}
{% endblock %}
</div>
</div>
</div>
</div>
{% include 'footer.html' %}
Here are my views.py:
#login_required
def payment_process(request):
if request.user.is_authenticated():
minutes = int(request.user.tagging.count()) * 5
testhours = minutes / 60
hours = str(round(testhours, 3))
# pdb.set_trace()
# What you want the button to do.
invoice = generate_cid()
paypal_dict = {
"business": settings.PAYPAL_RECEIVER_EMAIL,
"item_name": "Certificate of Completion from Nami Montana",
"custom": {"name": str(request.user.first_name + ' ' + request.user.last_name),
"hours": str(hours)},
"invoice": str(invoice),
"amount": "5.00",
"notify_url": "https://8bf57d43.ngrok.io/users/paypal/",
# "return_url": "https://b906ef46.ngrok.io/users/profile/",
"cancel_return": "https://8bf57d43.ngrok.io/users/cancel/",
}
print(paypal_dict)
# Create the instance.
form = PayPalPaymentsForm(initial=paypal_dict)
context = {"form": form}
return render_to_response("users/generateCert.html", context)
else:
return HttpResponseRedirect('/users/login')
Here is my urls.py:
url('^process/$', views.payment_process, name='payment'),
generateCert.html template display the menu of Anonymous users not logged in users menu, that means this template loaded by the unauthenticated user. How can I strict this template to only logged in users as it's coming from the profile page.

No, it doesn't mean that at all. What it does mean is that you are not passing the user to the template. This is because you are using render_to_response - which apart from anything else is deprecated - rather than the render shortcut which runs context processors.
Note, your login_required decorator makes that if request.user.is_authenticated() check pointless; the user will never not be authenticated.
Also note that you really should be using template inheritance to break out things like the top nav and the HTML boilerplate into their own templates.

can't get rid of gap between header and body

I have tried everything from editing padding/margins to saving file as utf-8 without BOM in notepad suggested in other posts to get his gap to go away. Nothing is seems to work so I come to ask for help.
I am developing this webpage using python/django framework in which my base.html file looks like this
{% load bootstrap3 %}
<!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>Michael Goytia</title>
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Static navbar -->
<nav class="navbar navbar-custom navbar-static-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">
<!-- put three little bars in toggle button-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'personal_info:index' %}"style="color:#6C9F9F"><i class="fa fa-user-secret"></i>
<b>Michael Goytia</b></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="{% url 'personal_info:about_me' %}"style="color:#6C9F9F"><i class="fa fa-user-circle-o"></i>
<b>About Me</b></a>
</li>
<li><a href="{% url 'personal_info:projects' %}"style="color:#6C9F9F"><i class="fa fa-paper-plane"></i>
<b>Projects</b></a>
</li>
<li><a href="{% url 'personal_info:contact' %}"style="color:#6C9F9F"><i class="fa fa-address-book"></i>
<b>Contact Information</b></a>
</li>
</ul>
</div><!--/.nav-collaspse -->
</div>
</nav>
<div class="container">
<div class="page-header">
{% block header %}{% endblock header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</div><!-- /container -->
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<style>
.navbar-custom
{
background:#013737;
border-radius:0;
}
.navbar-toggle .icon-bar
{
background-color:#6C9F9F;
}
.navbar-header .navbar-toggle
{
background-color:#0F5151;
}
footer{
background:#013737;
position:fixed;
left:0px;
bottom:0px;
height:80px;
width:100%;
}
body{
background:#438383;
padding: 0;
margin: 0;
}
.nav > li >a:hover{
background-color:#256A6A;
}
</style>
</body>
<footer>
</footer>
</html>
I believe the problem resides in my base.html file however here is a sample html of another page that use base.html
{% extends "personal_info/base.html" %}
{% block content %}
<h1><b><u>Projects</u></b><h1>
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Github Information</center></b>
</h1>
</div>
<div class="panel-body">
<div class="github-card" data-github="goytia54" data-width="400" data-height="150" data-theme="default"></div>
<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
</div>
</div> <!--panel -->
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Academic</center></b>
</h1>
</div>
<div class="panel-body">
</div>
</div> <!--panel -->
<div class="panel panel-custom">
<div class="panel-heading">
<h1>
<b><center>Personal</center></b>
</h1>
</div>
<div class="panel-body">
</div>
</div> <!--panel -->
<style>
.panel-custom .panel-heading{
background-color:#013737;
color:#6C9F9F;
border-radius: 50px 15px;
}
.panel-custom
{
background-color:#438383;
}
</style>
{% endblock content %}
I am new to web development so any help would me much appreciated.

Alright well after playing around with a bunch of things I realized somehow I had a border around my header. So in order to get rid of it I added the line
.container .page-header { border-bottom: 0px:} which then got rid of this border.
Not sure why the border was there in the first place.
If anyone comes along I hope this helps.

Why bootstrap doesn't work although I have loaded it, etc. (Django project)?

I'm working on this Django project. The functionality works perfectly fine. When I started working on the front-end using Bootstrap3, I ran into some issues (more like confusions).
First, I installed django-bootstrap3 using command prompt like so:
pip install django-bootstrap3
The installation was successful. Bootstrap3 was downloaded into this location in my computer c:\python34\lib\site-packages Then, I included it as a third-party app in settings.py in the list of INSTALLED_APPS in my main project directory like so:
INSTALLED_APPS =(
--apps--
'bootstrap3',
)
Also in settings.py, I included jQuery like so:
BOOTSTRAP3 = {'include_jquery': True}
I modified my base.html to include the bootstrap elements. I have two apps, users and mynotess (sorry for bad naming)
base.html
EDIT: base.html is at the bottom of question.
For some reason, I loaded up localhost:8000 and it was still in the normal ugly HTML form. I checked online, and I found some CDN links and thought maybe if I just used the CDN links, it would work.
I then included this in base.html, copied right from Bootstrap's website.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
(I included the links in the head section and the scripts in the body section of the HTML document).
It worked! However, when I removed the bootstrap3 from my INSTALLED_APPS and all the code that loads up bootstrap3 that was installed on my computer (such as {% load bootstrap3 %}, it didn't work. It went back to the ugly HTML format. Similarly, when I removed the CDN links and kept all the bootstrap3 code that loaded bootstrap installed on my computer, it went back to the ugly HTML format as well.
My question is:
Is it supposed to be like this? According to a book that I'm currently following for this project, I don't even have to include the CDN links and scripts (the book doesn't mention them at all) and it ought to work.
If it's not supposed to be like this, is there something wrong with my code that's causing this? Am I missing some step? Are my bootstrap3 files in the correct directory? (i just downloaded it using pip through command prompt and I didn't move it anywhere else)
The functionality of my Django website works just fine.
Any help, explanations, or suggestions are greatly appreciated!
EDIT:
base.html would have to be like this if I wanted the Bootstrap elements to show up.
<!DOCTYPE html>
{% load bootstrap3 %}
<html lang="en">
<head>
<meta charset="utf-8"><!-- encoding characters -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- some Microsoft Edge/IE stuff -->
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- viewport -> the user's visible area of a webpage, -> this sets it to normal zoom (scale 1) and width of device -->
<title>My Notes</title
{% bootstrap_css %}
{% bootstrap_javascript %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<!-- Static top navbar -->
<nav class="navbar navbar-default navbar-static-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"></button>
<a class="navbar-brand" href="{% url 'mynotess:index' %}">My Notes</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% if user.is_authenticated %}
<li>My Topics</li>
{% endif %}
</ul>
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li><a>{{user.username}}</a></li>
<li>Log Out</li>
{% else %}
<li>Login</li>
<li>Create Account</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="page-header">
{% block header %}{% endblock header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
If I removed just the CDN links, it wouldn't work. Similarly, if I removed just the template tags, it wouldn't work either.
base.html without template tags (doesn't work)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"><!-- encoding characters -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- some Microsoft Edge/IE stuff -->
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- viewport -> the user's visible area of a webpage, -> this sets it to normal zoom (scale 1) and width of device -->
<title>My Notes</title
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<!-- Static top navbar -->
<nav class="navbar navbar-default navbar-static-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"></button>
<a class="navbar-brand" href="{% url 'mynotess:index' %}">My Notes</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% if user.is_authenticated %}
<li>My Topics</li>
{% endif %}
</ul>
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li><a>{{user.username}}</a></li>
<li>Log Out</li>
{% else %}
<li>Login</li>
<li>Create Account</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="page-header">
{% block header %}{% endblock header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
base.html without the links for CDN (also doesn't work)
{% load bootstrap3 %}
<html lang="en">
<head>
<meta charset="utf-8"><!-- encoding characters -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- some Microsoft Edge/IE stuff -->
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- viewport -> the user's visible area of a webpage, -> this sets it to normal zoom (scale 1) and width of device -->
<title>My Notes</title
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
<!-- Static top navbar -->
<nav class="navbar navbar-default navbar-static-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"></button>
<a class="navbar-brand" href="{% url 'mynotess:index' %}">My Notes</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% if user.is_authenticated %}
<li>My Topics</li>
{% endif %}
</ul>
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li><a>{{user.username}}</a></li>
<li>Log Out</li>
{% else %}
<li>Login</li>
<li>Create Account</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="page-header">
{% block header %}{% endblock header %}
</div>
<div>
{% block content %}{% endblock content %}
</div>
</div>
</body>
</html>

I had the same issue, and we both made the same typo: you forgot ">" in your closing title tag

Besides the usual typo stuff (title tags etc.), you already defined to import bootstrap, but the jquery line doesn't get loaded until you actually stick the jquery into the parameter to utilise it. (I just realised this is quite old as the new one is already on Bootstrap 4).
You don't need to manually include any cdn links, your django bootstrap tags can handle that part of it for you unless you decide to change the links (in which case you'd write your change to the settings in the settings.py (assuming that's what you're using).
So...
Including the bootstrap CSS is this tag:
{% bootstrap_css %}
And for including the bootstrap javascript and jquery js files - instead of:
{% bootstrap_javascript %}
try using:
{% bootstrap_javascript jquery=True %}
or:
{% bootstrap_javascript jquery %}
if you have already defined jquery as True in your config

It sounds like {% boostrap_css %} is not pulling down the CSS. That would cause the issue you have described. You may want to update the settings so they are pulling from a CDN that you know works or just hard code them into your base template.
template.html
<!DOCTYPE html>
{# Load the tag library #}
{% load bootstrap3 %}
<html lang="en">
<head>
<meta charset="utf-8"><!-- encoding characters -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- some Microsoft Edge/IE stuff -->
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- viewport -> the user's visible area of a webpage, -> this sets it to normal zoom (scale 1) and width of device -->
<title>My Notes</title
{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript %}
</head>
<body>
{# Display a form #}
<form action="/url/to/submit/" method="post" class="form">
{% csrf_token %}
{% bootstrap_form my_form_here %}
{% buttons %}
<button type="submit" class="btn btn-primary">
{% bootstrap_icon "star" %} Submit
</button>
{% endbuttons %}
</form>
</body>
</html>
settings.py
BOOTSTRAP3 = {
'jquery_url': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'
'base_url': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/'
}

It sounds like the Django for beginners book. If so be careful to check the folders in which you have placed your html files. I have fallen into this trap myself with this book. It isn't always clear in which directory they are creating new files.
In my case, I only noticed this when my bootstrap wouldn't work on my /admin & change_password pages, but it was working fine for 'home'.

Did you add the configurations in settings.py file?
Please see this link
https://django-bootstrap3.readthedocs.io/en/latest/settings.html

Categories