Develop Reference

Corey Schafer Django (Part 3): HTML not formatting right

So I'm going through Corey Schafer's Django series, and I'm at the part where he is building the HTML template for the website and for some reason it isn't formatting correctly. I downloaded his repository and re-ran his code and still got the same error? The only difference that I can think of is that he is using Django 2.1 and I'm using Django 3.0 but that shouldn't be it.
Here is how it looks:
Here is how it should look:
And lastly this is his Github for the link: https://github.com/CoreyMSchafer/code_snippets/tree/master/Django_Blog/03-Templates
Edit: Got it working. You have to do four steps:
(1) Delete integrity and crossorigin from this line in the base.html (line 11)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
To get this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
(2) Update your static/blog/main.css with this code:
body {
background: #fafafa;
color: #333333;
margin-top: 5rem;
}
h1, h2, h3, h4, h5, h6 {
color: #444444;
}
ul {
margin: 0;
}
.bg-steel {
background-color: #5f788a;
}
.site-header .navbar-nav .nav-link {
color: #cbd5db;
}
.site-header .navbar-nav .nav-link:hover {
color: #ffffff;
}
.site-header .navbar-nav .nav-link.active {
font-weight: 500;
}
.content-section {
background: #ffffff;
padding: 10px 20px;
border: 1px solid #dddddd;
border-radius: 3px;
margin-bottom: 20px;
}
.article-title {
color: #444444;
}
a.article-title:hover {
color: #428bca;
text-decoration: none;
}
.article-content {
white-space: pre-line;
}
.article-img {
height: 65px;
width: 65px;
margin-right: 16px;
}
.article-metadata {
padding-bottom: 1px;
margin-bottom: 4px;
border-bottom: 1px solid #e3e3e3
}
.article-metadata a:hover {
color: #333;
text-decoration: none;
}
.article-svg {
width: 25px;
height: 25px;
vertical-align: middle;
}
.account-img {
height: 125px;
width: 125px;
margin-right: 20px;
margin-bottom: 16px;
}
.account-heading {
font-size: 2.5rem;
}
(3) Update your templates/blog/home.html with this code:
{% extends "blog/base.html" %}
{% block content %}
{% for post in posts %}
<article class="media content-section">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2" href="#">{{ post.author }}</a>
<small class="text-muted">{{ post.date_posted }}</small>
</div>
<h2><a class="article-title" href="#">{{ post.title }}</a></h2>
<p class="article-content">{{ post.content }}</p>
</div>
</article>
{% endfor %}
{% endblock content %}
(4) Close your server, and clear your browser from everything (cookies included)

Solution: A small change in your "main.css" file, add !important at the
end of color hash as:
.bg-steel {
background-color: #5f788a!important;
}
=========================================================
Explanation:
You will have to understand the concept of overriding of CSS.
If a component is loading with "!important" in the parent CSS such as:
background-color: #5f788a!important;
instead of just:
background-color: #5f788a;
In such cases, you will not be able to override it in your custom/child CSS because !important declares it important and can't be overridden directly.
However, you can still override it in the custom CSS by applying !important at the end of the value of the component just the way I did above.
====================================================
You may be confused about Why did it work in Corey's CSS ?
Answer: The version of bootstrap Corey used in the tutorial was not rendering the background-color with the term !important at the end and hence he was able to override it directly. But nowadays, bootstrap color classes render with background-color: #5f788a!important; and hence can't be overridden directly.
Hope I could help you out.
Thanks
akaroshaa#gmail.com

Right now I'm fully suspecting something is wrong with your custom css.
First reason: bg-steel is not a default color, so you need to write it somewhere else. However, even with the line below, the navbar didn't show up.
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
Second reason: for a division to have a border, header, and content with margins applied, you either use a default card class or you implement one on your own -- found in this line, which also didn't work.
<article class="media content-section">
Third reason: obvious enough, the background colors are different. In your code, it's pure white, which is what bootstrap's default comes with. If the custom sheet is applied, the background color will then look darker.
Here's what I'll suggest you do:
Go to your HTML or settings.py (if you used {% load static %}) file and check whether your static or import paths are correct
Go through the video one more time and make sure you have no typos.
As a matter of fact, the javascript files ARE necessary. If you don't include them, things like dropdowns and modals won't work properly.

Unable to resize image in CSS

I am developing a webpage through Flask and would like to generate PDF using WeasyPrint.
I do understand that flask would require static url of defining my css file and include #media print at the css.
from
<link rel=stylesheet href="{{ url_for('static', filename='css/style.css') }}">
to
<link rel=stylesheet href="{{ url_for('static', filename='css/print.css') }}" media= "print" >
#media print {
logo{
width : 50px !important;
height : 100px !important;
object-fit: cover;
}
}
But it does not appear the resized image to my desired requirements.

This command don't work at weasyprint,
You will need use CSS in Html File.
Like that:
<style> /* use CSS into style */
#page {
size: A4; /* Change from the default size of A4 */
margin: 3.5mm; /* Set margin on each page */
}
.IMAGE{
height: 120px;
width: 120px;
margin: 0 auto;
}
</style>
Bye.

Position absolute for <img/> when using xhtml2pdf (Django)?

