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.
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.
Please help me to resolve this issue:
my_image class in custom.css is not reflecting in the product.html file. I'm unable to resolve this issue. class="my_image" in product.html is not taking the alteration that I have provided in the custom.css
custom.css
.my_image{
width:100%;
height:auto;
padding:10px;
}
base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="discription" content="{% block metadiscription %} {% endblock %}">
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %} {% endblock %}</title>
</head>
<body>
<div class="container">
{% include 'header.html' %}
{% include 'navbar.html' %}
{% block content %}
{% endblock %}
{% include 'footer.html' %}
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</div>
</body>
</html>
catagory.html
{% extends 'base.html' %}
{% load static %}
{% block metadiscription %}
{% if catagory %}
{{catagory.description|truncatewords:155 }}
{% else %}
welcome
{% endif %}
{% endblock %}
{% block title %}
{% if catagory %}
{{catagory.name}}--ABC store
{% else %}
see our new collection
{% endif %}
{% endblock %}
{% block content %}
{% if catagory %}
<div>
<div class="row my_row_class">
<div class="mx_auto">
OUR PRODUCT COLLECTION
</div>
</div>
</div>
{% endif %}
<div>
{% if catagory %}
<img class="center" src="{{catagory.image.url}}" alt="{{catagory.name}}" height="200px">
</div>
<div>
<h1 class="text-center my_title">
{{catagory.name}}
</h1>
<p class="text-center text-justify">
{{catagory.description}}
</p>
</div>
{% else %}
<div>
<img class="my_image_padding" src="{% static 'img/banner.png' %}" height="300px" width="1300px">
</div>
<br>
<div>
<h1 class="text-center">OUR PRODUCT COLLECTION</h1>
<p class="text-justify"></p>
</div>
{% endif %}
<div class="container">
<div class="row mx_auto">
{% for product in products.object_list %}
<div class="my_bottom_margin col-12 col-sm-12 col-md-12 col-lg-4">
<div class="card text-center mb-3 shadow" style="min-width:18rem;">
<img class="card-img-top my_image" src="{{product.image.url}}"alt="image not found" height="100px">
<div class="card-body">
<h4>{{product.name}}</h4>
<p>{{product.price}}</p>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="mx_auto">
{% if products.paginator.num_pages > 1 %}
<hr>
<div class="text-center">
{% for pg in products.paginator.page_range %}
{{pg}}
{% endfor %}
</div>
{% endif %}
</div>
<br>
</div>
{% endblock %}
product.html
{% extends 'base.html' %}
{% load static %}
{% block metadiscription %}
{{product.description|truncatewords:155 }}
{% endblock %}
{% block title %}
{{product.name}}--ABC store
{% endblock %}
{% block content %}
<div class="row my_product_row_class">
<div class="mx_auto">
<p> Home | {{product.catagory}}|{{product.name}}</p>
</div>
</div>
<br>
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<div>
<img class="my_image" src="{{product.image.url}}" alt="{{product.name}}">
</div>
</div>
<div class="col-md-6">
<div >
<h1 class="my_prod_title">{{product.name}}</h1>
<p>Rs {{product.price}}</p>
<p>Product description</p>
<p class="text-justify my_prod_text">{{product.description}}</p>
{% if product.stock <= 0 %}
<p class="text-justify my_prod_text"><b>OUT OF STOCK</b></p>
{% else %}
<a class="btn btn-secondary" href="">ADD TO CART</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}
The problem is that you have other styles the override your custom style. Try adding the style directly in your HTML file above the element you want to affect and add the CSS !important rule to the properties.
Example
<style>
.my_image{
width:100%!important;
height:auto!important;
padding:10px!important;
}
</style>
<div class="my_image"></div>
This could be a specificity issue with your CSS, in that you may have other styles with a higher specificity overriding your custom styling.
Using the inspector tools in the browser would help you see if this is the issue - https://courses.cs.washington.edu/courses/cse154/19su/resources/assets/debugging/chrome-inspector.html
If this is the case, try making the "my_image" class more specific than the styles you are trying to overwrite:
HTML:
<div class="col-md-6 text-center my_image-wrapper">
<div>
<img class="my_image" src="{{product.image.url}}" alt="{{product.name}}">
</div>
</div>
CSS:
<style>
.my_image-wrapper .my_image{
width:100%!important;
height:auto!important;
padding:10px!important;
}
</style>
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.
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.
How can I fix this problem without removing the bootstrap template tags?
Context:
I have the following template schema:
layout.html is my base template
And I have another templates which inherit from layout.html
I am using third party package application django-bootstrap3
My layout.html is:
(The divs amount of navbar and django variables templates does not matter - are just for demonstration)
{% load staticfiles %}
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
<html lang="es">
{% block head %}
<head>
<title>{% block title_tag %}My APP{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/main.css' %}">
</head>
{% endblock %}
<body>
<div class="wrapper">
<!-- Nav menu -->
<header>
{% if request.user.is_authenticated %}
{% if userprofile %}
<div class="profile-options">
{% comment %} Begin settings drowdown {% endcomment %}
<div class="name-options-cont">
<div class="name">
<p>{{ userprofile.user.email }} - {{ userprofile.user.enterprise_name }}</p>
</div>
<div class="options">
<div class="drop-down">
<ul>
<li><a href="{% url 'some-url' %}" >Some option</a></li>
<li><a href="{% url 'some-url2' %}" >Some option2</a></li>
<li>Exit</li>
</ul>
</div>
</div>
</div>
</div>
{% endif %}
{% else %}
<div class="registration">
RegistrarseIniciar sesión
</div>
{% endif %}
</header>
<div class="container">
{% if messages %}
{% for message in messages %}
<div class='alert {% if "success" in message.tags %}alert-success{% elif "warning" in message.tags%}alert-
warning{% elif "error" in message.tags %}alert-danger{% endif %} alert-dismissible' role='alert'>
<!-- Boton para cerrar el alert-->
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<!--End Boton para cerrar el alert
Haciendo uso del Django messages framework-->
{% if "safe" in message.tags %}{{ message|safe }}{%else%}{{ message }}{% endif %}
</div>
{% endfor %}
{% endif %}
</div>
{% block body_content %}
{% endblock body_content %}
</div>
<footer>
</footer>
</body>
</html>
My article_detail.html template inherits from layout.html.
In this template I am retrieving an object information in Django, and rendering the specific information of an article post.
In the layout.html the divs amount and django variables templates does not matter - are just for demonstration
{% extends "layout.html" %}
{% load bootstrap3 %}
{% load staticfiles %}
{% block body_content %}
<!-- Right column -->
<div class="search-column">
<div class="post-column">
<div class="info">
<div class="icon">
<img src="{% static 'img/icons/info.svg' %}" alt="">
<span>Información</span>
</div>
<div class="autor">
<p class="title">Autor</p>
<div class="profile">
<div class="img-cont">
<a href="#">
{% if instance.author.avatar%}
<img src="{{ instance.author.avatar.url }}" alt="">
{% else %}
<img src="{% static 'img/default_profile_pic.png' %}" class="img-responsive">
{% endif %}
</a>
</div>
<div class="name-review-cont">
{% comment %} A quien corresponda {% endcomment %}
<a href="#">
{% if instance.author.get_long_name %}
<span>{{ instance.author.get_long_name }}</span>
{% endif %}
{% if instance.author.get_enterprise_name %}
<span>{{ instance.author.get_enterprise_name }} (#{{ instance.author.email }})</span>
{% endif %}
</a>
<p><div class="fb-like" data-href="{{ request.build_absolute_uri }" data-layout="standard"
data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
</p>
<hr/>
{% comment %}
<img src="{% static 'img/stars.svg' %}" alt="">
<div class="average">
<span>546</span>
<span>valoraciones</span>
</div>
{% endcomment %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End right column-->
<!-- Main content -->
<main>
<div class="blog-body">
{% if instance.image %}
<img src="{{ instance.image.url }}" class="img-responsive">
{% endif %}
<div class="title-cont">
<h1>{{ title }} <small>{% if instance.draft %}<span style='color: red'> Borrador</span> {% endif %}{{ instance.publish }}</small> </h1>
{% comment %}
{% if instance.author.has_perm %}
{{ instance.author.has_perm }}
{% endif %}
{% endcomment %}
{% comment %} <h1>{{ title }} <small>{{ instance.timestamp|timesince }}</small> </h1>{% endcomment %}
</div>
<div class="main-text">
{{ instance.content|linebreaks }}<br/>
</div>
</div>
</main>
<!-- End main content -->
{% endblock %}
When I go to the article detail view via browser, I found at design level of following:
I have been checking in Inspect elements and I think (I don't know if I am in right) that there is a <div class="container"> .. </div> element which override this visual space in blank:
I think this in relation that if will does not this <div class="container"> .. </div> element my blue section code, would be located properly and not so far down the page.
This <div class="container"> .. </div> element is brought by django-bootstrap3 which I am using, such as follow in the following picture:
If I go to my layout.html template mentioned previously above, and I remove the following template tags bootstrap related:
{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
and refresh my article_detail.html in the browser, the visual space blank is fixed