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
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>
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.
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 %}
Hello I have a HTML that shows all the artworks based on their collections as bellow:now, the collection "No_COLLECTION" is empty but it shows it's collection name and an empty space. I tried to remove it but i couldn't. Please help me to remove all the collections that doesn't have artworks in them.
{% extends "base.html" %}
{% load static %}
{% block content %}
<div id="main" style='min-height:800px;'>
{% with 'No_COLLECTION woodtest Test-2 Culture KASHAN HUMAN mine' as list %}
{% for i in list.split %}
<script>
var level = 0;
</script>
<div class="row" style="position: relative;margin-bottom: 30px;">
<div>{{i}}</div>
<div class="workSeriesThumbnailStrip">
{% for obj in object_list %}
{% if obj.collection == i %}
<script>
var level = level+1;
</script>
<a href="{{ obj.get_absolute_url }}"><img src="{{ obj.image.url }}"
style="float:left;width:67px;height:87px;margin:10px;" ></a>
{% endif %}
{% endfor %}
</div>
<script>
document.write(level);
</script>
</div>
{% endfor %}
<script>
if ($('.workSeriesThumbnailStrip').is(':empty')) {
$('.row').remove();
}
</script>
{% endwith %}
</div>
<div class="clear"></div>
{% endblock content %}
Add if statement. If the list is not empty, put your div inside that if statement body. else just div an empty div.
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