The password reset templates are stored in:
/usr/local/lib/python2.7/dist-packages/django/contrib/admin/templates/registration
However, I want to override the default templates provided my Django. I don't want to directly go to that directory and edit the template. Thus, I created password reset templates with same name in templates/registration directory. However, I am still getting the same inbuild django template. My one template password_reset_form.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ATS | Password Reset Form</title>
<!--google web font-->
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700|Lato:700,300,400' rel='stylesheet' type='text/css'>
<!--style sheets-->
<link rel="stylesheet" media="screen" href="{{ STATIC_URL }}bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" media="screen" href="{{ STATIC_URL }}bootstrap/css/style.css"/>
<link rel="stylesheet" media="screen" href="{{ STATIC_URL }}bootstrap/css/static.css"/>
<style>
li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
#footer {
margin-top: 40px;
}
</style>
<!--jquery libraries / others are at the bottom-->
<script src="{{ STATIC_URL }}bootstrap/js/jquery-1.7.1.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Header starts
================================================== -->
<header id="header">
<div class="container">
<div class="row">
<!--logo starts-->
<div class="span4"> <img src="{{ STATIC_URL }}bootstrap/img/auto.png"> </div>
<!--logo ends-->
</div>
</header>
<div class="container">
<h2 class="lead text-center">Password Reset</h2><br /> <br />
<form action="" class="well span10" method="post">
{% csrf_token %}
{% block content %}
<p class="text-info text-center"><strong>Forgotten your password? Enter your e-mail address below, and we'll e-mail instructions for setting a new one.</strong></p>
<span class="text-error text-center"><strong> {{ form.email.errors }}</strong></span><br/>
<p class="text-center"><label for="id_email">Enter your E-mail address:</label> {{ form.email }}</p>
<p class="text-center"><button class="btn btn-success">Reset my Password</button></p>
</form>
{% endblock %}
</div>
<footer id="footer">
<div class="container">
<div class="row">
<!--small intro and copyright starts-->
<div class="span7">
<a data-toggle="tab" href="/how_it_works/">How it works? </a>
<a data-toggle="tab" href="/how_it_works/">Terms and Conditions </a>
<a data-toggle="tab" href="/how_it_works/">How to use? </a> <br /><br />
<p class="copyright"> ©2013 Automatic Text Summarization(ATS) </p>
</div>
Is there something I am missing in the template?
Have you placed your template in your apps directory? If so specify your app before django.contrib.admin in INSTALLED_APP setting.
If you have placed the template in some other folder, verify you have appropriately added the directory in TEMPLATE_DIRS and in filesystem loader is before _app_directories _loader in TEMPLATE_LOADERS.
So it should be
TEMPLATE_LOADERS = (
'django.template.loaders.filesystem.Loader',
'django.template.loaders.app_directories.Loader',
)
More reference at Template loaders
Related
Good day
I have the following issue, I have, as far as my knowledge allows me,
I have tried using the bootstrap CDN and also the pip package installer method, but when I try get my modal to show then I cant get it work, could someone have a look at my code and let me know
index.html
{% load static %} {% load bootstrap5 %}
<!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.0" />
<title>Landing Page</title>
{% comment %} Bootstrap {% endcomment %}
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="{% static 'css/style.css' %}" />
<script type="text/javascript">
$(window).on("load", function () {
$("#myModal").modal("show");
});
</script>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
{% comment %} header {% endcomment %}
<header>
<img src="" alt="" />
</header>
{% comment %} Main Conntent {% endcomment %}
<main>
<div class="row">
<div class="text-center">
<button
id="btnSubmit"
type="submit"
class="btn btn-danger py-2 px-5 text-center d-flex align-items-end"
>
Enter
</button>
</div>
</div>
</main>
{% comment %} Footer {% endcomment %}
<footer>
<p>give it an ice cold shot</p>
</footer>
</body>
</html>
According to the documentation I have included bootstarp54 in my installed apps on the settings.py
settings.py
INSTALLED_APPS = [
'comp.apps.CompConfig',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'cloudinary_storage',
'django.contrib.staticfiles',
'cloudinary',
'bootstrap5',
]
What is the best practice and the best way to load on a modal on load, I am quite new to all frameworks and I have extensively been learning JavaScript for a while,
Does anyone know if jQuery is included in the pip install pacakges method?
You are trying to use jquery, when it is not necessary (and not available as far as I can see)
You can just use vanilla JS:
window.onload = (event) => {
console.log("page is fully loaded");
};
To test modal creations in python with django I created a test app named modalTestApp.
Then I copied this html that I got off of the bootstrap website and pasted it into the main.html inside the app, without changing it. The webpage from the app loads fine but clicking the button to preview the modal does nothing. What am I doing wrong here?
main/base.html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<script src={% static "jquery/jquery-3.3.1.slim.min.js" %}></script>
<script src={% static "jquery/jquery.min.js" %}></script>
<script type="text/javascript" src={% static 'tablesorter-master/js/jquery.tablesorter.js' %}></script>
<script src={% static "bootstrap-4.3.1-dist/js/popper.min.js" %}></script>
<script src={% static "bootstrap-4.3.1-dist/js/bootstrap.min.js" %}></script>
<style type="text/css">
.main {
margin-top: 50px;
padding: 10px 0px;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href={% static "bootstrap-4.3.1-dist/css/bootstrap.min.css" %}>
<title>{% block title %} {% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-dar bg-dark pb-0 pr-0">
<ul class="nav flex-row">
<p class="navbar-brand mb-0 pt-0" style="color: #eee">Weather Data</p>
Home
{% if user.is_authenticated %}
Stations
{% endif %}
</ul>
<ul class="nav justify-content-end">
{% if not user.is_authenticated %}
Register
Login
{% else %}
logout
Profile
{% endif %}
</ul>
</nav>
{% block content %}
{% endblock content %}
</body>
</html>
main.html:
{% extends "main/base.html" %}
{%block content %}
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
{% endblock content %}
EDIT:
console output + webpage preview (same before and after button clicked):
I think that you do not need to write the script tag, you need to write how it is done in the bootstrap documentation - https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template
Just as example
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
You also need to see the django documentation on how to insert static files, this will help you use your pictures, styles, javascript - https://docs.djangoproject.com/en/3.2/howto/static-files/
Also, just as example
settings.py (Root setting)
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/
STATIC_URL = "/static/"
STATICFILES_DIRS = [str(BASE_DIR.joinpath("static"))]
urls.py (root urls)
urlpatterns = [
path("admin/", admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
It seems like the problem is the template file is not fetching right css and js or may be your directory is not correct. Check my code below its working fine. Thanks
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I was writing an html page with bootstrap and then I come across some sort of kind of error the navbrand is too long. It takes up a whole lot of space in my navbar at the point when I view it on mobile It takes up a whole line and the hamburger icon goes to the bottom. This problem doesn't occur with text only with images.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Urci</title>
<!-- BOOTSTRAP -->
<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/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <!-- CSS -->
<!-- CSS -->
<link rel='stylesheet' href="{% static 'home/css/custom.css' %}">
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Oswald:wght#300&family=Roboto+Condensed&display=swap" rel="stylesheet">
<!-- W3 -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light custom-navbar">
<div class="container-fluid">
<a class="navbar-brand urci-brand" href="{% url 'home' %}"><img class="branding "src="{% static 'home/images/Urci-Logo.png' %}" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav custom-navbar">
<a class="nav-link" href="{% url 'bod' %} ">Board of Directors</a>
<a class="nav-link" href="#">Events</a>
{% if user.is_authenticated %}
<div class="navbar-nav ml-auto">
<a class="nav-link" href="{% url 'announcement:create' %}">Create Announcement</a>
<a class="nav-link" href="#">Create Events</a>
{% endif %}
</div>
</div>
</div>
</div>
</nav>
{% block content %}
{% endblock %}
</body>
</html>
enter image description here
In your home/css/custom.css add the following...
.urci-brand{
width: fit-content !important;
}
This would mean that the width of the anchor tag would be the width of the content within it.
And the !important is used to overwrite some bootstrap styling.
I'm following a tutorial to make websites with Django. I'm currently trying to add a navigation bar using bootstrap CDN but the following appears. The code I am using is posted below.
There is no navigation bar present:
Below is the code is used.
<!doctype html>
<html lang="en">
<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.5.0/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81i\
uXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<title>{% block title %}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' %}">Newspaper</a>
<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">
<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-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4\
YfRvH+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+9J3UJ46jBk0WLaUAdn689aCwoqbB\
JiSnjAK/
l8WvCWPIPm49"
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>
</html>
The site is supposed to display a navigation bar with the users name at the top right.
to use CDN you need active internet connection, here looks like either you are developing offline or your django project does not have access to internet.
if developing offline is your requirement, then you may download those CDN files, then use them.
I found an example how to copy text to clipboard with ZeroClipboard. However, I tried to convert the original code to flask and I run into TemplateSyntaxError: expected token 'end of statement block', got 'onload' because of {% block body onload="init();"%}. How is it possible to use onload="init();" with Jinja?
Here is app.py
#app.route("/table/", methods=["GET"])
def table():
return render_template('table.html')
Here is base2.html:
<!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>flask-bootstrap example</title>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='bootstrap/css/bootstrap.css')}}" >
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="https://gitcdn.github.io/bootstrap-toggle/2.1.0/css/bootstrap-toggle.min.css" >
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='web.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='tooltip.css') }}">
<style>
.clip_button {
background:#063;
padding:4px;
width:100px;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
</button>
<a class="navbar-brand" href="{{ url_for('index') }}">test</a>
</div>
<!--/.navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li id="home-url">Home</li>
<li id="about-url">About</li>
<li id="contact-url">Contact</li>
</ul>
<!--/.navbar-nav -->
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</div>
<!--/.navbar -->
<div class="container">
{% block body %}{% endblock %}
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="{{url_for('static', filename='bootstrap/js/bootstrap.js')}}"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="https://gitcdn.github.io/bootstrap-toggle/2.1.0/js/bootstrap-toggle.min.js"></script>
<script type="text/javascript" >
$("a.my-tool-tip").tooltip();
$('.selectpicker').selectpicker();
$("#reference_select").selectpicker("refresh");
</script>
<script type="text/javascript" src="{{url_for('static', filename='ZeroClipboard/ZeroClipboard.js')}}"></script>
<script language="JavaScript">
////copy to clip
var clip = null;
function $(id) { return document.getElementById(id); }
function init()
{
clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
}
function move_swf(ee)
{
copything = document.getElementById(ee.id+"_text").value;
clip.setText(copything);
if (clip.div)
{
clip.receiveEvent('mouseout', null);
clip.reposition(ee.id);
}
else{ clip.glue(ee.id); }
clip.receiveEvent('mouseover', null);
}
</script>
<script type="text/javascript">
{% block js %}{% endblock %}
</script>
</body>
</html>
Here is the (table.html):
{% extends 'base2.html' %}
{% block body onload="init();"%}
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table">
<tbody>
<tr>
<td><input type='text' id='textid5_text' value='your text 5' /></td>
<td><div id='textid5' onload="init();" onMouseOver='move_swf(this)' class='clip_button'>COPY</div></td>
</tr>
</tbody>
</table>
</div>
</div>
{% endblock %}
onload is an HTML attribute. It has nothing to do with Jinja. You can simply place it right on your <body> tag.
<body onload="init();">
If you don't need it in every page where you use this base template, you'll need to add a block inside the <body> tag
<body {% block body_attrs %}{% endblock %}>
And then override it in your child template
{% block body_attrs %} onload="init();" {% endblock %}