I have two pages that use base.html as a base template: index.html and login.html. login.html has a fully functional nav bar (links and :hover working) where index.html shows the nav bar but won't recognise the links.
Bear with me as this is my first post, so I have no idea what I need to provide etc...
base.html:
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Graduate Proofreading | Professional Essay
Proofreading{% endblock title %}</title>
{% block head_meta %}
{% block head_meta_charset %}
<meta charset="UTF-8">
{% endblock head_meta_charset %}
{% block head_meta_contentlanguage %}
<meta http-equiv="Content-Language" value="en-UK" />
{% endblock head_meta_contentlanguage %}
{% block head_meta_viewport %}
<meta name="viewport" content="width=device-width, initial-
scale=1">
{% endblock head_meta_viewport %}
{% endblock head_meta %}
{% block head_css %}
{% block head_css_site %}
<!--=================================CSS LINKS==========================================-->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-cyan.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<!-- Custom fonts for this template-->
<!-- Custom styles for this template-->
{% endblock head_css_site %}
{% block head_css_section %}
<style type="text/css">
</style>
{% endblock head_css_section %}
{% block head_css_page %}
{% endblock head_css_page %}
{% endblock head_css %}
</head>
<body>
<!-- Hidden Side Navigation -->
<nav class="w3-sidebar w3-bar-block w3-card w3-animate-left w3-
center " style="display:none" id="mySidebar">
<h1 class="w3-xxxlarge w3-text-theme">Side Navigation</h1>
Link 1
Link 2
Link 3
Link 4
<button class="w3-bar-item w3-button" onclick="w3_close()">Close <i class="fa fa-remove"></i></button>
</nav>
<!-- ====================================================
| MAIN NAV BAR |
========================================================
-->
<div class="w3-bar w3-left w3-dark-gray" style="width:100%;overflow:hidden;height:44px">
<button class="w3-bar-item w3-button w3-left" onclick="w3_open()" title="Sidebar"><i class="fas fa-bars fa-2x"></i></button>
<span id="nav-right-btn-margin" class="w3-bar-item w3-right" style="margin-right: 30px"> </span>
<a class="w3-bar-item w3-button w3-right w3-hide-small" href="{% url 'signup' %}" title="Sign Up" style="padding-top: 14px">SIGN UP</a>
<a class="w3-bar-item w3-button w3-right w3-hide-small" href="{% url 'login' %}" title="Login" style="padding-top: 14px">LOGIN</a>
<a class="w3-bar-item w3-button w3-right" href="#" title="#"></a>
<a class="w3-bar-item w3-button w3-right" href="#" title="#"></a>
</div>
{% block header %}
{% endblock header %}
{% block content %}
{% endblock content %}
{% block footer %}
<!-- Footer -->
<footer class="w3-container w3-dark-gray w3-padding-16">
<h3>Graduate Proofreading</h3>
<div style="position:relative;bottom:55px;" class="w3-tooltip w3-right">
<span class="w3-text w3-theme-light w3-padding">Go To Top</span>
<a class="w3-text-white" href="#myHeader"><span class="w3-xlarge">
<i class="fa fa-chevron-circle-up" style="color: #00aac1"></i></span></a>
</div>
<br>
<br>
<p>Website design and development by Luke Pilkington. For Full Stack Web Development, Visit www.lukepilkington.com</p>
</footer>
<script>
// Script for Sidebar etc
// Side navigation
function w3_open() {
var x = document.getElementById("mySidebar");
x.style.width = "100%";
x.style.fontSize = "40px";
x.style.paddingTop = "10%";
x.style.display = "block"
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
{% endblock footer%}
</body>
</html>
index.html:
{% extends "base.html" %}
<title>{% block title %}Professional Essay Proofreading{% endblock title %}</title>
{% block head_css_section %}
<style type="text/css">
</style>
{% endblock head_css_section %}
{% block header %}
<header class="w3-display-container" id="myHeader">
<img src="/static/pics/office.jpeg" style="width:100%; padding: 0px; opacity: 0.5;">
<div class="w3-display-middle w3-container" style="text-align: center">
<h4>GRADUTEPROOFREADING.CO.UK</h4>
<h1 class="w3-xxxlarge w3-animate-bottom">QUALITY ESSAY PROOFREADING</h1>
<div class="w3-padding-32">
<button class="w3-btn w3-xlarge w3-hover-light-grey" style="background-color: #00aac1" onclick="#" style=";"><span style="color: black; font-weight:900">TRY FOR FREE TODAY</span></button>
</div>
</div>
</header>
{% endblock header %}
{% block content %}
<body>
<div class="w3-row-padding w3-center w3-margin-top">
<div class="w3-third">
<div class="w3-card w3-container" style="min-height:460px">
<h3>Quality Proofreaders</h3><br>
<i class="fab fa-jenkins fa-7x" style="color: #00aac1"></i>
<!--<i class="w3-xxxlarge material-icons">person</i>-->
<p>Native English Proofreaders Only</p>
<p>University Graduates, Always</p>
<p>Impeccable Attention To Detail</p>
<p>Fast Turnaround</p>
</div>
</div>
<div class="w3-third">
<div class="w3-card w3-container" style="min-height:460px">
<h3>Unbeatable Price</h3><br>
<i class="far fa-money-bill-alt fa-7x" style="color: #00aac1"></i>
<p>Simple and Affordable</p>
<p>Just 1.4p Per Word</p>
<p>Proofread Any Essay</p>
<p></p>
</div>
</div>
<div class="w3-third">
<div class="w3-card w3-container" style="min-height:460px">
<h3>Try Our Dissertation Service</h3><br>
<i class="fas fa-graduation-cap fa-7x" style="color: #00aac1"></i>
<p></p>
<p>English Lit./Lang. Graduates Only</p>
<p>Essay Writing Style Improvements</p>
<p>Formatting Correction</p>
<p>Just 1.6 Pence Per Word!</p>
</div>
</div>
</div>
<div></div>
</body>
{% endblock content %}
</html>
finally, login.html:
{% extends "base.html" %}
<title>{% block title %}Login | Graduate Proofreading{% endblock title %}</title>
{% block head_css_section %}
<style type="text/css">
#media (max-width: 600px) {
input[type=text], input[type=password] {
width: 90%;
margin-top: 0;
}
#logincontainer {
}
</style>
{% endblock head_css_section %}
{% block header %}
<header class="w3-padding">
<i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-button w3-theme"></i>
<div class="w3-center" style="padding-top: 50px">
<h4></h4>
<h1 class="w3-xxxlarge w3-animate-bottom"></h1>
<div class="w3-padding-32">
<!-- <button class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey" onclick="#" style="font-weight:900;">TRY FOR FREE TODAY</button>
-->
</div>
</div>
</header>
{% endblock header %}
{% block content %}
<body class="w3-theme">
<div class="w3-card w3-display-middle w3-round" style="width: 60%; max-width:600px" id="logincontainer">
<div class="w3-container w3-dark-gray">
<form class="form-signin" action="#">
<h2 class="form-signin-heading">Login</h2>
</div>
<div class="w3-container w3-light-gray w3-padding-32" style="width:100%";>
<div>Username</div>
<input type="text" class="form-control" name="username" placeholder="Username/Email Address" required="" autofocus="" />
<div></div>
<div style="padding-right:6px">Password</div>
<input type="password" class="form-control" name="password" placeholder="Password" required=""/>
<label class="checkbox">
<div></div>
<input type="checkbox" value="remember-me" id="rememberMe" name="rememberMe"> Remember Me
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
</form>
</div>
<div class="w3-container w3-dark-gray" style="height:3em"></div>
</div>
</body>
{% endblock content %}
{% block footer %}
{% endblock footer %}
Please let me know if you need any other info. Thanks!
Make a new file for navbar and just
{%include 'navbar.html'%}
It should solve the problem and it should be easier
Try doing the following
<nav class="w3-sidebar w3-bar-block w3-card w3-animate-left w3-
center navbar-collapse collapse" style="display:none" id="mySidebar">
<h1 class="w3-xxxlarge w3-text-theme">Side Navigation</h1>
Link 1
Link 2
Link 3
Link 4
<button class="w3-bar-item w3-button" onclick="w3_close()">Close <i class="fa fa-remove"></i></button>
</nav>
Ok, I finally worked it out, it's not a Django issue at all, it's just that the w3.CSS class ".w3-display-container" invisibly covers up the nav bar above it for some reason.
index.html:
...
{% block header %}
<header class="w3-display-container" id="myHeader">
...
Padding the actual element ( in this example) didn't work. The only solution I could come up with was a rather inelegant one. I added a div above the element and padded it equal to the height of the nav bar.
<div style="padding-bottom: 44px";>
</div>
<div class="w3-display-container" id="myHeader">
https://www.w3schools.com/w3css/w3css_display.asp
Didn't tell me anything useful, but there's the link in case anyone wanted to do some digging.
Related
my login form is not looking good, it's too wide. how to make it smaller and center in the middle of the page?
signin html:
{% extends "accounts/_base.html" %}
{% block title %}
Sign In
{% endblock %}
{% block control %}
<form class="form-signin" action="{% url 'login' %}" method="post">
{% csrf_token %}
<h2 class="form-signin-heading">Sign In</h2>
<div class="form-group">
<div class="fieldWrapper">
{{ form.username.errors }}
{{ form.username.label_tag }}
{{ form.username }}
</div>
<div class="fieldWrapper">
{{ form.password.errors }}
{{ form.password.label_tag }}
{{ form.password }}
</div>
</div>
<label for="signIn" class="sr-only">Click</label>
<button id="signIn" class="btn btn-lg btn-primary btn-block" >Sign In</button>
</form>
<form class="form-signin" action="{% url 'signup' %}">
<button id="signUp" class="btn btn-lg btn-default btn-block">Sign up now!</button>
</form>
{% endblock %}
base html:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta CharacterSet='UTF-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %}</title>
{% load static %}
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="{% static 'js/main.js' %}"></script>
{% block script %}{% endblock %}
</head>
<body>
<!-- head -->
<nav id="navbar" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand mb-0" href="#">Pizza</a>
</div>
{% if user is not none %}
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
{% block nav_list %}{% endblock %}
</ul>
<form class="navbar-form navbar-right" action="{% url 'logout' %}" method="get">
<span>Welcome, {{ user }}. </span>
<button id="logout" class="btn btn-default btn-sm">Log out</button>
</form>
</div>
{% endif %}
</div>
</nav>
<!-- body -->
<div class="container" id="elem_cont">
{% if message is not none %}
<div class="alert alert-{{ message.0 }} alert-dismissable">{{ message.1 }}
<button type="button" class="close" data-dismiss="alert">×</button>
</div>
{% endif %}
{% block control %}
{% endblock %}
</div>
<div class="container" id="elem_disp">
{% block disp %}
{% endblock %}
</div>
<div class="container" id="elem_misc">
{% block misc %}
{% endblock %}
</div>
<!-- footer -->
<nav class="navbar navbar-fixed-bottom" id="nav_footer" role="navigation">
<div class="container" id="elem_foot">
<footer class="navbar" id="footer">
<hr>
{% block botm_cont %}
{% endblock %}
<p>© 2019 madlogos</p>
</footer>
</div>
</nav>
</body>
</html>
This is a styling issue for css.
You already have a css file referred to in your template (css/style.css), so you can add a style like the following to it. This will apply the style only to the form with the class form-signin:
form.form-signin {
max-width: 64ch;
margin: auto;
}
64ch is a good width for readability if there's a body of text, but you can tweak if it's not quite where you want the form on your page.
margin: auto will automatically handle the distances between the form and its containing div.
Don't forget to test at a variety of screen sizes. You may want to add a min-width value as well if you have other text on the page.
My background image is not shown on the website. The image is in static folder under /projectname/static/img and CSS is under /projectname/static/css/style.css. This is the css:
#showcase {
background: url("../img/showcase.jpg") no-repeat top center fixed/cover;
}
In template under /projectname/template/pagesapp/index.html there is id of element (id= showcase) where i want to apply image. But the image isn't shown. I have checked every thing, collected static and collected static under projectanme/rentalrooms/static,settings.py where. and static root on base (projectname/static)
#showcase {
background: url("../img/showcase.jpg") no-repeat top center fixed/cover;
position: relative;
min-height: 650px;
color: #fff;
padding-top: 6rem; }
#showcase .home-search {
min-height: 400px;
position: relative;
border-radius: 5px; }
#showcase .overlay {
content: '';
position: absolute;
top: 0;
left: 0;
min-height: 400px;
width: 100%;
background: rgba(51, 51, 51, 0.8); }
{% extends 'base.html' %}
{% block title %} | Welcome {% endblock%}
{% load humanize %}
{% block content %}
<!-- Showcase -->
<section id="showcase">
<div class="container text-center">
<div class="home-search p-5">
<div class="overlay p-5">
<h1 class="display-4 mb-4">
Rooms Searching Just Got So Easy
</h1>
<p class="lead">Stop Finding Rooms Manually Its Our Duty To Find Rooms According To Your Preference</p>
<div class="search">
<form action="{% url 'search' %}">
<!-- Form Row 1 -->
<div class="form-row">
<div class="col-md-4 mb-3">
<label class="sr-only">Keywords</label>
<input type="text" name="keywords" class="form-control" placeholder="Keyword (Search By Facility You Want)">
</div>
<div class="col-md-4 mb-3">
<label class="sr-only">City</label>
<input type="text" name="city" class="form-control" placeholder="City">
</div>
<div class="col-md-4 mb-3">
<label class="sr-only">State</label>
<select name="state" class="form-control">
<option selected="true" disabled="disabled">State (All)</option>
{% for key,value in state_choices.items %}
<option value="{{ key }}">{{ value }}</option>
{% endfor %}
</select>
</div>
</div>
<!-- Form Row 2 -->
<div class="form-row">
<div class="col-md-6 mb-3">
<label class="sr-only">Bedrooms</label>
<select name="bedrooms" class="form-control">
<option selected="true" disabled="disabled">Bedrooms (All)</option>
{% for key,value in bedroom_choices.items %}
<option value="{{ key }}">{{ value }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-6 mb-3">
<select name="price" class="form-control" id="type">
<option selected="true" disabled="disabled">Max Price (Any)</option>
{% for key,value in price_choices.items %}
<option value="{{ key }}">{{ value }}</option>
{% endfor %}
</select>
</div>
</div>
<button class="btn btn-secondary btn-block mt-4" type="submit">Submit form</button>
</form>
<!--
{% ifequal var request.user.username %}
<form action="{% url 'addlisting' %}">
<button class="btn btn-secondary btn-block mt-4" type="submit">Add listing</button>
</form>
{% endifequal%}
-->
</div>
</div>
</div>
</div>
</section>
<br>
<!-- Alert -->
{% include 'partials/_alerts.html' %}
<!-- Listings -->
<section id="listings" class="py-5">
<div class="container">
<h3 class="text-center mb-3">Latest Listings</h3>
<div class="row">
{% if listings %}
{% for listing in listings %}
<!-- Listing 2 -->
<div class="col-md-6 col-lg-4 mb-4">
<div class="card listing-preview">
<img class="card-img-top" src="{{ listing.photo_main.url }}" alt="">
<div class="card-img-overlay">
<h2>
<span class="badge badge-secondary text-white">Rs.{{ listing.price | intcomma }}</span>
</h2>
</div>
<div class="card-body">
<div class="listing-heading text-center">
<h4 class="text-primary">{{ listing.title }}</h4>
<p>
<i class="fas fa-map-marker text-secondary"></i> {{ listing.city }}, {{ listing.state }},
{{ listing.zipcode }}</p>
</div>
<hr>
<div class="row py-2 text-secondary">
<div class="col-6">
<i class="fas fa-th-large"></i> Security: {{ listing.security_fee }}</div>
<div class="col-6">
<i class="fas fa-child"></i> For: {% if listing.parking %} <span>Boys</span>{% else %} <span>Girls</span>{% endif %}</div>
</div>
<div class="row py-2 text-secondary">
<div class="col-6">
<i class="fas fa-bed"></i> Bedrooms: {{ listing.bedrooms }}</div>
<div class="col-6">
<i class="fas fa-bath"></i> Bathrooms: {{ listing.bathrooms }}</div>
</div>
<hr>
<div class="row py-2 text-secondary">
<div class="col-6">
<i class="fas fa-user"></i> {{listing.owner }} </div>
</div>
<div class="row text-secondary pb-2">
<div class="col-6">
<i class="fas fa-clock"></i> {{listing.list_date | timesince }} </div>
</div>
<hr>
More Info
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="col-md-12">
<p> No Listings Available</p>
</div>
{% endif %}
</div>
</div>
</section>
<section id="services" class="py-5 bg-secondary text-white">
<div class="container">
<div class="row text-center">
<div class="col-md-4">
<i class="fas fa-comment fa-4x mr-4"></i>
<hr>
<h3>Consulting Services</h3>
<p>Coming Soon</p>
</div>
<div class="col-md-4">
<i class="fas fa-home fa-4x mr-4"></i>
<hr>
<h3>Blog</h3>
<p>Coming Soon</p>
</div>
<div class="col-md-4">
<i class="fas fa-suitcase fa-4x mr-4"></i>
<hr>
<h3>Disclaimer</h3>
<p>Coming Soon</p>
</div>
</div>
</div>
</section>
{% endblock %}
<!--base.html connection of css link-->
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Font Awesome -->
<link rel="stylesheet" href="{% static 'css/all.css'%}">
<!-- Bootstrap -->
<link rel="stylesheet" href="{% static 'css/bootstrap.css'%}">
<!-- Custom -->
<link rel="stylesheet" href="{% static 'css/style.css'%}">
<!-- Light box -->
<link rel="stylesheet" href="{% static 'css/lightbox.min.css'%}">
<title>RentalRooms {% block title%}{% endblock%}</title>
</head>
<body>
<!-- Top Bar -->
{% include 'partials/_topbar.html' %}
<!-- Nav Bar -->
{% include 'partials/_navbar.html' %}
<!-- Main Content -->
{% block content %} {% endblock %}
<!-- Footer -->
{% include 'partials/_footer.html' %}
<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/lightbox.min.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
I've been able to add images to my post with ckeditor which is great but I can't seem to get the images to shrink and be responsive like the rest of the content/text in my post. I've tried a few tutorials and played around with things but nothing seems to work. Thanks.
Here is my BASE.HTML
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'portfolio_app/main.css' %}">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Davi Silveira DoP</title>
</head>
<body>
<main role="main">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right">
Back to top
</p>
<p class="text-muted">Davi Silveira © 2020</p>
<p>Associated with Silveira Brothers Films</p>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
BLOG.HTML
{% extends "portfolio_app/base.html" %}
{% block content %}
<div class="container">
<div class="row">
<div class="jumbotron content-section">
<small class="text-muted">
"Look at the natural light, when it's right and when it's beautiful. Don't mock with it, just use it as it is. If you must make any change, make it deliberately, make it delicately." -Douglas Kirkland
</small>
</div>
</div>
</div>
{% for post in posts %}
<div class="container">
<div class="col-md-12">
<article class="content-section">
<img class="rounded-square article-img" src="{{ post.author.profile.image.url }}">
<div class="body">
<div class="article-metadata">
<a class="mr-2" href="{% url 'user-posts' post.author.username %}">{{ post.author }}</a>
<small class="text-muted">{{ post.date_posted|date:'F d, Y' }}</small>
</div>
<h2><a class="article-title" href="{% url 'post-detail' post.id %}">{{ post.title|safe }}</a></h2>
<p class="article-content">{{ post.content|safe|truncatewords:30 }}</p>
</div>
</article>
</div>
</div>
{% endfor %}
<div class="container">
{% if is_paginated %}
{% if page_obj.has_previous %}
<a class="btn btn-outline-info mb-4" href="?page=1">First</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
<a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
{% endif %}
{% endif %}
</div>
{% endblock content %}
POST_DETAIL.HTML
{% extends "portfolio_app/base.html" %}
{% block content %}
<div class="py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-12">
<article class="content-section">
<img class="rounded-circle article-img" src="{{ object.author.profile.image.url }}">
<div class="body">
<div class="article-metadata">
<a class="mr-2" href="{% url 'user-posts' object.author.username %}">{{ object.author }}</a>
<small class="text-muted">{{ object.date_posted|date:'F d, Y' }}</small>
{% if object.author == user %}
<div>
<a class="btn btn-secondary btn-sm mt-1 mb-1" href="{% url 'post-update' object.id %}">Update Post</a>
<a class="btn btn-danger btn-sm mt-1 mb-1" href="{% url 'post-delete' object.id %}">Delete Post</a>
</div>
{% endif %}
</div>
<h2 class="article-title">{{ object.title }}</h2>
<p class="article-content">{{ object.content }}</p>
</div>
</article>
</div>
</div>
</div>
</div>
{% endblock content %}
POST_FORM.HTML
{% extends "portfolio_app/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container col-md-6">
<div class="content-section">
<div class="content-section">
<form method="POST">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom md-4">Blog Post</legend>
{{ form.media }}
{{ form|crispy }}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Post!</button>
</div>
</form>
</div>
</div>
</div>
{% endblock content %}
What am I missing..? Thank you again for your help.
I'm having some issues with the general layout of my site, specifically how my main content area and sidebar are positioned. My rough draft layout is:
And I'm using the following code to create it for real (it's spread through a few different files as this is a Symfony 3.4 project) -
base.twig.html:
{# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html dir="ltr" lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta name="keywords" content="Sewing Diva, online shopping, online store, shop, store, quilting, quilts, sewing, sew, fabrics, patterns, notions, gift shop, gifts, Derry NH">
<meta name="description" content="The Sewing Diva Quilt and Gift Shop offers customers many fabrics, patterns, and notions to buy online">
{% block noindex %}{% endblock %}
<title>{% block title %}The Sewing Diva Quilt and Gift Shop{% endblock %}</title>
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
<link rel="apple-touch-icon" sizes="152x152" href="{{ asset('build/favicons/apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('build/favicons/favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('build/favicons/favicon-16x16.png') }}">
<link rel="manifest" href="{{ asset('build/favicons/site.webmanifest') }}">
<link rel="mask-icon" href="{{ asset('build/favicons/safari-pinned-tab.svg') }}" color="#5bbad5">
</head>
<body>
<div id="site" class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light-blue border-bottom border-burnt-orange" style="border-bottom-width: 4px !important;">
<a class="navbar-brand" href="{{ path('_home') }}">
<img src="{{ asset('build/images/logo-sm.png') }}" class="d-lg-none">
<img src="{{ asset('build/images/logo.png') }}" class="d-none d-lg-block">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="form-inline my-2 pt-5 my-lg-0 mx-auto d-none d-lg-inline w-50" action="{{ path('_store_search_results') }}">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
</div>
</div>
</form>
<div class="navbar-nav color-dark-blue ml-auto flex-lg-column align-items-lg-start justify-content-lg-center">
<div class="nav-item mb-lg-5">
<div class="d-none d-lg-block">
<a class="nav-link d-lg-inline" href="{{ path('fos_user_security_login') }}">Login</a> | <a class="nav-link d-lg-inline" href="{{ path('fos_user_registration_register') }}">Sign Up</a>
</div>
</div>
<div class="nav-item mb-lg-3">
<div class="d-none d-lg-block social-media">
<a class="nav-link d-lg-inline-block" href=""><i class="far fa-envelope"></i></a>
<a class="nav-link d-lg-inline-block" href=""><i class="fab fa-facebook-square"></i></a>
<a class="nav-link d-lg-inline-block" href=""><i class="fab fa-twitter"></i></a>
</div>
</div>
<a class="nav-link d-lg-none" href="{{ path('fos_user_security_login') }}">Login</a>
<a class="nav-link d-lg-none" href="{{ path('fos_user_registration_register') }}">Sign Up</a>
</div>
<form class="form-inline my-2 my-lg-0 mx-auto d-inline d-lg-none" action="{{ path('_store_search_results') }}">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
</div>
</div>
</form>
</div>
</nav> <!-- end nav -->
<div class="row justify-content-center">
{% block sidebar %}{% endblock %}
{% block content %}{% endblock %}
</div> <!-- end content -->
<div id="footer" class="row"> <!-- TODO: a real footer -->
<p id="copyright">© The Sewing Diva</p>
<p id="mp">Site created and maintained by Major Productions</p>
</div> <!-- end footer -->
</div> <!-- end site -->
{% block js %}
{{ encore_entry_script_tags('app') }}
<script src="https://js.stripe.com/v3/"></script> <!-- For fraud protection -->
{% endblock %}
<script type="text/javascript">
var success = $('#flash-success');
var error = $('#flash-error');
if (success.length > 0) {
success.fadeOut({ duration : 5000 });
}
if (error.length > 0) {
error.fadeOut({ duration : 5000 });
}
</script>
{% block jscode %}{% endblock %}
</body>
</html>
index.twig.html:
{# app/Resources/views/Store/index.html.twig #}
{% extends 'base.html.twig' %}
{% block title %}
{{ parent() }}
{% endblock %}
{% block sidebar %}
<div class="col-md-3 bg-beige container">
{{ render(controller('AppBundle:Store:categoryList')) }} <!-- figure out indents -->
</div>
{% endblock %}
{% block content %}
<div class="col-md-9 border container" id="content">
{% if newestProducts == null %}
There's nothing in the store to buy yet! Please check back later.
{% else %}
<h2>Our latest item:</h2>
<div class="row">
<div class="jumbotron" style="background: transparent">
<!-- TODO: figure out structure -->
</div>
</div>
<h2>Some more recent items:</h2>
<div class="row">
{% for newestProduct in newestProducts[1:] %}
<div class="col-md-3">
<div class="card">
<img class="card-img-top w-100" src="{{ asset('product_images/' ~ newestProduct.filename) }}">
<div class="card-body">
<h5 class="card-title">{{ newestProduct.name }}</h5>
{#{% if newestProduct.description != null %}<p class="card-text">{{ newestProduct.description }}</p>{% endif %}#}
<p class="card-text">${{ newestProduct.price }}/{% if newestProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
<a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': newestProduct.slug, 'prodId': newestProduct.id}) }}">Check it out!</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% if saleProducts == null %}
{% else %}
<h2>Some items currently on sale:</h2>
<div class="row"> <!-- card deck instead? -->
{% for saleProduct in saleProducts %}
<div class="col-md-3">
<div class="card">
<img class="card-img-top w-100" src="{{ asset('product_images/' ~ saleProduct.filename) }}">
<div class="card-body">
<h5 class="card-title">{{ saleProduct.name }}</h5>
{% if saleProduct.description != null %}<p class="card-text">{{ saleProduct.description }}</p>{% endif %}
<p class="card-text">${{ saleProduct.price }}/{% if saleProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
<a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': saleProduct.slug, 'prodId': saleProduct.id}) }}">Check it out!</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% if randomProducts == null %}
There's nothing in the store to buy yet! Please check back later.
{% else %}
<h2>Some other things you may like:</h2>
<div class="row">
{% for randomProduct in randomProducts %}
<div class="col-md-3">
<div class="card">
<img class="card-img-top w-100" src="{{ asset('product_images/' ~ randomProduct.filename) }}">
<div class="card-body">
<h5 class="card-title">{{ randomProduct.name }}</h5>
{% if randomProduct.description != null %}<p class="card-text">{{ randomProduct.description }}</p>{% endif %}
<p class="card-text">${{ randomProduct.price }}/{% if randomProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
<a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': randomProduct.slug, 'prodId': randomProduct.id}) }}">Check it out!</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endblock %}
category_list.twig.html:
{# do something with htmlTree - remember: this DOES NOT contain blocks, or inherit from base.html.twig #}
<h2>Shop By Category:</h2>
<p>Newest Products</p>
<p>Products on Sale</p>
{{ htmlTree|raw }}
Which, all together, creates the following:
My biggest issue is that the sidebar/category list overhangs the navigation. I'm guessing that navbar has some x-axis margin/padding. So, I want to constrain the two columns - sidebar and content - to be within the visible width of the navbar. Ideally, the navbar wouldn't have any white space on the left/right sides.
I think I can handle the rest through a combination of fiddling around with columns, margins, and padding, but keeping everything uniform on the edges is a priority.
Put the container inside your navbar instead
<div id="site">
<nav class="navbar ...">
<div class="container-fluid">
<a class="navbar-brand" ... />
<button class="navbar-toggler" ... />
<div class="collapse" ... />
</div>
</nav>
</div>
The container usually has left and right padding. If you put the navbar with a background color inside the container, it would show a gap horizontally.
What i need
i need to remove the spaces from html .
i need like
<html>
-- data----
</html>
extra spaces are removed by to remove extra spaces between html elements what else sypmfony supports.
code
{% spaceless%}
---code----
{% endspaceless %}
Debug
http://twig.sensiolabs.org/doc/filters/nl2br.html.
http://twig.sensiolabs.org/doc/templates.html#whitespace-control
Whole Twig code
{% spaceless %}
<head>
{% block title %}
<title>times</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
{% endblock %}
<meta property="fb:admins" content="10timesevents" />
<meta property="fb:app_id" content="432858816746099" />
{% block css %}
<noscript>
<link rel="stylesheet" href="http://im.gifbt.com/css/skel-noscript.css" />
<link rel="stylesheet" href="http://im.gifbt.com/css/style9.css" type="text/css" >
{% if DeviceDetcet() =='computer' %}
<link rel="stylesheet" href="http://im.gifbt.com/css/style9-desktop.css" type="text/css />
{% elseif DeviceDetcet() =='tablet' %}
<link rel="stylesheet" href="http://im.gifbt.com/css/style9-1000px.css" type="text/css />
{% elseif DeviceDetcet() =='phone' %}
<link rel="stylesheet" href="http://im.gifbt.com/css/style9-mobile.css" type="text/css />
{%endif%}
</noscript>
{% endblock %}
{% block scripts %}
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
{# <script src="http://im.gifbt.com/js/jquery.poptrox-2.2.js"></script>#}
<script src="http://im.gifbt.com/js/skel.min.js"></script>
{% if DeviceDetcet()=='phone'%}
<script src="http://im.gifbt.com/js/skelnew-panels.min.js"></script>
{%endif%}
<script src="http://im.gifbt.com/js/common.10.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
{% endblock %}
<!--[if lte IE 8]><script src="http://im.gifbt.com/js/html5shiv.js"></script><link rel="stylesheet" href="http://im.gifbt.com/css/ie8.css" /><![endif]-->
</head>
{% block body_tag %}
<body>
{% if 'android' in UserAgent() or 'Android' in UserAgent() %}
<div style="position:fixed; width:100%; z-index:9; right:0; left:0; bottom:0;">
<div class="row flush">
<div style="height:60px; background:#fb6d02; padding:14px 7px 7px 7px!important; border-bottom:1px solid #e16000; border-top:1px solid #e16000">
<img src="http://im.gifbt.com/images/android100.png"style="float:left; width:30px; padding:0 5px 0 0" />
<p style=" font-size:.9em; line-height:1.1em; margin:0; ">
Download Now
<b class="bld" style="float:left; padding:7px 0 0 0; color:#fff">Stay updated with 10times App</b>
</p>
</div>
</div>
</div>
{% endif %}
<span id="evtname"></span>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-MMVJS3"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MMVJS3');</script>
<!-- End Google Tag Manager -->
{% endblock %}
<!-- Header Wrapper -->
{% block homepage_head %}
{#Fixed navbar#}
<div class="navbar navbar-static navbar-default navbar-fixed-top" style="margin:0; min-height:38px; offsetheight:38px!important">
<div class="not-mobile" style="background:#fff">
<div class="new_header">
<div class="headerdiv">
<div class="l">
<ul class="navigation">
<li>Trade Shows</li>
<li>Conferences</li>
<li>Top 100</li>
<li>Venues</li>
</ul>
</div>
<div class="c">
<a href="http://10times.com" class="newlogo" ></a>
</div>
<div class="r">
<div class="user-nav">
<div id="header-login-dd-link">
<div class="user-dropdown dis-non">
<ul class="udr">
<li><a class="manage udbr" href="http://{{-login_url}}">Manage Event</a></li>
<li><a class="contact udbr" onclick="feed_back();">Contact Us</a></li>
<li><a class="signin udbr" onclick = "signin();">Sign In</a></li>
<li><a class='dashboard udbr' href='http://{{-login_url}}/dashboard'>My Dashboard</a></li>
</ul>
</div>
</div>
</div>
<div class="screen-block" style="display: none;"></div>
<a class="advt" href="{{ DomainDetect()}}/services">Advertise</a>
Add Event
<div class="searchdiv">
<span style="margin-top:10px" class="srhbx 4u" id="srh"><input type="button" value=" " class="srhbtn" onclick="checkHeaderSearch($(this));" id="explore-button" style="float:right" /><div id="search-box-area" class="p-relative search-box-area zind"><input type="text" name="" autocomplete="off" id ="explore-keywords" placeholder="search"
class="srhtxt homesearch" style="width:75%" required /><div id="explore-keywords-dropdown" autocorrect="off" ><div id="keywords-dd" class="kkdd"><ul id="keywords-by" style="margin:0;"></ul></div></div></div></span>
</div>
</div>
{#<div class="searchdiv">
<form action="{{ DomainDetect()}}/search" method="get" id="srh">
<div class="srhbx" id="search-box-area ">
<input type="text" class="srhtxt homesearch" autocomplete="off" id ="explore-keywords" placeholder="Search" name="q" {% if DeviceDetcet()=='computer'%} style="width:75%" {%endif%} required="">
<input type="submit" value=" " class="srhbtn" required="" >
<div id="explore-keywords-dropdown" autocorrect="off" >
<div id="keywords-dd" class="kkdd">
<ul id="keywords-by" style="margin:0;"></ul>
</div></div>
</div>
</form>
</div>
</div>#}
</div>
</div>
</div>
<div class="only-mobile">
<div class="new_header">
<div id="hide-header" class="headerdiv">
<div class="l">
<button type="button" class="navbar-toggle toggle-left" data-toggle="sidebar" data-target=".sidebar-left" style="margin:4px 0 0 5px; border:0; padding:8px">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="c">
</div>
<div class="r">
<div class="mobile_menu">
<a onclick="change();" class="srhbtn"> </a>
</div>
</div>
</div>
<div id="search-field" class="headerdiv dis-non" style="display: none;">
<form method="get" action="http://10times.com/search" id="srh" class="mr">
<div class="ll">
<button type="button" class="navbar-toggle toggle-left" data-toggle="sidebar" data-target=".sidebar-left" style="margin:4px 0 0 5px; border:0; padding:8px">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="search-field" class="cc">
<input type="hidden" name="cx" value="partner-pub-8525015516580200:vtujn0s4zis">
<input type="hidden" name="cof" value="FORid:10">
<input type="hidden" name="ie" value="ISO-8859-1">
<input type="text" name="q" id ="q" placeholder="Search..." class="srhtxt1" required />
</div>
<div class="rr">
<input type="submit" value=" " class="srhbtn1">
</div>
</form>
</div>
</div>
</div>
</div>{#endo of new main col-md-12#}
<div class="col-xs-7 col-md-3 sidebar sidebar-left sidebar-animate" style="background:#212628; padding:0; top:39px; position:fixed!important">
<div id="sidebar-wrapper" class="only-mobile">
<ul class="sidebar-nav" style="margin:0; padding:0;">
<li class="only-mobile">Home</li>
<li class="only-mobile">Trade Shows</li>
<li class="only-mobile">Conferences</li>
<li class="only-mobile">Top 100</li>
<li class="only-mobile">Venues</li>
<li class="only-mobile">Add Event</li>
<li class="only-mobile">Advertise</li>
<li class="only-mobile">Manage Event</li>
</ul>
</div>
</div>
</div>{#endo of row#}
</div>
{% block heightfromhead %}
<div style="height:51px" class="not-mobile"> </div>
<div style="height:40px" class="only-mobile"> </div>
{% endblock %}
<!-- header end -->
{% endblock %}
{# {% block search_head %}body goes here!{% endblock %} #}
{% block body %}body goes here!{% endblock %}
<!-- PAGE END -->
<script type="text/javascript">
function feed_back(){modal.open({content:'<div class="12u skel-cell-mainContent"><div class="box panel pd"><image src="/img/lineloading.gif"></div></div>'});$.get("/feedback",function(e){modal.open({content:e})})}
</script>
<script async src="http://im.gifbt.com/js/suggestive_search_2.js"></script>
{% block bottom_script %}
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
{% endblock %}
{# <script type="text/javascript">#}
{# $(document).ready(function(){#}
{# $("#searchpanel").removeClass('dis-non'); #}
{# });#}
{# </script>#}
</div>
{% if 'android' in UserAgent() or 'Android' in UserAgent() %}
<script>
$( document ).ready(function() {
{% if cookie('get','10tphpopup') == '0'%}
{{-cookie('get','10tphpopup')}}
{{-cookie('set','10tphpopup',1,3600*24*365)}}
//$("div").first().addClass('dis-non');
var height=$( window ).height();
//height=height-50;
height=height+"px";
{%endif%}
});
</script>
{%endif%}
{% if 'iPhone' in UserAgent() or 'iphone' in UserAgent() %}
<script>
$( document ).ready(function() {
{% if cookie('get','10tphpopup') == '0'%}
{{-cookie('get','10tphpopup')}}
{{-cookie('set','10tphpopup',1,3600*24*365)}}
//$("div").first().addClass('dis-non');
var height=$( window ).height();
//height=height-50;
height=height+"px";
//modal.open({content:'<div class="12u skel-cell-mainContent"><div class="box panel pd"><image src="/img/lineloading.gif"></div></div>'});$.get("{{ DomainDetect()}}/android?type=iphone",function(e){modal.open({content:e})})
{%endif%}
});
</script>
{%endif%}
{% block bottom_script2 %}
{%endblock%}
{% block bottom_script3 %}
{#<link rel="stylesheet" type="text/css" href="{{ DomainDetect()}}/headersearch.css" />#}
{%endblock%}
{% if 'android' in UserAgent() or 'Android' in UserAgent() %}
<script type="text/javascript">
if(sessionStorage.getItem("count1")=='NaN')
{
sessionStorage.setItem("count1", 0);
counters = 0;
}
if(sessionStorage.getItem("count1") == null)
{
sessionStorage.setItem("count1", 0);
counters = 0;
}
else
{
counters= parseInt(sessionStorage.getItem("count1"));
//alert(sessionStorage.getItem("count1"));
}
if (page_count == 4)
{
dataLayer.push({'event':'mobilePromo-android'});
}
</script>
{% endif %}
{%if 'iPhone' in UserAgent() or 'iphone' in UserAgent() %}
<script type="text/javascript">
if(sessionStorage.getItem("count2")=='NaN')
{
sessionStorage.setItem("count2", 0);
counters = 0;
}
if(sessionStorage.getItem("count2") == null)
{
sessionStorage.setItem("count2", 0);
counters = 0;
}
else
{
counters= parseInt(sessionStorage.getItem("count2"));
//alert(sessionStorage.getItem("count2"));
}
if (page_count == 4)
{
dataLayer.push({'event':'mobilePromo-iphone'});
}
</script>
{% endif %}
</body>
</html>
{% endspaceless %}
html after using spaceless
<img class="featurebanner lazy" data-
src="http://10times.com/pics/event/1742/header_small_v47139.jpg"
src="http://im.gifbt.com/images/event-images-default.jpg" alt=""><h3><a href="intersec">
Intersec
</a></h3></div><div class="evt_date"><span>18-20 Jan </span> • Dubai, UA
html output should be like that
<img class="featurebanner lazy" data-src="http://10times.com/pics/event/1742/header_small_v47139.jpg"
src="http://im.gifbt.com/images/event-images-default.jpg" alt=""><h3>Intersec</h3></div><div class="evt_date"><span>18-20 Jan </span> • Dubai, UA
As stated in the documentation that you provided you need to wrap your ---code---- into some variable and then output it with removing spaces.
But I think that you already have your data in some variable and so your code should look like that:
{% spaceless %}
<img class="featurebanner lazy" data-
src="http://10times.com/pics/event/1742/header_small_v47139.jpg"
src="http://im.gifbt.com/images/event-images-default.jpg" alt=""><h3><a href="intersec">
{{- intersec -}}
</a></h3></div><div class="evt_date"><span>18-20 Jan </span> • Dubai, UA
{% endspaceless %}