Can I generate PDF with CSS position: absolute; for <img src="..."/> html tag?
I need to place handwritten signature and company stamp (PNG files) to bottom of order voucher at non standard place, that they run a little on the goods table. Position absolute will save my time for that, but it's don't working.
EDIT:
I have an answer from xhtml2pdf GitHub repo:
Well absolute position is not supported right now, but if you are looking for how to set images in specific part of page in all pages, see frames.
So, my question is still actual. Real usage example with xhtml2pdf frames for images will be great.

And real usage example from Luis Zárate (xhtml2pdf collaborator):
<html>
<head>
<style>
#page {
size: a4 portrait;
#frame content_frame { /* Content Frame */
left: 50pt; width: 512pt; top: 90pt; height: 632pt;
}
#frame footer_frame { /* Another static Frame */
-pdf-frame-content: footer_content;
left: 450pt; width: 300pt; top: 672pt; height: 200pt;
}
}
</style>
</head>
<body>
<!-- Content for Static Frame 'footer_frame' -->
<div id="footer_content">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/123px-Tux.svg.png?download">
</div>
{% lorem 10 p %}
<pdf:pdf-next-page />
{% lorem 10 p %}
</body>
</html>
Code generates this PDF file: https://github.com/xhtml2pdf/xhtml2pdf/files/1754033/report-7.pdf

Adapt a Macro for Plone to display nothing if specific folder does not exist?

I have a macro for a Researcher Profile on Plone that I would like to adapt to display nothing if the desired folder does not exist. As it is now, if the "selected-publications" folder does not exist, it throws an error. Is it possible to make the macro display nothing if the "context/selected-publications/..." is empty or does not exist? Here is the code I have so far:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" i18n:domain="RDSLocal">
<body>
<div id="publications" metal:define-macro="publications" tal:omit-tag="">
<!--publications-->
<h2>Publications</h2>
<ul style="list-style: none; margin-left: 0px; margin-right: 0px;">
<tal:block tal:repeat="publication context/selected-publications/getFolderContents">
<li><tal:block tal:content="publication/Authors"/> (<tal:block tal:content="publication/publication_year"/>) <a tal:attributes="href publication/getURL" tal:content="publication/Title"/></li><br />
</tal:block>
</ul>
</div>
</body>
</html>

Use tal:define and tal:condition to get and check the publications exist before you iterate through them with tal:repeat. Taking your code verbatim as a baseline:
<div id="publications" metal:define-macro="publications" tal:omit-tag="">
<!--publications-->
<h2>Publications</h2>
<ul style="list-style: none; margin-left: 0px; margin-right: 0px;"
tal:define="publications nocall:context/selected-publications|nothing"
tal:condition="publications">
<tal:block tal:repeat="publication publications/getFolderContents">
<li><tal:block tal:content="publication/Authors"/>
(<tal:block tal:content="publication/publication_year"/>)
<a tal:attributes="href publication/getURL"
tal:content="publication/Title"/></li><br />
</tal:block>
</ul>
</div>
This is a common idiom in Zope templates. If you look in Plone's source code you'll find a treasure trove of examples of this technique that you can plunder.
Maybe you want to hide the H2 if no publications exist? If so put the tal:define and tal:condition on the div instead.
Are you calling this from some other template? If not there's no need to define the snippet as a macro.

Printing dynamic django view template

I'm working on a django app. I have a page that displays a log of items, and each item has a "Print label" link. At the moment, clicking the link displays the label for that particular item in a popup screen, but does not send the label to a printer. The view function behind the "Print label" link is shown below:
#login_required
def print_label(request, id):
s = Item.objects.get(pk = id)
return render_to_response('templates/label.html', {'s': s}, context_instance=RequestContext(request))
The HTML for the label is shown below:
{% load humanize %}
<head>
<style type="text/css">
div{
min-width: 350px;
max-width: 350px;
text-align: center;
}
body{
font-family: Arial;
width: 370px;
height: 560px;
text-align: center;
}
</style>
</head>
<body>
<div id="labelHeader">
<img src="{{ STATIC_URL }}img/label-header.png" width="350px">
</div>
<hr/>
<p></p>
<div id="destinationAddress">
<span style="font-size: xx-large; font-weight: bold;">{{ s.item_number }}</span>
</p>
DESTINATION:
<br/>
<strong>{{s.full_name}}</strong><br/>
<strong>{{ s.address }}</strong><br/>
<strong>{{s.city}}, {{s.state}}</strong><br/>
<strong>Tel: {{s.telephone}}</strong>
</div>
<p></p>
<hr/>
<div id="labelfooter">
<img src="{{ STATIC_URL }}img/label-footer.png" width="350px">
</div>
</body>
My question is, how can I also send the label displayed to a printer in the same function? I researched and found some libraries (like xhtml2pdf, webkit2png, pdfcrowd, etc), but they'll create a pdf or image file of the label and I'll have to send it to a printer. Is it possible to send straight to a printer without creating a pdf copy of the label? If so, please show me how to achieve this.
Your answers and suggestions are highly welcome. Thank you.

Presumably, as this is a Django app, it's the client's printer that you need to use. The only way to do this is to tell the user's browser to print. You will need to use Javascript for this: window.print().