Reputation: 29
I have a base template html file and a "login" html file, which inherits from base file. I'm unable to attach css styles to this child template only if I don't write these styles exactly in this file. Child html file looks like this and I want to write these styles in a seperate styles.css file, but I could not figure out how to do it.
% block head %}
{{ super() }}
<style>
body:not(#login-page){
filter: blur(1px);
}
.login-page {
display: inline-block;
margin: 300px 0 0 700px;
background-color: #c0c0c0;
}
label {
font-size: 24px;
}
.username {
width: 200px;
margin-left: 50px;
height: 24px;
}
.password {
width: 200px;
margin-left: 197px;
margin-top: 15px;
height: 24px;
}
.remember-me {
margin-top: 20px;
}
.remember-me_label {
font-size: 15px;
}
.login-submit {
margin-top: 20px;
margin-left: 150px;
}
</style>
{% endblock %}
And this is what base template head tag looks like:
{% block head %}
<link rel="stylesheet" href="{{ url_for("static", filename="styles.css") }}">
<link rel="stylesheet" href="{{ url_for("static", filename="reset.css") }}">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
{% endblock %}
Any help would be appreciated
Upvotes: 1
Views: 3593
Reputation: 29
My css files were being cached by the browser and that's the reason why the styles were not working.
Upvotes: 0
Reputation: 542
Let me clarify things.
First, the base template is fully loaded in the child template; I mean if the base template was:
<html>
<head>
<title>Your title here</title>
</head>
<body>
...
</body>
</html>
and the login page was only:
{% extends "base.html" %}
Then if you inspect the login page, you will see the same html code that is in base.html
Now if there's something common that you want to put in every page (like page header, page footer,...) you put it in base.html; Even if you want a css or javascript file to be loaded in every page (like jquery.js, or main_style.css) you put these in base.html
So base.html will be:
<html>
<head>
<title>Your title here</title>
<link rel="stylesheet" href="main_style.css">
</head>
<body>
...
<script src="jQuery.js"></script>
</body>
</html>
and both main_styles.css and jQuery.js will be loaded in every page that includes base.html
Now if you want to add content for specific pages (like in login.html you want the login form), so you put a block in the base.html and fill it in the child template (even if you want to add specific styles for specific pages).
Finally base.html will be:
<html>
<head>
<title>Your title here</title>
<link rel="stylesheet" href="main_style.css">
{% block more_css %}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
{% block more_js %}
{% endblock %}
<script src="jQuery.js"></script>
</body>
</html>
Notice the empty blocks (content, more_css, more_js) in the base html, if they were not empty they will be replaced as in your code
and your login page will be:
{% extends "base.html" %}
{% block content %}
<form id="loginform" method="">
...
</form>
{% endblock %}
{% block more_css %}
<link rel="stylesheet" href="login_page_style.css">
{% endblock %}
{% block more_js %}
<script src="login_page_js.js"></script>
{% endblock %}
Now, login_page_style.css and login_page_js.js will only be loaded in login.html not in every child page.
So in your case, you should put the specific css in different file (let's say login_style.css) and include the base template in the child.
base.html
<!DOCTYPE html>
<html>
<head>
{% block head %}
<link rel="stylesheet" href="{{ url_for("static", filename="styles.css") }}">
<link rel="stylesheet" href="{{ url_for("static", filename="reset.css") }}">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
{% block more_js %}
{% endblock %}
</body>
</html>
login.html
{% extends "base.html" %}
{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for("static", filename="login_style.css") }}">
{% endblock %}
{% block content %}
<p>Anything you want to put in the login page</p>
{% endblock %}
login_style.css:
body:not(#login-page){
filter: blur(1px);
}
.login-page {
display: inline-block;
margin: 300px 0 0 700px;
background-color: #c0c0c0;
}
label {
font-size: 24px;
}
.username {
width: 200px;
margin-left: 50px;
height: 24px;
}
.password {
width: 200px;
margin-left: 197px;
margin-top: 15px;
height: 24px;
}
.remember-me {
margin-top: 20px;
}
.remember-me_label {
font-size: 15px;
}
.login-submit {
margin-top: 20px;
margin-left: 150px;
}
Upvotes: 4