I am currently working on a project with Django. The home / main page of the project is locked behind a login form. I have the background blurred with the login form on top of the blur and I am looking to remove that form and blur when the user logs in with a valid account.
Is this possible and where should I look, googling has turned up nothing.
the blur is applied via css.
Also is it possible to stop the user from interacting with the elements behind the blur until they log in?
thank you
home.html
{% extends "main/base.html" %}
{% block content %}
<div class='login-form'>
<form method="POST">
{% csrf_token %}
<div class='larger-form'>
<h3>Login Form</h3>
<div class='smaller-form'>
<p>
<label>Username</label>
<input type="text" name="username">
</p>
<p>
<label>Password</label>
<input type="password" name="password">
</p>
<button type="submit" class='login'>Login</button>
Need an account? <a class='' href="{% url 'register-page' %}">Sign Up</a>
</div>
</div>
</form>
</div>
<div class="search-content">
<div class='bar-container'>
<h1> Search Here </h1>
</div>
<div class='searchbar-container'>
<p>
<input type="text" class="search-bar">
</p>
</div>
<div class='content-section'>
</div>
</div>
<style>
.search-content {
filter: blur(4px);
}
.login-form {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 20%;
height: 30%;
display: grid;
z-index: 3;
}
.search-bar {
border-radius: 2px;
width: 40%;
margin-left: 30%;
}
.bar-container {
filter: blur(4px);
margin: auto;
text-align: center;
color: white;
background-color: #545452;
border-radius: 3px;
width: 75%;
box-shadow: 1px 1px 3px grey;
}
.searchbar-container {
margin: auto;
right: 50%;
}
h3 {
color: white;
}
.loginform {
margin-top: auto;
margin: 0 auto;
width: 300px;
}
.larger-form {
margin-top: 25px;
background-color: #545452;
border: 3px solid #545452;
border-radius: 8px;
box-shadow: 1px 1px 3px grey;
text-align: center;
}
.smaller-form {
background-color: white;
text-align: left;
}
.login {
border: none;
text-align: center;
font-size: 16px;
display: inline-block;
background-color: white;
color: black;
text-decoration: none;
}
.login:hover {
color: #42A5F5;
</style>
{% endblock %}
base.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class='container'>
<div class='bar'>
<a href="{% url 'main-home' %}" class='button'>Home</a>
<a href="{% url 'register-page' %}" class='button'>Sign up</a>
</div>
{% block content %}
{% endblock %}
</div>
<div class='menu-bottom'>
<div id='colorstrip'>
</div>
</div>
</body>
<style>
.container {
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
background: white;
}
.bar {
background-color: #545452;
padding-top: 10px;
height: 50px;
align-items: end;
box-shadow: 2px 2px 5px black;
border-radius: 1.5px;
}
.button {
float: right;
padding-top: 5px;
padding-right: 20px;
border: none;
text-align: center;
font-size: 18px;
display: inline-block;
background-color: #545452;
color: white;
text-decoration: none;
}
.button:hover {
color: #42A5F5;
}
.menu-bottom {
position: absolute;
bottom: 10px;
width: 100%;
}
#colorstrip{
width: 100%;
height: 0px;
border-style: solid;
border-color: #545452;
border-radius: 1px;
background-color: white;
}
</style>
</html>
Let me know if any other code is needed or if this is formatted incorrectly.
Yes. You can wrap the inline CSS code like so:
{% if not user.is_authenticated %}filter: blur(4px);{% endif %}
Also, you can disable interaction with the BG content by adding pointer-events: none; to the class of the element above the content you don't want interacted with.
Related
I created a Login form using HTML, CSS and the background image has white space below the image.
However, when I change the size of the screen, it has white space below the image.
If you look at this picture, this is how it should look like:
Also here is the script for the background image as well as the site wrapping:
#import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";
html, body {min-height: 100%;}
body {
font-family: sans-serif;
background-image: url(assets/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
overflow: hidden;
}
.container {
width: 380px;
margin:7% auto;
border-radius: 25px;
background-color: rgba(0,0,0,0.1);
box-shadow: 0 0 17px #333;
}
.header {
text-align: center;
padding-top: 75px;
}
.header h1 {
color: #333;
font-size: 45px;
margin-bottom: 80px;
}
.main {
text-align: center;
}
.main input, button {
width: 300px;
height: 40px;
border:none;
outline: none;
padding-left: 40px;
box-sizing: border-box;
font-size: 15px;
color: #333;
margin-bottom: 40px;
}
.main button {
padding-left: 0;
background-color: #83acf1;
letter-spacing: 1px;
font-weight: bold;
margin-bottom: 70px;
}
.main button:hover {
box-shadow: 2px 2px 5px #555;
background-color: #7799d4;
}
.main input:hover {
box-shadow: 2px 2px 5px #555;
background-color: #ddd;
}
.main span {
position: relative;
}
.main i {
position: absolute;
left: 15px;
color: #333;
font-size: 16px;
top: 2px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/fontawesome/css/all.min.css">
<link rel="stylesheet" type="text/css" href="assets/style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1><b>login</b></h1>
</div>
<div class="main">
<form #loginForm="ngForm" (ngSubmit)="login(loginForm)">
<div class="row" *ngIf="authError">
<div class="col-12 alert alert-danger">{{ authError?.message }}</div>
</div>
<span>
<i class="fas fa-user"></i>
<input ngModel #email="ngModel" placeholder="Email" name="email" type="email">
</span><br>
<span>
<i class="fas fa-lock"></i>
<input ngModel #password="ngModel" placeholder="Password" name="password" type="password">
</span><br>
<button type="submit">login</button>
<a style=" text-align:center; display:block;" href="/register">Click here to register</a>
</form>
</div>
</div>
</body>
</html>
This is my screenshot
Try putting the background-image in the .container div. and set the height to 100vh. Since its a login page and users does not need to scroll down. It should look like this:
.container{
background-image: url(assets/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
The problem should be fairly simple.
I have 2 HTML files styled by a unique CSS. Basically I have written CSS code for one HTML (the home page) yesterday, and everything works fine. Today I am adding a few 'div' and 'class' elements to the second HTML (checkout) but the code I have added to the CSS today seems to have no effect (code from yesterday works fine though).
So, I have inspected the page run on localhost and loaded the link to the CSS. Well, I have found out that the code I have written today is not being loaded.
Obviously I have saved the CSS, and also tried to close PyCharm and restart the project, but it does not seem to work.
How can I fix this issue?
Here is my project directories tree:
The CSS
body {
background-color: green;
font-size: 100%;
font-family: Sans-serif;
}
h3 {
font-size: 90%;
}
.menu{
background-color: CadetBlue;
text-align: center;
display: inline-block;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
margin:auto;
}
.order {
background-color: Brown;
float: right;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 20px;
}
.restaurant_name {
color: yellow;
font-size: 3em;
text-align: center;
padding-top:5%;
}
.order_header {
text-align: left;
padding-left: 10%;
background: grey;
color: yellow;
border-left: 4px solid LightSeaGreen;
}
.menu_and_order {
padding: 5%;
}
.menu_title {
background: grey;
color: yellow;
border-left: 4px solid LightSeaGreen;
font-style: italic;
font-size: 2.5em;
}
td {
border-bottom: 1px solid #ddd;
border-top: 1px solid #ddd;
padding: 5px;
text-align: left;
}
table {
border-collapse: collapse;
margin: auto;
}
.checkout {
border: 1px solid #ddd;
border-radius: 5px;
padding: 3px;
margin-left: 10%;
background-color: CadetBlue;
}
a {
text-decoration: none;
color: black;
border: 1px solid #ddd;
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
margin: 10%;
background-color: grey;
}
.link {
margin-left: 35%;
}
.order_table {
width: 100%;
}
th {
padding-bottom: 5%;
}
.page_title {
color: yellow;
font-size: 3em;
text-align: center;
padding-top:5%
}
.order_summary {
background-color: Brown;
margin: auto;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 20px;
border: 1px solid #ddd;
}
.customer_details {
float: right;
}
N.B. from .page_title the code is not being loaded on localhost
The second (checkout HTML) is the following.
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout</title>
<link rel="stylesheet" href="{% static 'css/my_cart.css' %}">
</head>
<body>
<div class="order_summary">
<h1 class="page_title">Order summary</h1>
<h3>The following items will be ready to be collected:</h3>
<h3>Reference number: {{ cart }}</h3>
<table class="order_table">
{% for cart_item in cart_items %}
<tr class="order_item">
<td>{{ cart_item.item }}</td>
{% endfor %}
</table>
</div>
<form class="customer_details" action="{% url 'successful_order' %}" method="POST">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Confirm Order">
</form>
Back to order</ul>
</body>
</html>
Probably that's all you need, but here is also the code I have added to settings.py
Should you need me to provide other code, just let me know.
Thank you for any reply
Modern browsers cache the CSS to allow faster page loading for repeat visitors.
Using ctrl+f5 in the browser whenever you make any changes to the CSS forces it to update the cache.
Firefox and Chrome both have an option in the dev tools to disable the cache when the tools are open.
Now the login form is layout in the left. . I want to layout in the center, I have tried some css style, but it is failed. when I deleted '{% extends "common/base.html" %} ' in the code , the form can be in the middle although there is no css style and navigator bar.
My html code is following, and I have add the css style.
{% extends "common/base.html" %}
{% block content %}
<div class="main-login", id="parent">
<form align="center" action="/login" method="POST" >
<div class="login-screen">
<div class="app-title">
<h1>Login</h1>
</div>
<div class="login-form">
<div class="control-group">
<input type="text" class="login-field" value="" placeholder="username" name="username">
<label class="login-field-icon fui-user" for="login-name"></label>
</div>
<div class="control-group">
<input type="password" class="login-field" value="" placeholder="password" name="password">
<label class="login-field-icon fui-lock" for="login-pass"></label>
</div>
<input type="submit" value="Log in" class="btn btn-primary btn-large btn-block" >
<br>
<p>{{ _('New User?') }} {{ _('Click to Register!') }}</p>
<p>
{{ _('Forgot Your Password?') }}
{{ _('Click to Reset It') }}
</p>
</div>
</div>
</form>
</div>]
my css code:
.main-login{
padding-top: 100px;
text-align: center;
width:500px;
/*align-items: center;*/
vertical-align: middle;
}
#parent {
/*display: table;*/
width: 50%;
vertical-align: middle;
text-align: center;
}
.login {
margin: 20px auto;
width: 300px;
}
.login-screen {
/*background-color: #FFF;*/
padding-top: 1000px;
background-color: #3498DB;
padding: 20px;
border-radius: 5px;
text-align: center;
}
.app-title {
text-align: center;
color: #777;
}
.login-form {
text-align: center;
}
.control-group {
margin-bottom: 10px;
}
input {
text-align: center;
background-color: #ECF0F1;
border: 2px solid transparent;
border-radius: 3px;
font-size: 16px;
font-weight: 200;
padding: 10px 0;
width: 250px;
transition: border .5s;
}
input:focus {
border: 2px solid #3498DB;
box-shadow: none;
}
.btn {
border: 2px solid transparent;
background: #3498DB;
color: #ffffff;
font-size: 16px;
line-height: 25px;
padding: 10px 0;
text-decoration: none;
text-shadow: none;
border-radius: 3px;
box-shadow: none;
transition: 0.25s;
display: block;
width: 250px;
margin: 0 auto;
}
.btn:hover {
background-color: #2980B9;
}
.login-link {
font-size: 12px;
color: #444;
display: block;
margin-top: 12px;
}
The image in the middle after used vsevolodts' answers I want to make the length of log in button in the below is the same as password form:
Apply the next CSS trick to the main block:
margin-left:auto;
margin-right:auto;
I am developing an angular 2 app with angular material. I have two buttons sign in and sign up I want a vertical line between the two buttons; I saw many examples on different sites but it doesn't work. I want that the buttons be on same line (inline and between them a little vertical line).
this is the html code :
.textAlign {
text-align: center;
color: white;
position: absolute;
top: 50%;
left: 50%;
/* à 50%/50% du parent référent */
transform: translate(-50%, -50%);
font-family: 'Source Sans Pro';
}
h1 {
font-weight: bold;
}
.image {
width: 100%;
}
.ligne_verticale {
width: 5px;
border-left: 5px solid gray;
height: 70px;
}
.nav-button {
text-align: center;
vertical-align: middle;
border: solid 1px;
border-radius: 5px;
background-color: white;
font-weight: bold;
width: 120px;
margin-right: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="content">
<div>
<img class="image" src="http://seabramota.com/img/intro-bg.jpg" alt="image
d'accueil">
<div class="textAlign">
<h1>{{ 'PAGEHOME.TITLE' | translate }}</h1>
<br>
<h3>{{ 'PAGEHOME.DESCRIPTION' | translate }}</h3>
<br>
<button mat-button color="primary" class="nav-button" (click)="openConnectDialog()">
{{ 'PAGEHOME.CONNECTBUTTON' | translate }}
</button>
<button mat-button color="primary" class="nav-button" (click)="
openRegisterDialog()">
{{ 'PAGEHOME.INSCRIREBUTTON' | translate }}
</button>
</div>
</div>
Something like that ?
.container {
display: flex;
width: 100%;
justify-content: center;
}
button {
background: #99A3FF;
color: white;
border: 0;
padding: 6px 12px;
border-radius: 2px;
}
.button-container {
padding: 12px 24px;
}
.button-container:not(:last-child) {
border-right: 1px solid #ddd;
}
<div class="container">
<div class="button-container"><button>Register</button></div>
<div class="button-container"><button>Log In</button></div>
</div>
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link href="{% static 'css/hover.css' %}" rel="stylesheet" media="all">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<!-- CSS -->
<style>
.menu {
font-family: sans-serif;
background: blue;
padding: 5px;
width: 130px;
z-index: 100;
bottom: 200px;
right: 700px;
box-shadow: 5px 5px 5px;
border-radius:5px 5px 5px 5px;
margin-bottom: 160px;
position: relative;left:700px;top:250px;
}
.menu a,
.menu h3 {
font-size: 0.9em;
display: block;
margin: 0 0.5em;
color: white;
}
input {
width: 120px;
}
</style>
</head>
<body>
<!-- HTML -->
<main>
<nav class="menu">
<div id='wrapper'>
<h3>Login</h3>
<form method='POST' class= "post-form"> {{ form.as_p }} </form>
Create Account
</div>
</nav>
</main>
</body>
</html>
It just displays a square menu in the middle of the screen, until I resize the window. It doesn't stay in the center anymore, how can I change that? I've tried using min-width but to no avail. How do I get it to stay fixed in place?
You have hard coded the positioning of your menu. Instead, set the body to position: relative and your nav to position: absolute. Then you can use the css calc() function to center your nav on any size page. See example:
html {
min-height: 100%;
}
body {
height: 100vh;
width: 100%;
position:relative;
}
.menu {
position: absolute;
font-family: sans-serif;
background: blue;
padding: 5px;
width: 130px;
z-index: 100;
top:calc((100vh - 2.7em - 10px)/2);
right:calc((100% - 140px)/2);
box-shadow: 5px 5px 5px;
border-radius:5px 5px 5px 5px;
}
.menu a,
.menu h3 {
font-size: 0.9em;
display: block;
margin: 0 0.5em;
color: white;
}
input {
width: 120px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<!-- HTML -->
<main>
<nav class="menu">
<div id='wrapper'>
<h3>Login</h3>
<form method='POST' class= "post-form"> {{ form.as_p }} </form>
Create Account
</div>
</nav>
</main>
Try this
.menu {
font-family: sans-serif;
background: blue;
padding: 5px;
width: 130px;
z-index: 100;
box-shadow: 5px 5px 5px;
border-radius:5px 5px 5px 5px;
margin-bottom: 160px;
position: relative;
top:250px;
margin: auto;
}
.menu a,
.menu h3 {
font-size: 0.9em;
display: block;
margin: 0 0.5em;
color: white;
}
input {
width: 120px;
}
<main>
<nav class="menu">
<div id='wrapper'>
<h3>Login</h3>
<form method='POST' class= "post-form"> {{ form.as_p }} </form>
Create Account
</div>
</nav>
</main>
JsFiddle - https://jsfiddle.net/f39wurmn/