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.
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.
shop.html
{% extends 'base.html' %}
{% block content %}
<div class="container">
<!-- Product List -->
<br>
<h2 align="center">List of Products</h2>
<br>
<div class="row">
{% for product in products %}
<div class="col-3 col-md-3 col-sm-3">
<div class="card">
<form method="POST" action="{% url 'add_to_cart' product.id %}">
{% csrf_token %}
<img src="{{ product.image.url }}" class="card-img-top" alt="...">
<div class="card-body">
<h5 name="item" class="card-title">{{product.name}}</h5>
<div class="card-text">
<p>Category: {{ product.category }}</p>
<p>Price:</p>
<p style="text-decoration: line-through;color:red;">{{ product.price }}</p>
<p style="color:blue;">{{ product.discount_price }}</p>
</div>
<hr>
<input name="quantity" type="number" value="1">
<input type="submit" class="btn btn-primary" value="Add to Cart">
</form>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Shopping System</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>
<body>
{% include 'navbar.html' %}
{% block content %} {% endblock %}
<!-- JavaScript Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- -->
</body>
</html>
For this code I have used the class col-3 and the second product still being put under the first product. Instead I would like to put the second product card next to the first one. I grabbed the code from Bootstrap Card Grid System but it still does not work even though I have put the required bootstrap css and javascript links into the base.html. May I ask what I need to change in order to have the cards 3 in a row?
Ideally, you'd have a container div, then a a row, inside the row you declare your columns(in this case we are using size 3 for colum). Let me know if it's helpful.
<div class="container">
<!-- Product List -->
<div class="row justify-content-center">
{% for product in products %}
<div class="col-3 col-md-3 col-sm-3">
<div class="card">
<form method="POST" action="{% url 'add_to_cart' product.id %}">
{% csrf_token %}
<img src="{{ product.image.url }}">
<div class="card-body">
<h5 name="item" class="card-title">{{product.name}}</h5>
<div class="card-text">
<p>Category: {{ product.category }}</p>
<p>Price:</p>
<p style="text-decoration: line-through;color:red;">{{ product.price }}</p>
<p style="color:blue;">{{ product.discount_price }}</p>
</div>
<hr>
<input name="quantity" type="number" value="1">
<input type="submit" class="btn btn-primary" value="Add to Cart">
</form>
</div>
</div>
{% endfor %}
</div>
</div>
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 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.