I've been having trouble customizing Django-Allauth templates. Might be an issue with my TEMPLATE_DIRS value, or with something I'm unaware of. If I point my TEMPLATE_DIRS to just the "Templates/AllAuth" folder in my project directory, it ignores my customized templates. Right now, it's ignoring my current base.html file and my current signup.html/login.html file even though the report says the error is coming from the correct file/folder. How can I fix this?
Unclosed tag 'block'. Looking for one of: endblock
My current base template:
{% block content %}
{% endblock %}
The error occurs on my signup.html page, which looks like:
{% load staticfiles %}
{% load url from future %}
{% load i18n %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{% trans "Sign Up" %}</title>
<link rel="stylesheet" type="text/css" href="{% static "stylesheets/sign-up.css" %}" />
<link href="http://fonts.googleapis.com/css?family=Arvo:400,700|Open+Sans" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="logo">
<img id="logo" src="{% static "media/mobile-logo.gif" %}" />
</div>
<div class="wrapper">
<div class="omni-box">
<p>Create Your My_APP Account</p>
</div>
<div class="sign-up-form">
<form id="sign-up" method="post" action="{% url 'account_signup' %}">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Sign Up!" />
</form>
<h3>OR</h3>
<p class="facebook"><img class="social-button" src="{% static "media/facebook.png" %}" />Connect With Facebook</p>
<p class="twitter"><img class="social-button" src="{% static "media/twitter.png" %} />Connect With Twitter</p>
</div>
</div>
</body>
</html>
My Template Settings:
TEMPLATE_LOADERS = ('django.template.loaders.filesystem.Loader',
'django.template.loaders.app_directories.Loader')
TEMPLATE_DIRS = (os.path.join(BASE_DIR, 'templates','allauth'))
And in my templates/allauth/account folder, I have all of the template files that I have customized. That folderl ies in my project directory.
Might be a little late, but I solved this problem by changing the order of apps in settings.py. You have to put allauth AFTER the app in which your templates reside.
You should place your template files under templates/account not under templates/allauth/account.
Related
The following is my code, when I tried it I get an error:
'accounts/register' could not be found
index.html:
{% load static %}
{% static "images" as baseUrl %}
<!doctype html>
<!-- Website Template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mustache Enthusiast</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/mobile.css' %}" media="screen and (max-width : 568px)">
<script type="text/javascript" src="{% static 'js/mobile.js' %}"></script>
</head>
<body>
<div id="header">
<a href="{% static 'index.html' %}" class="logo">
<img src="{% static 'images/logo.jpg' %}" alt="">
</a>
<ul id="navigation">
<li class="selected">
home
</li>
<li>
about
</li>
<li>
register
</li>
<li>
contact
</li>
</ul>
</div>
<div id="body">
<div id="featured">
<img src="{% static 'images/the-beacon.jpg' %}" alt="">
<div>
<h2>the beacon to all mankind</h2>
<span>Our website templates are created with</span>
<span>inspiration, checked for quality and originality</span>
<span>and meticulously sliced and coded.</span>
read more
</div>
</div>
<ul>
{% for cate in categos %}
<li>
<a href="{% static 'gallery.html' %}">
<img src="{{cate.img.url}}" alt="" style="width:240px;height:200px;">
<span>{{cate.name}}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
</body>
</html>
register.html :
{% load static%}
<!doctype html>
<!-- Website Template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mustache Enthusiast</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/mobile.css' %}" media="screen and (max-width : 568px)">
<script type="text/javascript" src="{% static 'js/mobile.js' %}"></script>
</head>
<body>
<div id="header">
<a href="{% static 'index.html' %}" class="logo">
<img src="{% static 'images/logo.jpg' %}" alt="">
</a>
<ul id="navigation">
<li class="selected">
home
</li>
<li>
about
</li>
<li>
contact
</li>
</ul>
</div>
<div id="body">
<div id="featured">
<img src="{% static 'images/the-beacon.jpg' %}" alt="">
<div>
<h2>Registration</h2>
<form action="register" method="POST">
{% csrf_token %}
<input type="text" name="first_name" placeholder="First name"><br>
<input type="text" name="last_name" placeholder="Last name"><br>
<input type="text" name="username" placeholder="Username"><br>
<input type="email" name="email" placeholder="email"><br>
<input type="password" name="password1" placeholder="Password"><br>
<input type="password" name="password2" placeholder="Confirm password"><br>
<input type="submit">
</form>
read more
</div>
</div>
</div>
</body>
</html>
views.py in accounts app:
from django.shortcuts import render
# Create your views here.
def register(request):
return render(request,'register.html',)
urls.py in accounts app :
from django.urls import path
from . import views
urlpatterns = [
path('register', views.register, name='register')
]
models.py in propython :
from django.db import models
# Create your models here.
class categories(models.Model):
name = models.CharField(max_length=100)
img = models.ImageField(upload_to='pics')
views.py in propython
from django.shortcuts import render
from .models import categories
# Create your views here.
def index(request):
categos = categories.objects.all()
return render(request,'index.html', {'categos': categos})
But I change chrome browser URL http://127.0.0.1:8000/static/accounts/register to
http://127.0.0.1:8000/accounts/register then my code run without any problem.
I'm guessing that the error is in your register.html, where you are initializing your form:
<form action="register" method="POST">
the action attribute accepts a url not a string, change it to this:
<form action="{% url 'register' %}" method="POST">
or add a slash before register:
<form action="/register" method="POST">
Of course there is no path http://127.0.0.1:8000/static/accounts/register.
so when you change http://127.0.0.1:8000/static/accounts/register to http://127.0.0.1:8000/accounts/register, it should work properly. that's obvious. unless the path in your urls.py project be static/accounts/.
The way you generate URLs in the template seems off.
The static tag is used to include static assets (images, CSS, JavaScript) in your code:
{% static "some_app/some_file.css" %}
The url tag is used to generate an URL, basing on your Django application URL configuration:
{% url "app_prefix:name" %}
This question already has answers here:
Link to Flask static files with url_for
(2 answers)
Closed 4 years ago.
I have a problem when rendering template in flask it doesn't recongnize the CSS file but this issue occurs only when I give more than one parameter to the funtion.
for this example the css is working on the page:
#app.route('/test/<usrn>')
def test(usrn):
return render_template('test.html')
and it looks like this
but for this one the css isn't working:
#app.route('/test/<usrn>/<grad>')
def test(usrn,grad):
return render_template('test.html')
and now it looks like this
Strucure of test.html:
{% extends 'layout.html' %}
{% block body %}
<header>
<div class="container">
<div id="logo">
<img src="../static/images/logo2.png">
</div>
<nav>
<ul>
<li>Dashboard</li>
<li>Clasament</li>
<li><a href="{{ url_for('profil') }}">Profil ({{ uname }})
</a></li>
<li><button onclick="window.location.href='{{ url_for('logout') }}'" class="input_btn1">Log out</button></li>
</ul>
</nav>
</div>
</header>
{% endblock %}
Structure of layout.html:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="../static/css/main.css?q=1280549780">
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
Directory structure:
Website
static
css
main.css
images
img
templates
layout.html
test.html
mongo_connect.py
Your path to the CSS file is hard-coded: this is generally a bad idea, as once you move up the path to a new "folder" this CSS path becomes invalid.
The best method is to use url_for to generate a consistent URL for your static assets.
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='css/main.css') }}?q=1280549780">
You should also apply the same change to your other static assets such as images, Javascript files etc.
Documentation for url_for
I got an error:
TemplateSyntaxError at /accounts/profile/
<ExtendsNode: extends "registration/accounts/base.html"> must be the first tag in the template
I wrote base.html:
{% load staticfiles %}
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{% load staticfiles 'bootflat/css/bootflat.min.css' %}">
<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>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<p class="navbar-text">HELLO</p>
{% if user.is_authenticated %}
<p class="navbar-text">{{ user.get_username }}</p>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock %}
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
profile.html is:
{% load staticfiles %}
{% extends "registration/accounts/base.html" %}
{% block content %}
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{% static 'bootflat/css/bootflat.min.css' %}">
<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>
</head>
<body>
SEE YOUR PHOTO
<div class="container">
<form action="{% url 'accounts:upload_save' %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<p>SEND PHOTO</p>
<input type="file" name="files[]" multiple>
<input type="hidden" value="{{ p_id }}" name="p_id">
<input type="submit" value="Upload">
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
{% endblock %}
I found only base.html was showed accurately, but when I tried base.html inherit profile.html,this error happens. Before,these 2 files are loaded accurately, but when I added href="{% static 'bootflat/css/bootflat.min.css' %}" to profile.html,this error happpens. Why does such an error happen? How can I fix this? I think adding {% load staticfiles %} is right to profile.html,but is it wrong?
You should consider your base.html file as a layout and your profile.html as a template file rendered inside this layout.
For this reason:
load staticfiles block should be inserted in base.html and should be insert in every file where you are loading static assets (see next bullet point)
when you refer to static assets inside src= is enough to load it with static path helper
profile.html should extend the layout base.html and whatever is included in the {% block content %} will be rendered inside the block content tag in your body
base.html
<html lang="ja">
<head>
<meta charset="utf-8">
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'bootflat/css/bootflat.min.css' %}">
<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>
</head>
<body>
{% block content %}
<!-- your body is fine -->
{% end block %}
</body>
</html>
profile.html
{% extends "registration/accounts/base.html" %}
{% block content %}
SEE YOUR PHOTO
<form action="{% url 'accounts:upload_save' %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<p>SEND PHOTO</p>
<input type="file" name="files[]" multiple>
<input type="hidden" value="{{ p_id }}" name="p_id">
<input type="submit" value="Upload">
</form>
{% endblock %}
Edit
as remarked by Daniel Roseman
The error says that you must write extends tag first in your template.
You can read more about this in documentation
So, you should write {% extends "registration/accounts/base.html" %} first in profile.html
{% extends "registration/accounts/base.html" %}
{% load staticfiles %}
{% block content %}
...
{% endblock %}
After that all will works fine!
I have the following Django settings:
views.py
from .forms import Method1Form
def method1_input(request):
if request.method == 'POST':
method1_form = Method1Form(request.POST, request.FILES)
# Handle file upload
if method1_form.is_valid():
q = method1_form.save()
q.save()
# This is where we run code
# with the given parameters
# Do something q.run_code1()
# This will show the method1_result to be executed.
return HttpResponseRedirect(reverse('method1-result', kwargs={'id': q.id }))
else:
method1_form = Method1Form()
return render(request, 'my_app/method1.html', {'m1_form':method1_form})
urls.py
from django.conf.urls import include, url
from myapp import views
urlpatterns = [url(r'^method1/input$', views.method1_input, name='method1-input')]
Now the current template my_app/method1.html looks like this. Note that it contain navigation bar.
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="{% static "images/favicon.png" %}"/>
<link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}"/>
<script src="{% static "vendors/jquery-2.1.4.min.js" %}"></script>
<script src="{% static "vendors/bootstrap.min.js" %}"></script>
<script src="{% static "vendors/bootstrap.file-input.js" %}"></script>
<link rel="stylesheet" href="{% static "css/style.css" %}"/>
<meta charset="utf-8">
<title>Cool title</title>
</head>
<body>
<!--- BEGINNING OF NAVBAR -->
<nav class="navbar navbar-inverse" style="border-radius:0px;">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand active" href="{% url 'index' %}">ICEPOP</a>
</div>
<div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Help</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-cutlery"></span> API</li>
</ul>
</div>
</div>
</nav>
<!--- END OF NAVBAR -->
<h1> Content specific to METHOD1 </h1>
</body>
</html>
What I want to do is to separate the file into a base.html template which contain only the navbar and method1_only.html. So at the end of the day method1_only.html file will contain only the inherit from base.html and the text specific to it. What's the scheme to do such wrapping in Django?
Well, django advises to use base.html file to contain no only navbar but hold all common staff for all pages: block, navbar, footer, side panel is available on the site. So I think you should do it next way:
base.html
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="{% static "images/favicon.png" %}"/>
<link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}"/>
<script src="{% static "vendors/jquery-2.1.4.min.js" %}"></script>
<script src="{% static "vendors/bootstrap.min.js" %}"></script>
<script src="{% static "vendors/bootstrap.file-input.js" %}"></script>
<link rel="stylesheet" href="{% static "css/style.css" %}"/>
<meta charset="utf-8">
<title>Cool title</title>
</head>
<body>
<!--- BEGINNING OF NAVBAR -->
<nav class="navbar navbar-inverse" style="border-radius:0px;">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand active" href="{% url 'index' %}">ICEPOP</a>
</div>
<div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Help</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-cutlery"></span> API</li>
</ul>
</div>
</div>
</nav>
<!--- END OF NAVBAR -->
<h1>{% block method_content %}{% endblock method_content %}</h1>
</body>
</html>
And in your method1_only.html you will extend base.html and put your method content in method_content block like this
{% extends "base.html" %}
{% block method_content %}Here goes your method content{% endblock method_content %}
Hope this will help.
I have a website i'm putting together with python and django.
I have a template html page, Speakers.html, that extends Base.html. Base.html has the stylesheet base.css.
Speakers.html is displaying with base.css styling as it should be, my problem is that I want Speakers.html to have additional styling from another stylesheet, speakers.css.
I've been trying to figure it out but speaker.css doesn't seem to be applied, infact i've just noticed in the cmd output that the file speaker.css isn't being loaded at all.
I tried putting it in a block, which is the code you now see below.. I had to repeat {% load static %} to get rid of an error about it expecting the endblock but it doesn't seem to have made a difference.
Base.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Base.Html</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static "CSS/base.css" %}" />
{% block additionalcss %}{% endblock %}
</head>
<body>
...ect
Speakers.html
<!-- extending works -->
{% extends "Base.html" %}
<!-- Now i'm trying to load an additional stylesheet -->
{% block additionalcss %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static "CSS/speakers.css" %}" />
{% endblock %}
{% block currentpage_content %}
<h2>Guest speakers at the event</h2>
<p> This text would be red if speakers.css was applying properly </p>
...ect
For testing purposes i've put the following rule in speakers.css:
*
{
color: red;
}
So I reason the text on Speakers.html should all be red if it were working.
Try using blocks in the templates.
Something like:
Base.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Base.Html</title>
{% load static %}
{% block css %}{% endblock %}
<link rel="stylesheet" type="text/css" href="{% static "CSS/base.css" %}" />
</head>
<body>
...ect
Speakers.html
<!-- extending works -->
{% extends "Base.html" %}
{% block css %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static "CSS/speakers.css" %}" />
{% endblock %}
{% block currentpage_content %}
<h2>Guest speakers at the event</h2>
<p> This text would be red if speakers.css was applying properly </p>
...ect
By defining blocks in the parents and then specifying them in the children the css files will be inserted into your template.