This is probably a silly question, but can you put a <div> stage around Django's {% block content %}?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'property/style.css' %}">
{% block head %}
{% endblock %}
</head>
<body>
<div class = "row">
<div class = "column left">
{% block left %}
{% endblock %}
</div>
<div class = "column center">
{% block center %}
{% endblock %}
<div class = "column right">
{% block right %}
{% endblock %}
</div>
</div>
</body>
<HTML>
and my CSS
* {
box-sizing: border-box;
}
body {
color: var(--text_color);
background-color: var(--background_color);
font-family: var(--font);
font-size: var(--font_size);
}
.column {
float: left;
padding: var(--padding);
height: 300px;
}
.left, .right {
width: 25%;
}
.center {
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
I am trying to make each {% block %} be a column without having to write the <div> for each template. However, my HTML output is stacking them on top of each other instead of side by side.
**edit: Post the rendererd HTML document, so we know what Django has done to it.
Yes you can do that... But your problem is that a ending </div> tag is missing:
<div class = "row">
<div class = "column left">
{% block left %}
{% endblock %}
</div>
<div class = "column center">
{% block center %}
{% endblock %}
</div>
<div class = "column right">
{% block right %}
{% endblock %}
</div>
</div>
Checkout this structure.
Related
this is my code i want to give different colors to comments
like grey(#eee) to odd and blue (#e6f9ff) to even
here this line is giving me error
background-color: {{ bg_color }}
{% extends 'base.html' %}
{% block content %}
<h1>{% block title %} Comments {% endblock %}</h1>
<div style="width: 50%; margin: auto">
{% for comment in comments %}
{% if loop.index % 2 == 0 %}
{% set bg_color = '#e6f9ff' %}
{% else %}
{% set bg_color = '#eee' %}
{% endif %}
<div style="padding: 10px; background-color: {{ bg_color }}; margin: 20px">
<p>#{{ loop.index }}</p>
<p style="font-size: 24px">{{ comment }}</p>
</div>
{% endfor %}
</div>
{% endblock %}
I think jinja version is updated and my course which Im following is old
so anyone who knows to answer me
You should note the scope for the variables. If you define a variable within an if-else block, it is only valid there.
<div style="width: 50%; margin: auto">
{% for comment in comments -%}
{% set bg_color = '#e6f9ff' if loop.index % 2 == 0 else '#eee' %}
<div style="padding: 10px; background-color: {{ bg_color }}; margin: 20px">
<p>#{{ loop.index }}</p>
<p style="font-size: 24px">{{ comment }}</p>
</div>
{% endfor -%}
</div>
Instead of using jinja you can also use css to assign a different background color to every other line.
<div class="comments">
{% for comment in comments -%}
<div>
<p>#{{ loop.index }}</p>
<p class="text">{{ comment }}</p>
</div>
{% endfor -%}
</div>
<style type="text/css">
.comments {
width: 50%;
margin: auto;
}
.comments div {
padding: 10px;
background-color: #e6f9ff;
margin: 20px
}
.comments div:nth-child(odd) {
background-color: #eee;
}
.comments .text {
font-size: 24px
}
</style>
Here is my code for base_site.html
{% extends "admin/base.html" %}
{% load static %}
{% block title %}{% if subtitle %}{{ subtitle }} | {% endif %}{{ title }} |
{{ site_title|default:_('Admin') }}
{% endblock %}
{% block extrastyle %}
<style type="text/css">
#branding h1{
color: #fff !important;
}
#branding h1 a:link, #branding h1 a:visited {
color: #fff !important;
}
.submit-row input{
background-color: #00b388;
}
#header {
background-color: #000000;
color: #fff !important;
}
.module caption{
background-color: #00b388;
}
div.breadcrumbs {
background: #00b388;
}
.object-tools a.addlink{
background-color: #00b388;
}
input[type=submit].default, .submit-row input.default{
background-color: #00b388;
}
</style>
{% endblock %}
{% block branding %}
<form method="post">{% csrf_token %}
<h1 id="site-name"><img src="{% static 'img/logo.PNG' %}" height="30px" /></h1>
{% endblock %}
{% block nav-global %}
{% endblock %}
unfortunately i have added the <form> tag in the above code, just to over come with CSRF issue and it does.
unfortunately, this approach gives me another error,
i.e, i have 3 file fields in my Model, and even though, i have mentioned the files during the upload and when i hit submit, it is not working and keep showing me This field is required error.
I am new to Django and your response helps me great.
versions:-
Django - 2.2
python - 3.6.2
You need to close the form tag :
<form method="post">{% csrf_token %}
</form>
<h1 id="site-name"><img src="{% static 'img/logo.PNG' %}" height="30px" /></h1>
{% endblock %}
{% block nav-global %}
{% endblock %}
While practicing Django, I want to mess around with CSS. In this case, I am creating a login page. The login form is currently appearing at the top-left corner of the page. How to I modify to make it right in the center? I am not good with CSS and could use some pointers.
Here are my django files. I try to manipulate the panel-default but it does not work.
base.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static "css/base.css" %}" rel="stylesheet">
</head>
<body>
<div id="header">
<span class="logo">My Page</span>
</div>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
login.html (which extends the base.html)
{% extends "base.html" %}
{% block title %}Log-in{% endblock %}
{% block content %}
<div class="panel panel-default">
<h1>Log-in</h1>
<form method="post">
{{ form.as_p }}
{% csrf_token %}
<p><input type="submit" value="Log in"></p>
</form>
</div>
{% endblock %}
base.css
#import url(http://fonts.googleapis.com/css?family=Muli);
body {
margin:0;
padding:0;
font-family:helvetica, sans-serif;
}
.panel-default{
position: absolute;
top: 50%;
left: 50%;
}
#header {
padding:10px 100px;
font-size:14px;
background:#12c064;
color:#fff;
border-bottom:4px solid #1cdf78;
overflow:auto;
}
Add to .panel-default this CSS- transform: translate(-50%, -50%)
and if you didn't give the parent element of .panel-default CSS position: relative; yet, please do it first.
Align the panel to the center this way:
.panel{
margin: 0px auto;
}
If it doesn't work, then wrap your login form with div tags and align the new div to the center using the the margin property above.
I am using the wkhtmltopdf bundle to convert my html page to a .pdf file. I want to use this so customers can print the content on a label paper seized 3 x 7. The exact size of a label is 70 x 42,3mm. The problem is, i cant seem to get the sizing right.
I used the css of float right and 33% width to get 3 columns, and now im trying to get 7 rows. I thought dividing it by 14.2% (7 rows) would do the trick. However it will then only print 1 label. When i remove the height it will print all the labels, but more then 7 per page. Anyone help me figure out how to get a 3x7 a4 format for labels?
{% set labels = 1 %}
{% block body %}
{% for sale in webstore.getSales %}
{% for orderItem in sale.getOrderItems %}
{% if labels == 21 %}
<div style="page-break-after: before;" class="newPage"></div>
{% set labels = 1 %}
<br>
</div>
{%endif%}
<div class="stickerWidth" id="stickerWidth" >
<div class="text">
<div >{{sale.getWebstoreOrderId}} : <span style="float:right; margin-right:5px; font-size:20px" > {{sale.getDate.date | date("d/m/Y")}}</span> </div> <br><br>
<div style=" text-align:center;font-size: 24px;">{{orderItem.getAmount}} x {{orderItem.getItemName}}</div> <br>
<div>
{% if webstore.name %}
<span style="font-size:20px">
{{webstore.id}}<br>
{{webstore.name}}</span>
{% endif %}
</div>
</div>
</div>
{% set labels = labels + 1 %}
{% endfor %}
{% endfor %}
{% endblock %}
{% block styleSheets%}
<link rel="stylesheet" href="{{ base_dir ~ asset('css/main.css') }}">
<style>
.newPage {
page-break-after: always;
page-break-inside: avoid;
}
.stickerWidth{
height: 180px;
width: 33%;
float: left;
background-color: green;
}
.text{
background-color: red;
margin-right: 5px;
margin-top: 5px;
margin-top: 5px;
}
</style>
{% endblock %}
EDIT: added the latest code, used labels to count if i reach 21 then new page
The quick solution here:
To create a new page every 21 labels:
{% for orderItem in sale.getOrderItems %}
{% if (loop.index % (7*3) == 0) %}
<div class="newPage"></div>
{% endif %}
{# ... #}
css:
.newPage {
page-break-before:always
}
My own implementation:
Controller:
public function export() {
$html = $this->get('yourPDFservice')->getHtml($someParams);
//echo $html;exit; // use that to debug your html
$snappyPdf = $this->getLibExportPDF();
return new Response(
$snappyPdf->getOutputFromHtml($html),
200,
array(
'Content-Type' => 'application/pdf',
'Content-Disposition' => 'attachment; filename="filename.pdf"'
)
);
private function getLibExportPDF() {
$snappyPdf = $this->get('knp_snappy.pdf');
$snappyPdf->setOption('page-size', 'A4');// 21x29.7 cm
$snappyPdf->setOption('zoom', 1 );
$snappyPdf->setOption('dpi', 300 );// 21x29.7 (300dpi)
return $snappyPdf;
}
The html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.nobreak {
page-break-inside:avoid;
}
.newPage {
page-break-before:always;
}
</style>
</head>
<body>
{# Your html code here #}
</body>
</html>
I'm trying to use tamplates for the site. I have base.html
<!DOCTYPE html>
<html>
{% load staticfiles %}
<head>
<title>{% block title %}{% endblock %}</title>
{% block url %}{% endblock %}
<link rel = "stylesheet" href="{% static "app/css/base.css" %}"/>
</head>
<body link="#FFFFFF" alink="#fefefe" alink="#FFFFFF" vlink="#FFFFFF">
<div class="page-wrap">{% block content %}{% endblock %}</div>
<footer class="site-footer">
footer information
</footer>
</body>
</html>
base.css
* {
margin: 0%;
}
html, body {
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.page-wrap {
min-height: 100%;
margin-bottom: -100px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 100px;
}
.site-footer {
width: 100%;
background: #222222;
opacity: 1;
}
The footer at the index.html is working correctly, but on the other's html footer is standing under divs, and don't stick to footer. Is it possible to fix it? Thank u!
UPD:
There seems a little bag at the index.
{% extends "app/base.html" %}
{% load staticfiles %}
{% block title %}Feedbacker{% endblock %}
{% block url %}
{% endblock %}
{% block content %}
<div id="content">
{% if user.is_authenticated %}
<div id="usDescr"> Welcome, {{user.username}} </div>
<p class="myBtn"><a href="/my" >My Cab</a></p>
{% else %}
<header class = "descr">
header information
</header>
<div class="login-card">
login box
</form>
</div>
</div>
{% endif %}
{% endblock %}
If I'm stay not logged in footer works correctly, but if I log in and content changes to the {% if user.is_authenticated %} footer will leave his palce and stay under div = "Content"
It was pretty small error - I used {% endblock %} on the one up line