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
Related
I am working on CS50 Project 2 and have a webpage that displays active listings. I want to add some changes to the css, but it nothing happens when I add changes to the style in the head, but inline styles work. How do I make it work in the head style?
{% extends "auctions/layout.html" %}
<head>
{% block style %}
<style>
.text {
font-size: 10%;
}
</style>
{% endblock %}
</head>
{% block body %}
<h2>Active Listings</h2>
{% for listing in listings %}
<img src ="{{ listing.image }}" style = "height: 10%; width: 10%;">
<h4 class = "text" style = "color: aqua;">{{ listing.title }}</h4>
<h6>Description: {{ listing.description }}</h6>
<h6>Category: {{ listing.category }}</h6>
<h6>Price: ${{ listing.bid }}</h6>
{% endfor %}
{% endblock %}
This is the code. The font size doesn't change, but it will change colors because of the inline style.
If I add the color style to the head style, not in the inline, nothing happens. This is that code.
<head>
{% block style %}
<style>
.text {
font-size: 50%;
font-family: fantasy;
color: aqua;
}
</style>
{% endblock %}
</head>
{% block body %}
<h2>Active Listings</h2>
{% for listing in listings %}
<img src ="{{ listing.image }}" style = "height: 10%; width: 10%;">
<h4 class = "text">{{ listing.title }}</h4>
<h6>Description: {{ listing.description }}</h6>
<h6>Category: {{ listing.category }}</h6>
<h6>Price: ${{ listing.bid }}</h6>
{% endfor %}
{% endblock %}
In this code the style does not change at all.
This is the html code that is rendered.
{% block body %}
<h2>Active Listings</h2>
{% for listing in listings %}
<img src ="{{ listing.image }}" style = "height: 10%; width: 10%;">
<h4 class = "text">{{ listing.title }}</h4>
<h6>Description: {{ listing.description }}</h6>
<h6>Category: {{ listing.category }}</h6>
<h6>Price: ${{ listing.bid }}</h6>
{% endfor %}
{% endblock %}
Because this is a Django template, you can link a stylesheet stored in a static file folder. This link is a video that explains how to do it.
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.
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 have this div element in the body of the html page:
<div id="alerts">
{% block alerts %}
{% try %}
{% if alerts is not None %}
{% for alert in alerts %}
<div class="{{alert.get('level', 'alert') }}">
{{ alert.get('content') }}
</div>
{% end %}
{% end %}
{% except NameError %}
{% end %}
{% end %}
</div>
that shows an alert or error in some situations.
But when I scroll down the page, this is not visible. How can show this element in the top of the page in relation with the scrolling of the page itself?
The css is this:
#alerts {
display:none;
top: 0;
left: 0;
width: 100%;
position: absolute;
z-index: 0;
}
Try position:fixed instead of absolute here's more info on positioning just in case: https://developer.mozilla.org/en-US/docs/CSS/position