I have multiple templates in Jinja2 that extend my layout. They require different backgrounds. I've followed the instructions in the docs located here
http://flask.pocoo.org/docs/0.12/patterns/templateinheritance/#child-template,
but can't seem to get them to work. Thoughts on what is going wrong?
Here's the relevant section of layout.html:
<html>
<head>
{% block head %}
<title>Verbatim: Book Reviews & Recommendations</title>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class=flashes>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- Fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=IM+Fell+English+SC" rel="stylesheet">
<!-- Additional CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
{% endblock %}
</head>
And here's the template in which I'm trying to insert a different background image:
{% extends "layout.html" %}
{% block head %}
{{ super() }}
<style>
body {
background-image: url(yellowed-paper-texture.jpg);
}
</style>
{% endblock %}
{% block body %}
<div class="container h-100 my-5 form">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-md-12 col-sm-12 col-xs-12 form">
etc ....
EDIT:
My CSS file doesn't appear to contain anything exciting that would abridge the inheritance process.
#media (max-width: 768px) {
div.ratings {
font-size: 13px; }
}
#media (max-width: 768px) {
#siteName {
font-size: 26px; }
#siteSubTitle {
font-size: 20px; }
#siteTagLine {
font-size: 14px; } }
#media (min-width: 768px) and (max-width: 992px) {
#siteName {
font-size: 26px; }
#siteSubTitle {
font-size: 20px; }
#siteTagLine {
font-size: 14px; } }
#media (min-width: 992px) {
#siteName {
font-size: 36px; }
#siteSubTitle {
font-size: 30px; }
#siteTagLine {
font-size: 24px; } }
#siteName, #siteSubTitle, #siteTagLine {
font-family: "IM Fell English SC", serif; }
.blank_row {
height: 10px !important;
/* overwrites any other rules */
background-color: #FFFFFF; }
a.nav-link {
color: #E8E8EE !important; }
a.nav-link:hover {
text-shadow: 0 0 5px #FFD700; }
.navbar.navbar-expand-md {
background-color: #000000;
border-color: #FFFFFF; }
div.container.siteTitle {
background-image: url(yellowed-paper-texture.jpg);
height: 100%;
width: 100%; }
.banner {
background-image: url(yellowed-paper-texture.jpg);
height: 20vh; }
.black-border-bottom {
border-bottom: 2px solid black; }
#loginPrompt {
font-family: "IM Fell English SC", serif; }
/*change btn color by adding custom-btn class*/
/*https://stackoverflow.com/questions/49184471*/
.btn-primary.custom-btn {
background-color: #000;
border-color: #000; }
The problem was here:
body {
background-image: url(yellowed-paper-texture.jpg);
}
The url link needed to be url('/static/yellowed-paper-texture.jpg').
Related
I've been using django for a while but I'm just a beginner in css, I don't know much. I put style on my style.css file which is in the static folder and I placed the link in my template base.html but when I launch the server, the css style does not apply. what to do?
mon templates base.html
{% load static %}
<html>
<head>
<title>Lax blog</title>
<link rel="stylesheet" href="{% static 'style.css' %}" />
</head>
<body>
<div class="sidebar">
<h1>Lax Blog</h1>
{% if user.is_authenticated %} {% if user.profile_photo %}
<img class="avatar" src="{{ user.profile_photo.url }}" />
{% else %}
<img class="avatar" src="{% static 'images/default_profile.png'%}" />
{% endif %}
<p>Accueil</p>
<p>
Vous etes connecté entant que {{request.user }}
Se déconnecter
</p>
{% endif %}
</div>
<div class="main">{% block content %}{% endblock content %}</div>
</body>
</html>
mon fichier style.css
body {
background-color: white;
color: blue;
}
html {
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.sidebar {
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 220px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #1d3030;
color: #ffffe6;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 15px;
padding-left: 10px;
padding-right: 10px;
}
/* le lien de navigation */
.sidebar a {
text-decoration: none;
color:yellow;
display: block;
}
.main {
margin-left: 240px; /* Same as the width of the sidebar */
padding: 20px;
}
.avatar {
width: 80%;
border-radius: 10%;
display: block;
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
}
I thought the problem was on the browser, but I tried with firefox, edge and chrome but nothing worked. I delete the caches, always the same thing
So I am using django to create a website but there must be a problem in my CSS and or HTML code, when I run the server the text on the pages is being covered by the sidenav bar I have. I previously had a width set for the sidenav but removed it but that didn't work either, here is the code:
<html>
<head>
<style type="text/css">
.sidenav {
height: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover{
color: #f1f1f1;
}
.main{
margin-left: 160px;
padding: 0px 10px;
}
</style>
<title>{% block title %} My Website {% endblock %}</title>
</head>
<body>
<div class="sidenav">
Home
Create
View
</div>
<div id="content", name="content"></div>
{% block content %}
{% endblock %}
</body>
</html>
You are not using the main class you defined. Also your { block content } doesn't have a <div> around it. You could try creating a <div> for the sidebar and a <div> for the { block content }
I have 2 css columns on my page: the left one is 75%, and the right is 25%. However, for some reason the right column is sticking out slightly, making it wider than the page (pictured on bottom). How I make both columns together the same width as the logo on top?
This is my base html:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-175481126-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-175481126-1');
</script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
font-family: Tahoma, Geneva, sans-serif;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
color: white;
text-decoration:none;
}
/* for buttons*/
.paging {
background-color: #333;
border: none;
color: white;
padding: 8px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
}
button:hover {
background-color: #111;
}
.register {
float: right;
}
.paging {
background-color: #333;
border: none;
color: white;
padding: 8px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
}
button:hover {
background-color: #111;
}
/* title */
.title {
color: black;
padding: 10px;
text-align: center;
font-size: 40px;
font-family: Tahoma, Geneva, sans-serif;
Color: black;
text-decoration: none;
}
/* descriptions */
.description {
color: black;
padding: 15px;
font-family: Tahoma, Geneva, sans-serif;
text-align: left;
font-size: 13px;
}
/* embedd url */
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
margin-left: auto; /* Automatic margin from left */
margin-right: auto; /* Automatic margin from right */
}
.iframe-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
/* make columns */
.ads {
float: right;
background-color: #c1c4c9;
width: 25%;
}
.videos {
float: left;
width: 75%;
padding-right: 10%;
padding-left: 10%;
}
.image {
/* padding-right: 3%;*/
/* padding-left: 3%;*/
padding-top: 3%;
padding-bottom: 3%;
}
.row {
display: flex;
}
.banner {
float: left;
width: 100%;
height: 5%;
background-color: red;
color: white;
text-align: center;
}
/* header */
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
font-family: Tahoma, Geneva, sans-serif;
}
</style>
<html>
{% load static %}
<link rel="shortcut icon" type="image/png" href="{% static 'images/favicon.ico' %}"/>
<div class="header">
<a href="/">
<img src="https://i.ibb.co/5Rqps7F/logo-black.png" alt="Computer Man">
</a>
</div>
<ul>
<li class="all">All videos</li>
<li class="stam">Stam videos</li>
<li class="music">Music videos</li>
<li class="news">News videos</li>
<li class="contact">Contact</li>
<li class="register">Login/Register</li>
</ul>
<div class="banner">
<text align="center">We are still developing our site, so we may not be able to update videos as often as we want</text>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
This is the page html:
{% include 'base.html' %}
<style>
.{{ category }} {
background-color: grey;
}
</style>
<div class="row">
<div class="videos">
{% autoescape off %}
<h1 class="title"> {{ video_.title }} </h1>
{% ifnotequal video_.tag 'none' %}
<small align = left> {{ video_.tag }} </small>
{% endifnotequal %}
<div class="iframe-container"><p align="center"> {{ video_.url }}</p></div>
<div class="description"> {{ video_.description }} </div>
<hr/>
{% endautoescape %}
</div>
<div class="ads">
{% for ad in ad_item %}
{% ifequal ad.redirect 'False' %}
<img class="image" src="{{ ad.pic }}"></img>
{% endifequal %}
{% ifnotequal ad.redirect 'False' %}
<img class="image" src="{{ ad.pic }}"></img>
{% endifnotequal %}
{% endfor %}
</div>
</div>
You can also see on my site, tachlis.herokuapp.com (that's where the problem is).
The problem you're describing in your question is due to elements overflowing the body width. Now, knowing this, it's always an annoyance trying to actually narrow down which element is causing this.
One way to figure it out is to run this script in the console:
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
I took the liberty to do that on your site, and the culprit is this block:
<div class="row">
<div class="videos>
.....
</div>
<div class="ads">
.....
</div>
</div>
A very quick fix would be to simply add overflow-x: hidden to the body element.
body {
overflow-x: hidden;
}
You could also go through your row block and see what specifically is causing the overflow to happen.
The ideal solution would be to add *{ box-sizing: border-box; }, define a width of 100% for your row element, remove the margins from your row element.
Example CSS:
* {
box-sizing: border-box;
}
.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 0 0 100%;
max-width: 100%;
/* you can just remove these margins all together. Just wanted to emphasize that there should be no margin left or right, to avoid overflow */
margin-left: 0px;
margin-right: 0px;
}
.ads {
display: block;
float: right;
background-color: #c1c4c9;
width: 25%;
}
.videos {
display: block;
float: left;
width: 75%;
padding-right: 10%;
padding-left: 10%;
}
Using flex on the container and float on the children will not work. Erase the floats, remove flex-wrap from the container, add box-sizing: border-box to all elements and - if you want strict widths - use flex-grow: 0 and flex-shrink: 0 on the child elements (= your "columns").
I created a signup page and a login page. For this, I used django's default authentication features and forms. To modify a bit I used crispy forms but my labels are positioned wrong on my screen.
I have attached an image of my signup page where you can see the labels username, password, password again is positioned wrong.
Signup page
here's my signup.html
{% extends 'base.html' %}
{% load static %}
{% load crispy_forms_tags %}
{% block content %}
<body>
<div class="container">
<div class="col-md-6 mx-auto text-center">
<img src="{% static 'pd/images/logo.png' %}" style="width:300px;">
<h2>Welcome to Panasonic Energy</h2>
</div>
<div class="row">
<div class="col-md-4 mx-auto">
<div class="myform form ">
<form method="post">
{% csrf_token %}
{{ form|crispy }}
<div class="text-center ">
<button type="submit" class=" btn btn-block send-button tx-tfm">Create Your Free Account</button>
</div>
{% if form.errors %}
<p class=" label label-danger">
Please try again.
</p>
{% endif %}
</form>
</div>
</div>
</div>
</div>
</body>
{% endblock %}
and this is my signup.css. I thought the problem was in my css as the label affecting styles may be overriding Django's default styles so I commented them out but still, the problem remains.
.send-button {
background: #54C7C3;
width: 100%;
font-weight: 600;
color: #fff;
padding: 8px 25px;
}
/* input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
} */
/* .g-button {
color: #fff !important;
border: 1px solid #EA4335;
background: #ea4335 !important;
width: 100%;
font-weight: 600;
color: #fff;
padding: 8px 25px;
} */
/* .my-input {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
cursor: text;
padding: 8px 10px;
transition: border .1s linear;
} */
/* .header-title {
margin: 5rem 0;
} */
h1 {
font-size: 31px;
line-height: 40px;
font-weight: 600;
color: #4c5357;
}
h2 {
color: #5e8396;
font-size: 21px;
line-height: 32px;
font-weight: 400;
}
/* .login-or {
position: relative;
color: #aaa;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
} */
/*
.span-or {
display: block;
position: absolute;
left: 50%;
top: -2px;
margin-left: -25px;
background-color: #fff;
width: 50px;
text-align: center;
} */
.hr-or {
height: 1px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
#media screen and (max-width:480px) {
h1 {
font-size: 26px;
}
h2 {
font-size: 20px;
}
}
Please help me fixing the position of these labels.
Thanks in advance...
you should render form as {% crispy form %} as you have loaded the crispy form tag at top not like {{ form|crispy}} and you dont need to add <form> tag as you are building it in {% crispy form %}. So some of html is also redundant and you can generate the submit button in crispy form itself like
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit
class SignUpForm(forms.Form):
Username=forms.CharField(required=True)
Password=forms.CharField(widget=forms.PasswordInput,required=True)
Confirm_Password=forms.CharField(widget=forms.PasswordInput,required=True)
def __init__(self,*args,**kwargs):
super(SignUpForm,self).__init__(*args)
self.helper=FormHelper()
self.helper.method='POST'
self.helper.add_input(Submit('gobtn','Login',css_class='btn-success'))
def clean(self):
cleaned_data = super(SignUpForm, self).clean()
password = cleaned_data.get('Password')
password_confirm = cleaned_data.get('Confirm_password')
if password != password_confirm:
raise forms.ValidationError("The two password fields must match.")
return cleaned_data
and make sure you pass it in you view like
def myview(request):
#your logic here
context={}
if request.method == "GET":
context['form']= SignUpForm()
else:
#POST request block
if SignUpForm(request.POST).is_valid():
#do what you like here
else:
#if form is invalid
context['form']= SignUpForm(request.POST) # this will render if validation errors so you can remove your if errors block in html
render(request,'template_name.html',context)
I'm working on a project using flask that takes advantage of jinja templates. My layout.html file contains a grey colored container that is extended to all other child pages. For one of the pages that extends the layout.html, I have an image that I would like to float left outside of the container. I tried setting the css position to absolute to no avail. Is there anything else I could do besides making the page seperate from the layout.html? I would like to keep the container.
Here's the layout.html:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="{{url_for('static',filename ='img/favicon-32x32.png')}}" sizes="32x32" />
<title>Foodie</title>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class=flashes>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<link rel="stylesheet" href="{{url_for('static', f ilename='css/main.css') }}">
<link rel="stylesheet" href="{{url_for('static', filename='css/style.css') }}">
</head>
<body>
<header>
<div class="container">
<h1 class="logo">Test1</h1>
<ul class ="about" style= "list-style: none">
<li>Test2</li>
</ul>
</div>
</header>
<div class="container">
{% block content %}
{% endblock %}
</div>
</body>
</html>
Here's the home.html containing the image that I would like to float left [the div with the id of footer.
{% extends "layout.html" %}
{% block content %}
{% if error %}
<p class="flash">Error:{{ error }}
{% endif %}
<div id="home_city" class="jumbo">
<div class="search-form" align="center">
<h1> Welcome, tell us where you are from: </h1>
<form class="form-container" action="/home_city" method="post" autocomplete="on">
<input type="text" class="search-field" name="city" required placeholder="Enter your home City" />
<div class="submit-container">
<input type="submit" value="" class="submit"/>
</div>
</form>
</div>
<div align="center">
<ul id="random">
<li>#COFFEE</li>
<li>#OMG</li>
<li>#LATTE</li>
<li>#Starbucks</li>
<li>#Chocolate</li>
<li>#Yummy</li>
<li>#Lunch</li>
<li>#THATPLATE</li>
<li>#FOODIE</li>
<li>#ROOTS</li>
<li>#FINEDINING</li>
<li>#VEGLIFE</li>
<li>#NOMSNOMS</li>
<li>#Breakfast</li>
<li>#Don'tbitethehandthatfeedsyou</li>
<li>#SWEETS</li>
<li>#Tapas</li>
<li>#Rice</li>
</ul>
</div>
</div>
<div id = "footer">
<img src ="{{url_for('static',filename ='img/Powered_By_Yelp_Black 2.png')}}" alt="Powered by Yelp">
<div id="beta">
<h1>BETA</h1>
</div>
</div>
{% endblock %}
Last but not least, here is the css file:
body {
margin: auto 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
}
header {
background-color: #2B2B2B;
height: 35px;
width: 100%;
margin-top: -21px;
padding: 0;
}
header h1.logo > a {
margin: 0;
font-size: 30px;
color: #fff;
text-transform: uppercase;
float: left;
text-decoration: none;
}
header h1.logo:hover > {
color: #fff;
text-decoration: none;
}
.container {
width: 940px;
margin: 0 auto;
}
header ul.about li{
margin:10px 0;
font-size: 20px;
float: right;
display: inline-block;
padding-right: 20px;
}
li > a {
color: #fff;
text-decoration: none;
}
div.jumbo {
padding: 30px 0 90px 0;
background-color: #eeeeee;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 33px;
}
h3 {
font-size: 1.7em;
font-weight: 100;
margin-top: 31px;
text-align: center;
letter-spacing: -1px;
color: #999;
}
div > h2{
font-size: 2em;
margin-top: 40px;
text-align: center;
letter-spacing: -2px;
}
div > p {
font-size: 1.5em;
margin-top: 40px;
text-align: center;
letter-spacing: -2px;
}
h1 > p {
font-size: 3em;
margin-top: 40px;
text-align: center;
letter-spacing: -2px;
}
#random {
font-size: 45px;
height: 100px;
width: 33%;
float: center;
text-align: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#random li {
text-decoration: none;
list-style-image: none;
list-style-type: none;
}
/* Message flashing */
.flash {
background-color: #FBB0B0;
padding: 10px;
width: 400px;
font-style: normal;
font-family: "Times New Roman", Times, serif;
}
.footer {
position:fixed;
left:;
}
.footer > #beta {
bottom : 0;
font-size: 70px;
font-family:"Trebuchet MS", Helvetica, sans-serif;
text-align: center;
}
ul .rest_result {
font-size: 30px;
font-family: "Times New Roman", Times, serif;
text-align: center;
text-transform: capitalize;
}
.food_choice li {
display: none;
text-align: center;
}
.food_choice .active {
display: block;
}
.About {
font-family: ff-clan-web-pro-wide,sans-serif;
font-weight: 400;
}
Add to your css:
#footer > img {
margin-left: -3em;
}
Adjust the value to the width of your image.
Also it seems in your css you have a class footer - .footer, but in the html you have an id - id = "footer".