I am trying trying to integrate bootstrap into my Django site but it doesn't look quite right. I was looking for CSS clashes but the only stuff I could find is in the static folder and it just has admin related CSS. All my pages work its just the CSS that looks a bit off. Any help is great, thanks.
<!-- templates/base.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
{% block nav %}
<ul id="nav">
<li>{% block nav-home %}Home{% endblock %}</li>
</ul>
{% endblock %}
<div id='content' class='main'>
{% block content %}
{% endblock %}
</div>
{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
{% endblock %}
</body>
</html>
<!-- templates/registration/login.html -->
{% extends "base.html" %}
{% block title %}Log in{% endblock %}
{% block content %}
<section class="vh-100" style="background-color: #508bfc;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-12 col-md-8 col-lg-6 col-xl-5">
<div class="card shadow-2-strong" style="border-radius: 1rem;">
<div class="card-body p-5 text-center">
<h3 class="mb-5">Sign in</h3>
<div class="form-outline mb-4">
<input type="email" id="typeEmailX-2" class="form-control form-control-lg" />
<label class="form-label" for="typeEmailX-2">Email</label>
</div>
<div class="form-outline mb-4">
<input type="password" id="typePasswordX-2" class="form-control form-control-lg" />
<label class="form-label" for="typePasswordX-2">Password</label>
</div>
<!-- Checkbox -->
<div class="form-check d-flex justify-content-start mb-4">
<input class="form-check-input" type="checkbox" value="" id="form1Example3" />
<label class="form-check-label" for="form1Example3"> Remember password </label>
</div>
<button class="btn btn-primary btn-lg btn-block" type="submit">Login</button>
<hr class="my-4">
<button class="btn btn-lg btn-block btn-primary" style="background-color: #dd4b39;"
type="submit"><i class="fab fa-google me-2"></i> Sign in with google</button>
<button class="btn btn-lg btn-block btn-primary mb-2" style="background-color: #3b5998;"
type="submit"><i class="fab fa-facebook-f me-2"></i>Sign in with facebook</button>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
Expected:
Actual:
The problem isn't with your library imports. It's with your syntax. Make sure you're following the correct documentation version.
Inputs won't have internal labels if you use label elements like that. Use aria-label and placeholder attributes on the input element instead.
Buttons aren't sized with btn-block in Bootstrap 5. Use the w-100 sizing class instead.
Buttons don't have uppercase labels in Bootstrap 5, either. That screenshot must be from an earlier version.
And buttons won't have default margin. Use spacing classes as needed.
Font sizes are calculated and configured differently from earlier versions as well.
in the email and password input tags include
<input ..... placeholder="Email">
Doing this will put email inside of the text box.
If you do this...
<div class="form-outline mb-4">
<label class="form-label" for="typePasswordX-2">Password</label>
<input type="password" id="typePasswordX-2" class="form-control form-control-lg" />
</div>
The label will appear above the text box. If you do not want just get rid of the label tag. I recommend leaving it on as it helps with accessibility.
and add a
<br/>
tag between the buttons
Related
This is the template I've written
{% extends 'base.html' %}
{% load static %}
{% block body %}
<div class="row hide-on-mobile" style="height: 100vh">
<div class="col-auto p-5">
<img src="{% static 'logo.svg' %}" class="mb-5 hide-on-mobile" style="height: 84px"/>
{% block form %} {% endblock %}
</div>
<div class="col bg-brown p-5">
<div class="d-flex flex-column justify-content-between" style="height: 100%">
<h1 class="text-blue mb-3">It's always Ups<br>and Downs</h1>
<img src="{% static 'investing_illustration.svg' %}" class="auth-illustration"/>
</div>
</div>
</div>
<div class="hide-on-desktop" style="height: 100vh; position: relative">
<div class="d-flex flex-column bg-brown h-100 p-3 align-items-start">
<img src="{% static 'logo.svg' %}" class="mb-3 hide-on-desktop" style="height: 56px"/>
<p class="text-blue mb-3">It's always Ups<br>and Downs</p>
<img src="{% static 'investing_illustration.svg' %}" class="auth-illustration"/>
</div>
<div style="position: absolute; bottom: 0; z-index: 99; background: white; width: 100%">
<div class="d-flex flex-column p-4">
<p class="mb-4">Login</p>
{% block form %} {% endblock %}
</div>
</div>
</div>
{% endblock %}
I inherit this template in a page as follows:
{% extends 'auth_base.html' %}
{% block form %}
<p class="mb-4">Login</p>
<form class="pb-5">
<input type="text" class="form-control" name="email" placeholder="Enter your email">
<input type="password" class="form-control" name="password" placeholder="Enter your password">
<a class="text-blue">Forgot Password?</a>
<button type="submit" class="mt-3 btn btn-primary full-width">Login</button>
</form>
<div class="text-center">
<span>New Here? <a class="text-blue">Create an account</a></span>
</div>
{% endblock %}
The form block is used two times..because when I inherit the template I want to write only once..but display it in two different places in the same page. In this case, I've written different layouts for mobile and desktop show the user actually sees only once.
However, this code doesn't work and gives the following error:
django.template.exceptions.TemplateSyntaxError: 'block' tag with name 'form' appears more than once
How can I accomplish this?
It is possible to include partials multiple times. Partials work differently then blocks - not via inheritence, so you would have to change your template code a bit.
You would need to create a partial template for your form which would expect a certain context (the form probably), and you would include that template snippet twice in your main template:
<div class="d-flex flex-column p-4">
<p class="mb-4">Login</p>
{% include "_partials/login_form.html" %}
</div>
_partials/login_form.html would basically contain what you had now inside your form block.
https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#include
EDIT: as someone else pointed out - the question on multiple blocks with the same name has already been addressed before: https://stackoverflow.com/a/6427336/8401179
I have installed Django-allauth on my site,
I made a modal with both login and signup in it,
the login and signup works ok (doh I have a problem that if the login isn't good it just freezes at a white page)
the problem is that under login, I have a forgot your password button,
but once clicked it redirect to http://127.0.0.1:8000/accounts/password/reset/,
but online show a white page, like the allauth templates, were not loaded
URLs
path('users/', include('users.urls')), #for allauth
url(r'^accounts/', include('allauth.urls')), #custom user
SETTINGS:
INSTALLED_APPS = [
'allauth',
'allauth.account',
'allauth.socialaccount',
'allauth.socialaccount.providers.google',
AUTH_USER_MODEL = 'users.CustomUser'
AUTHENTICATION_BACKENDS = (
'django.contrib.auth.backends.ModelBackend',
"allauth.account.auth_backends.AuthenticationBackend",
)
TEMPLATES ... # `allauth` needs this from django
'django.template.context_processors.request',
LOGIN_REDIRECT_URL = 'home'
LOGOUT_REDIRECT_URL = 'home'
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_USERNAME_REQUIRED = False
ACCOUNT_LOGOUT_ON_GET = True
ACCOUNT_LOGIN_ATTEMPTS_LIMIT =5
ACCOUNT_LOGIN_ATTEMPTS_TIMEOUT =1800
ACCOUNT_USERNAME_BLACKLIST =[]
ACCOUNT_UNIQUE_EMAIL =True
this is the button for forgotten password
<div>
<a class="forgotpass" href="{% url 'account_reset_password' %}">
{% trans "Forgot Password?" %}</a>
</div>
What did I do wrong ??
UPON REQUEST HERE IS THE WEBSITE BASE TEMPLATE:
<!DOCTYPE html>
<html lang="zxx" class="no-js">
{% load static from static %} {% load socialaccount %}{% load i18n %}
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon-->
<link rel="shortcut icon" href='{% static "/home/img/favicon.ico" %}'>
<!-- Meta Description -->
<meta name="description" content="">
<!-- Meta Keyword -->
<meta name="keywords" content="">
<!-- meta character set -->
<meta charset="UTF-8">
<!-- Title -->
<title>Dr.Landivar</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
<!-- CSS -->
{% block css %}
{% endblock %}
<style>
.footer-social {
font-size: 1rem !important;
}
.comment {
margin: 20px 0px 20px 20px;
}
.banner-area {
background: url('{% static "/home/img/banner-bg.jpg" %}') no-repeat center;
}
.home-about-area:after {
background: url('{% static "/home/img/about-img.jpg" %}') no-repeat center center/cover;
}
.appoinment-area:after {
background: url('{% static "/home/img/appoinment-img.jpg" %}') no-repeat center center/cover;
}
.about-banner {
background: url('{% static "/home/img/top-banner.jpg" %}') center
}
.blog-home-banner {
background: url('{% static "/home/img/-blog/blog-home-banner.jpg" %}') bottom;
}
</style>
<script src="https://use.fontawesome.com/d2f653f275.js"></script>
</head>
<body>
<!-- Start header Area -->
<header id="header" id="home">
<div class="header-top">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-sm-6 col-4 header-top-left no-padding">
<a href="/">
<img src='{% static "/home/img/logo.png" %}' alt="" title="" />
</a>
</div>
<div class="col-lg-6 col-sm-6 col-8 header-top-right no-padding specialwidthphone">
<a class="btns" href="tel:+010101010">+1 050505050</a>
<a class="icons" href="tel:+953 012 3654 896">
<span class="lnr lnr-phone-handset"></span>
</a>
</div>
</div>
</div>
</div>
<div class="container main-menu">
<div class="row align-items-center justify-content-between d-flex">
<nav id="nav-menu-container">
<ul class="nav-menu">
<li>
Blog
</li>
<li>
{% trans "Videos" %}
</li>
<li>
{% trans "Online Appointments" %}
</li>
<li>
{% trans "Contact Us" %}
</li>
<li>
{% trans "Shop Online" %}
</li>
<li>
<a href="/cart">
<i class="fa fa-shopping-cart fa-2x" aria-hidden="true"></i>
</a>
</li>
<li id="sign-in">
{% if user.is_authenticated %}
<p id="welcome">{% trans "Welcome" %} {{ user.username }}</p>
<a id="dash" href="/dash">
<i class="fa fa-tachometer" aria-hidden="true"></i>
</a>
<a id="log" href="{% url 'account_logout' %}">
<i class="fa fa-sign-out" aria-hidden="true"></i>
</a>
<p>
{% else %}
<!-- Button to Open the Modal -->
<div class="loginbtn">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
{% trans "Login" %}
</button>
</div>
<div class="modal-login">
<!-- The Modal For LOGIN -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- LOGIN Modal Header -->
<div class="modal-header">
<h3 class="modal-title">{% trans "Login" %}</h3>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- LOGIN Modal body -->
<div class="modal-body">
<form action="{% url 'account_login' %}" method="post">
{% csrf_token %}
<input type="hidden" name="next" value="{{ request.get_full_path }}" />
<label class="login" for="id_login">{% trans "Username or email:" %} </label>
<input id="id_login" name="login" placeholder="Username or e-mail" type="text" required />
<div>
<label class="password" for="id_password">{% trans "Password:" %} </label>
<input id="id_password" name="password" placeholder="Password" type="password" required />
</div>
<label class="remember" for="id_remember">{% trans "Remember Me:" %}</label>
<input id="id_remember" name="remember" type="checkbox" />
<div>
<button class="submit-btn btn btn-success btn-sm" type="submit">{% trans "Login" %}</button>
</div>
<div>
<a class="forgotpass" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
</div>
</form>
<hr id="line">
<form action="{% url 'account_signup' %}" method="post">
{% csrf_token %}
<h4 class="signinhere">{% trans "You are not signed in yet ? Sign in here" %}</h4>
<input type="hidden" name="next" value="{{ request.get_full_path }}" />
<label class="user" for="id_username">{% trans "Username:" %} </label>
<input id="id_username" name="username" placeholder="Username" type="text" required />
<div>
<label class="email" for="id_email">{% trans "E-mail:" %}</label>
<input type="email" name="email" placeholder="E-mail address" required id="id_email">
</div>
<label class="pass1" for="id_password1">{% trans "Password:" %}</label>
<input type="password" name="password1" placeholder="Password" required id="id_password1">
<div>
<label class="pass2" for="id_password2">{% trans "Password (again):" %}</label>
<input type="password" name="password2" placeholder="Password (again)" required id="id_password2">
</div>
<div>
<button class="submit-btn btn btn-success btn-sm" type="submit">{% trans "Submit" %}</button>
</div>
</form>
</div>
<!-- LOGIN Modal footer -->
<div class="modal-footer">
<div>
<p class="specialgmail">
<i class="fab fa-google"></i>
<a id="gmail" href="{% provider_login_url 'google' %}">{% trans "Log In with Gmail" %}</a>
</p>
</div>
<button type="button" class="icon-right btn btn-danger" data-dismiss="modal">{% trans "Close" %}</button>
</div>
</div>
</div>
</div>
</div>
</p>
{% endif %}
</p>
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- End header Area -->
{% block content %}
{% endblock%}
<!-- start footer Area -->
<footer class="footer-area section-gap">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-6">
<div class="single-footer-widget">
<h6>{% trans "Navigate" %}</h6>
<ul class="footer-nav">
<li>
{% trans "Log In or Register" %}
</li>
<li>
{% trans "Help Center" %}
</li>
<li>
{% trans "Shipping Policy" %}
</li>
<li>
{% trans "Terms of Service" %}
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-footer-widget mail-chimp">
<h6 class="mb-20">{% trans "Contact Us" %}</h6>
<p>
{% trans "2060 Biscayne Blvd, Miami, FL 33137, EE. UU." %}
</p>
<h3>012-6532-568-9746</h3>
<h3>012-6532-568-97468</h3>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="single-footer-widget newsletter">
<h6>{% trans "Newsletter" %}</h6>
<p>{% trans "You can trust us. we only send promo offers, not a single spam." %}</p>
<div id="mc_embed_signup">
<form action="https://drlandivar.us19.list-manage.com/subscribe/post?u=a988793f3acfebb954fa9a95e&id=da7c864704"
method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"
novalidate>
<div class="form-group row" style="width: 100%">
<div class="col-lg-8 col-md-12">
<input name="EMAIL" placeholder="Your Email Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Email Address '"
required="" type="email">
<div style="position: absolute; left: -5000px;">
<input name="b_a988793f3acfebb954fa9a95e_da7c864704" tabindex="-1" value="" type="text">
</div>
</div>
<div class="col-lg-4 col-md-12">
<button class="nw-btn primary-btn">{% trans "Subscribe" %}
<span class="lnr lnr-arrow-right"></span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row footer-bottom d-flex justify-content-between">
<p class="col-lg-8 col-sm-12 footer-text m-0">
</p>
<div class="col-lg-4 col-sm-12 footer-social">
<a href="https://www.facebook.com/Dr.Gus.Landivar/" target="_blank">
<i class="fa fa-facebook-square"></i>
</a>
<a href="https://plus.google.com/u/1/112018602499732214904?tab=mX" target="_blank">
<i class="fa fa-google-plus"></i>
</a>
<a href="https://www.youtube.com/channel/UCl8nmbvMhlc5-os-2n7uSQg" target="_blank">
<i class="fa fa-youtube-play"></i>
</a>
</div>
</div>
</div>
</footer>
<!-- End footer Area -->
{% block scripts %}
{% endblock%}
</body>
</html>
You should extend your base.html instead of allauth's base.html
It seems I'm missing something obvious here
I expected the home blog contact entries to be stacked on top of one another at all times.
What am I missing?
This is what's actually rendering:
<body class="body" style="background-color:#f6f6f6">
<div class="container-fluid" style="min-height:95%; ">
<hr>
<div class="row">
<div class="col-sm-2">
<br>
<br>
<!-- Great, til you resize. -->
<!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">-->
<div class="well bs-sidebar" id="sidebar" style="background-color:#fff">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a href='/'>Home</a></li>
<li role="presentation"><a href='/blog/'>Blog</a></li>
<li role="presentation"><a href='/contact/'>Contact</a></li>
</ul>
</div> <!--well bs-sidebar affix-->
</div> <!--col-sm-2-->
<div class="col-sm-10">
<div class='container-fluid'>
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid" style='margin-left:15px'>
<p>Contact | LinkedIn | Twitter | Google+</p>
</div>
</footer>
</body>
There's no well class in Bootstrap 4. The card class can be used instead.
Here's a code snippet that does pretty much what you'd expect:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid" style="min-height:90vh; ">
<hr>
<div class="row">
<div class="col-sm-3 col-md-2">
<br>
<br>
<!-- There's no "well" class in Bootstrap 4. The "card" class can be used instead. -->
<div class="card bs-sidebar" id="sidebar" style="background-color:#fff">
<nav class="nav nav-pills flex-column flex-sm-row2">
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Home</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Blog</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Contact</a>
</nav>
</div> <!--bs-sidebar-->
</div> <!--col-sm-3 col-md-2-->
<div class="col-sm-9 col-md-10 ">
<div class='container-fluid'>
<div class="row">
<div class="col">
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col">
<p>Contact | LinkedIn | Twitter | Google+</p>
</div>
</div>
</div>
</footer>
Reference:
https://getbootstrap.com/docs/4.0/migration/#panels-thumbnails-and-wells
https://getbootstrap.com/docs/4.0/components/navs/#working-with-flex-utilities
Hello I am developing a django cms for my company but running into issues with the navbar in IE8.
using:
-Python 2.7.6
-Django (1, 7, 8, 'final', 0)
-django-cms 3.1.0
-boostrap 3.3.4
here is my template
{% load cms_tags staticfiles sekizai_tags menu_tags %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}This is my new project home page{% endblock title %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
{% render_block "css" %}
</head>
<body style="padding-top:60px">
{% cms_toolbar %}
<div class="container">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% show_menu 0 1 100 100 "menu.html" %}
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
{% block content %}
{% endblock content %}
</div>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
{% render_block "js" %}
</body>
</html>
The issue is the navbar is always collapsed regardless of the screen size
I have already had the navbar working in IE + Bootstrap and that template is like so:
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'core:home' %}">
{% load staticfiles %}
<img alt='Bell logo' src="{% static 'core/images/bell_logo.png' %}">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Liens</li>
<li>Tools</li>
<li>Doc</li>
<li>Wiki</li>
<li>Project</li>
<li>CAB</li>
<li>DB</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
I tried adapting my django cms template so it would look like the one I originally had, but no success. What am I doing wrong?
Had to add respond.js to page, but i thought the cms and django would take care of that
Edit: Adding the full versions of my base and child template.
I'm using Django 1.5.8 and have a base template (in template root) and sub folders for child templates which extend the base.
When I extend base.html all the contents of the base template show up in the body of the child template. This happens on all child pages except the index. Is there some Django template inheritance rule that I'm not aware of?
Here is my full base:
<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
{% load ganalytics %}
{% load twitter_tag %}
{% load compress %}
{% load tags %}
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block othermeta %}
<meta name="description" content="Welcome to Multimechanics">
<title>MultiMechanics</title>
<link rel="icon" type="image/png" href="{{ STATIC_URL }}ico/favicon.ico" />
<!--Needed for salesforce-->
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
{% endblock %}
<!-- Bootstrap core CSS -->
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
{% compress css %}
<link href="{{ STATIC_URL }}css/style.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/animate.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/lightbox.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>
{% endcompress %}
{% ganalytics %}
{% block otherheader %}{% endblock %}
</head>
<body>
<!-- Navigation -->
<header>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="{{ STATIC_URL }}img/logo.png" alt="..."></a>
</div>
<div class="collapse navbar-collapse">
{% if user.is_authenticated %}
Log Out
{% else %}
Log In
{% endif %}
<ul class="nav navbar-nav navbar-right">
<li class='dropdown {% active request "^/faqs/$" %} {% active request "^/multiscale/$" %} {% active request "^/about-us/$" %}'>
About<b class="caret"></b>
<ul class="dropdown-menu">
{% if request.get_full_path == "/" %}
<li>Product Overview</li>
<li>Product Applications</li>
{% else %}
<li>Multimech Home</li>
{% endif %}
<li>MultiMech Details</li>
<li>What's Multiscale?</li>
<!--<li>Demos</li>
<li>Case Studies</li>-->
<li>Frequent Questions</li>
</ul>
</li>
<li class='dropdown {% active request "^/trueinnovation/$" %} {% active request "^/portfolio/$" %}'>
Showcases <b class="caret"></b>
<ul class="dropdown-menu">
{% if request.get_full_path == "/" %}
<li>Featured Demos</li>
{% endif %}
<li>Demo Gallery</li>
<li>Blog</li>
</ul>
</li>
<li class='dropdown {% active request "^/careers/$" %} {% active request "^/contact-us/$" %} {% active request "^/login/$" %} {% active request "^/help/$" %} {% active request "^/register/$" %} {% active request "^/thanks/$" %}'>
Connect<b class="caret"></b>
<ul class="dropdown-menu">
<li>Contact Us</li>
<li>Careers</li>
<li>Help</li>
<li>User Login</li>
</ul>
</li>
{% if request.get_full_path != "/" %}
<li class="dropdown">
Contact
</li>
{% else %}
<li class="dropdown">
Contact
</li>
{% endif %}
<!-- Navbar Search -->
<li class="hidden-xs" id="navbar-search">
<a href="#">
<i class="fa fa-search"></i>
</a>
<div class="hidden" id="navbar-search-box">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</li>
</ul>
<!-- Mobile Search -->
<form class="navbar-form navbar-right visible-xs" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-red" type="button">Search!</button>
</span>
</div>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</header>
<!-- / .navigation -->
{% block content %}
{% endblock %}
<!-- footer
================================================== -->
<footer>
<div class="container">
<div class="row">
<!-- Contact Us -->
<div class="col-sm-4">
<h4><i class="fa fa-map-marker text-red"></i> Contact Us</h4>
<p>Do not hesitate to contact us if you have any questions or feature requests:</p>
<p>
Omaha, NE 68154<br />
14301 FNB Parkway, Suite 100<br />
Phone: +1 402 957 1336<br />
Email: sales#multimechrd.com
</p>
</div>
<!-- Recent Tweets -->
{% load twitter_tag cache %}
{% cache 60 my_tweets %}
{% get_tweets for "multimechanics" as tweets limit 2 %}
<div class="col-sm-4">
<h4><i class="fa fa-twitter-square text-red"></i> Recent Tweets</h4>
{% for tweet in tweets %}
<div class="tweet">
<i class="fa fa-twitter fa-2x"></i>
<p>
{{ tweet.html|safe }}
</p>
</div>
{% endfor %}
</div>
{% endcache %}
<!-- Newsletter -->
<div class="col-sm-4">
<h4><i class="fa fa-envelope text-red"></i> Newsletter</h4>
<p>
Enter your e-mail below to subscribe to our free newsletter.
<br>
We promise not to bother you often!
</p>
<!--<form class="form" role="form" method="post" action="/newsletter{{ request.get_full_path }}">-->
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name="oid" value="00Di0000000fkHM">
<input type=hidden name="retURL" value="http://multimech2.azurewebsites.net/thanks/newsletter">
<input type=hidden name="lead_source" id="lead_source" value="Web">
<input type=hidden name="city" id="city" value="{{ip}}">
{% csrf_token %}
<div class="row">
<div class="col-sm-8">
<div class="input-group">
<label class="sr-only" for="subscribe-email">Email address</label>
<!--<input type="email" class="form-control" id="subscribe-email" placeholder="Enter your email">-->
<div class="fieldWrapper">{{ newsletter_form.email }}</div>
<span class="input-group-btn">
<button type="submit" class="btn btn-default" name="newsletter_form">OK</button>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</footer>
<!-- Copyright -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="copyright">
Copyright 2014 - MultiMechanics, LLC | All Rights Reserved
</div>
</div>
</div> <!-- / .row -->
</div> <!-- / .container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
{% compress js %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
<script src="{{ STATIC_URL }}js/scrolltopcontrol.js"></script>
<script src="{{ STATIC_URL }}js/lightbox-2.6.min.js"></script>
<script src="{{ STATIC_URL }}js/custom.js"></script>
{% endcompress %}
{% block otherfooter %}{% endblock %}
</body>
</html>
Here is my full child:
{% extends "base.html" %}
{% block content %}
<!-- Wrapper -->
<div class="wrapper">
<!-- Topic Header -->
<div class="topic">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Sign In</h3>
</div>
<div class="col-sm-8">
<ol class="breadcrumb pull-right hidden-xs">
<li>Home</li>
<li class="active">Log In</li>
</ol>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="sign-form">
<div class="sign-inner">
<h3 class="first-child">Log In To Your Account</h3>
<hr>
<form role="form" action="" method="post">
{% csrf_token %}
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
{{form.username}}
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
{{form.password}}
</div>
<div class="checkbox">
<!--<label>
<input type="checkbox"> Remember me
</label>-->
</div>
<button type="submit" class="btn btn-red" name="login_form">Submit</button>
<hr>
</form>
<p>Not registered? Create an Account.</p>
<div class="pwd-lost">
<div class="pwd-lost-q show">Lost your password? Click here to recover.</div>
<!--https://github.com/brutasse/django-password-reset-->
<div class="pwd-lost-f hidden">
<p class="text-muted">Enter your email address below and we will send you a link to reset your password.</p>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="email-pwd">Email address</label>
<input type="email" class="form-control" id="email-pwd" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-blue">Send</button>
</form>
</div>
</div> <!-- / .pwd-lost -->
</div>
</div>
</div>
</div> <!-- / .row -->
</div> <!-- / .container -->
</div> <!-- / .wrapper -->
{% endblock %}
Here is how the html is rendered:
<html lang="en">
<head>
<style type="text/css"></style>
</head>
<body style="">
<!-- base.html -->
<!--[if lt IE 8 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!-->
<!--<![endif]-->
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Navigation -->
<header>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="/static/img/logo.png" alt="..."></a>
</div>
<div c
Here is how I render that page (but I use "render_to_response" for other templates and get the same result:
url(r'^about-us/', TemplateView.as_view(template_name="about-us.html"), name='about-us'),
Thanks in advance for the help.
I had similar problem.
Changing encoding of my files to "utf-8 without BOM" solved my issue.
(http://validator.w3.org/ may help u.)
Are you sure you're editing the correct "base.html" file? It appears that you may be editing a file that has the same name, but is in a different location. Also, are you using Javascript or something to populate your <navigation> </navigation> ? The rendered result does not match your base.html. If you are generating this navigation section using Javascript, this could be your culprit. If it was redacted for readability, then I would search for another instance of "base.html" or "about-us.html" in your project folder. You may find that you are editing the wrong file. Can you post the complete files "base.html" and "about-us.html" and the entire response?
Edit: I believe the issue may be in your "othermeta" block. You can see that the following lines render correctly:
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
This is the point in your result that gets messy. It is also the point in your base when you call for {% block othermeta %}. Is there a reason you have that block with content inside? I'm not sure it is accepting the {% endblock %} correctly. If you want the block othermeta to be dynamic, you must have it in its own othermeta.html, which extends base.html as well. Then, you would change your code to simply:
{% block othermeta %} {% endblock %}
I think the error may be that you're trying to define the contents of this block in an extended template. I'm new at this like you, so I could be completely wrong, but try removing your othermeta block entirely for now and see if it helps.
Hope this helps!
After having the same issue in 2019, this was, as Majid Mobini said, due to the encoding of the source files by Visual Studio. As VS 2019 no longer has the Advanced Save options, my solution was to install the Fix File Encoding extension from the VS Marketplace and resave my files - which then placed the meta in the HEAD as expected.