I am a beginner in python and django programming, i have a question that already have been asked in stackoverflow and many forums, but i couldnt solve my own.
this exactly my situation:
this the code in my app html page:
{% extends 'base.html' %}
{% block content %}
<form method="POST" action=""> {% csrf_token %}
{{ form.as_p }}
<footer>
<button type="submit" class="button">Confirmer</button>
</footer>
</form>
{% endblock %}
but in my base.html i have already this form and this classes:
<form action="" class="sky-form">
<section>
<label class="input">
<input type="password" placeholder="Confirmation">
<b class="tooltip tooltip-bottom-right">Retaper votre mot de passe</b>
</label>
</section>
.
.
.
.
</form>
where should i put {% block content %} and {% endblock %} in my base.html!!!!!!
i've also followed the tutorial from the official docs, but it did,'t work out for me
i'm sorry if my question seem silly!
Thanks in advance.
Don't put the form in your base.html.
In your base.html you should have something like this.
<!DOCTYPE html>
<html lang="en">
<head>
...put your css and metatags here....
</head>
<body>
{% block content %}
{% endblock %}
</body>
Then in your app html templates you just include.
{% extends 'base.html' %}
{% block content %}
..... Place form code here!.....
{% endblock %}
Now whenever you want to display code in the body of your html you can just use {% block content %} and not have to re-write the base.html code over and over! Just as the code says you are extending the base template.
Hope this helps! Let me know if you have any other questions.
Related
I'm trying to get basic bootstrap formatting working in a django app, and installed django_bootstrap5 to do so. No formatting, however, is getting applied to any of the pages.
Here's the various pages:
base.html:
<!DOCTYPE html>
{% load django_bootstrap5 %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
{% block title %}
{% endblock %}
</title>
</head>
<body>
<div class="container">
{% block body %}
{% endblock %}
</div>
</body>
</html>
I extend this in a simple index page:
<!DOCTYPE html>
{% extends 'base.html' %}
{% load django_bootstrap5 %}
{% block title %}
Home
{% endblock %}
{% block body %}
<h1>Hello World</h1>
{% endblock %}
Hello World, however, is not showing up in a container.
This is also failing on a form page:
<!DOCTYPE html>
{% extends 'base.html' %}
{% load django_bootstrap5 %}
{% block body %}
<div class="container">
<h1>Sign Up</h1>
<form method="POST">
{% csrf_token %}
{% bootstrap_form form %}
<input type="submit" value="Sign Up" class="btn btn-default">
</form>
</div>
{% endblock %}
The form is neither in a bootstrap container, nor does it have any styling at all. What am I missing here? Do you need to also load the bootstrap files by cdn or download them and add them to static when using django_bootstrap5? That makes things work, but it seems like it defeats the purpose of installing via pip. Thank you.
Thank you #tdy for tracking this down in the source code on github: one is not supposed to install bootstrap via cdn or by downloading the local files. Those are already included. Instead the preferred way to link is to include the {% boostrap_css %} and {% bootstrap_javascript %} tags. Thus your base.html file should look something like:
<!DOCTYPE html>
{% load django_bootstrap5 %}
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
{% bootstrap_css %}
</head>
<body>
<!-- Content -->
<!-- Bootstrap JavaScript -->
{% bootstrap_javascript %}
</body>
As an additional note, even if one did have to install bootstrap via cdn or local files in addition to the django_bootstrap5 package, this still wouldn't defeat the point of the package: django_bootstrap5 makes it easy to integrate bootstrap into django, that's the main point. You can format an entire form in a single line using django_bootstrap5:
<form id="postForm" action="{% url 'posts:create' %}" method="POST">
{% csrf_token %}
{% bootstrap_form form %} # this one line does a TON of work.
<input class="btn btn-primary btn-large" type="submit" value="Post">
</form>
The django_bootstrap5 package also makes it easy to install bootstrap.
Thank you all, especially #tdy for the support, and happy django-ing.
I have one template called skeleton.html
<head>
</head>
<body>
<div>
Some other code
</div>
<div>
{% block contact_info %}
{% endblock contact_info %}
</div>
</body>
And my other view is say home.html
{% extends "skeleton.html" %}
{% block contact_info %}
<div class="overflow-hidden">
<h4>Phone</h4>
<p class="lead">
{{ phone }}
</p>
</div>
{% endblock contact_info %}
So is this possible that I can use the block (contact_info) to any other template? Is there any way to reuse and render this block to another template file (e.g about.html)?
you can use include
for example
in your main template
{% include 'yourapp/yourtemplate.html' %}
I have error in my template when I try to use inheritance block
Everything works before I convert the login.html into html, which is basically everything from base.html
My html files are as below：
base.html :
<!DOCTYPE html>
<html>
<head>
{% block head %}
<title> {% block title %} {% endblock %} | Company Name</title>
{% endblock %}
</head>
<body>
{% block body}
{% endblock %}
</body>
</html>
login.html :
{% extends "base.html" %}
{% block title %}Login{% endblock %}
{% block body %}
<form method="POST">
<label for="name_question">What is your name? <br>
<input type="text" name="name"> <br>
<input type="submit" name="submit" value="Submit"> <br>
</form>
{% if name %}
<h1>Hello, {{name}}!</h1>
{% endif %}
{% endblock body %}
Nothing seems wrong with what you are trying to do. This could likely be caused due to a number of other reasons, mainly any of the followings:
I think that the reference to the base template is relative to you
TEMPLATE_DIR. Try different things like putting both templates at the
same level etc.
Check all the tags in both templates to be sure that they are all
correctly formatted
Check the encoding of the files. If it is UTF-8, try to disable the
BOM in both files.
Maybe it is a problem with your directory setting. Try to hard code
the absolute path to check that
My guess would be the final point.
I'm trying to load a static css file but to no avail:
home.html:
{% extends 'base.html' %}
{% block body%}
{% load static %}
<link rel="stylesheet" href="{% static 'home/style.css' %}" type="text/css">
<div class="container">
<br/>
<form method="post">
{% csrf_token %}
{{ form.post }}
<br />
<button type="submit">Submit</button>
</form>
<h2>{{ text }}</h2>
{% for post in posts %}
<h1>{{ post.post }}</h1>
<p>Posted </b> on {{ post.created }}</p>
{% endfor %}
</div>
{% endblock %}
style.css:
.HomeForm {
size:20;
}
forms.py:
class HomeForm(forms.ModelForm):
post = forms.CharField(widget=forms.TextInput(
attrs={
'class': 'form-control',
'placeholder': 'How are you feeling?',
'size': '20',
}
))
I have a feeling I'm loading the static file in the wrong place, whats the solution? Thanks in advance.
You are loading the css file correctly. But that is not how you apply css classes to django forms.
Firstly, You are already giving bootstrap attributes to your field in your forms.py.
Now to apply the css classes change the following.
style.css
doesnt matter what you name your classes. No need to name them same as your Form name.
.home-post {
size:30; // Increase this to see difference
}
Now in your home.html add the class to your form. (Look for the comment). So now all the elements inside this container have size attribute too.
{% extends 'base.html' %} {% block body%} {% load static %}
<link rel="stylesheet" href="{% static 'home/style.css' %}" type="text/css">
<div class="container home-post"> <!--This is how you need to apply-->
<br/>
<form method="post">
{% csrf_token %} {{ form.post }}
<br />
<button type="submit">Submit</button>
</form>
<h2>{{ text }}</h2> {% for post in posts %}
<h1>{{ post.post }}</h1>
<p>Posted on {{ post.created }}</p>
{% endfor %}
</div>
{% endblock %}
EDIT:
Looks like you're using bootstrap but don't seem to load it. Add bootstrap if you didn't already add it in your base.html
I'm using django 1.2.4.
I have a template for login in registration/login.html (wich action is django.contrib.auth.views.login) and I want to include it on everypage. I created a block on my base.html as I do for every template. The thing is the browser doesn't recognize this login block and I think it is because I only render a template for each view, I am not rendering this login template.
Here is my folder structure:
/templates/
base.html
/myapp/
object_list.html
...
/registration/
login.html
...and here is my login.html:
{% extends "base.html" %}
{% block mylogin %}
<div class="horizontal">
{% if form.errors %}
<p>Your username and password didn't match. Please try again.</p>
{% endif %}
<form action="{% url django.contrib.auth.views.login %}" method="post">
{% csrf_token %}
<div class="login_box">
<div class="login_text">{{ form.username.label_tag }}</div><div class="login_input">{{ form.username }}</div>
<div class="password_text">{{ form.password.label_tag }}</div><div class="password_input">{{ form.password }}</div>
<input id="button_login" type="submit" value="" />
</div>
</form>
</div>
{% endblock %}
...and in my base.html I have:
<div id="some_div">
{% block mylogin %} {% endblock %}
</div>
I have a basestyle.css included in base.html and the other templates inherit correctly too... it seems to be a block problem...
So.. how can I render this template for every view??
Thank you
I think you are looking for the include tag. This way you can include your login html snippet in your base.html :
{% include "/registration/login.html" %}
What I really need was to create a templatetag in templatetags/mytags.py, where I define a function called get_login wich looks like this:
#register.inclusion_tag('registration/login.html', takes_context=True)
def get_login(context):
...
return {'formLogin': mark_safe(AuthenticationForm())}
...and in base.html:
{% load mytags %}{% get_login %}
The problem now is that the template (registration/login.html) doesnt recognize '{{ formLogin.username }}','{{ formLogin.password }}' and so on.
What am I missing?
Update 1:
mark_safe returns an instance of django.utils.safestring.SafeString, not a form.
Use (AuthenticationForm() instead of mark_safe(AuthenticationForm()) and it works!