I made a class and named it ">My Hero Academy<".
I am trying to make it move down, but it is not moving down.
What is the problem? Image
I am trying to move it lower than my title, then a little left, but it is not moving at all.
<body>
<div class="sidenav2">
<h5>One Piece</h5>
</div>
</body>
</html>
{% endblock %}
My full home page code
{% extends 'main/base.html' %}
{% block title%}
home
{% endblock %}
{% block content %}
<html>
<head>
<style type="text/css">
.sidenav2 a {
padding:6px 8px 6px 216px;
left:100px;
top:100px;
text-decoration: none;
font-size:35px;
color: #818181;
display:block;
}
</style>
</head>
<body>
<div class="sidenav2">
<h5>My Hero Academy</h5>
</div>
</body>
</html>
{% endblock %}
In your css, Change this
.sidenav2 a {
to
.sidenav2 h5 {
Related
I have the following layout.html file which is the main template.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
</head>
<body class="d-flex vh-100 text-center text-white bg-dark">
<div class="container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">
<nav class="navbar navbar-dark bg-dark justify-content-center">
<a class="nav-link active link-light" aria-current="page" href="/">Home</a>
<a class="nav-link link-light" href="/products">Products</a>
<a class="nav-link link-light" href="/contact">Contact</a>
</nav>
</header>
<main class="px-3">
{% block body %}{% endblock %}
</main>
<footer class="mt-auto text-white-50">
<p>Template</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
The body class uses the bg-dark but for one of the pages I need to use bg-red for the body class. How can I change that? For example I created another page using extends layout.html.
{% extends "layout.html" %}
{% block body %}
<h1>Some text here</h1>
<h2>Some text here also</h2>
{% endblock %}
Should have the new background color in the html file or in .css file? If I put it in the .css file how to indicate the body class just for one specific page? Could be a solution to give an id to the body class and change the color in css file but how to give an id for each separate page? When using the extends layout.html will import the same id for all pages.
1- You can create macro that allow you to create a custom body, passing style into macro params in order to apply it into inline style.
2 - You can create CSS variable into the layout.html, then apply it in your style.css > body class, where the value of the style will be passed from the endpoint return, so for example if the home page will take 'bg-red':
global body background-color
app.py
#application.before_request
def before_request_func():
g.BODY_COLOR = "bg-red"
layout.html
<style>
:root {
--body-color: {{g.BODY_COLOR}};
}
</style>
style.css
body {
font-family: "Montserrat", sans-serif;
background-color: --body-color;
}
template background color
app.py
#application.route('/')
def index():
b_c = "bg-red"
retun render_template('index.html',b_c=b_c)
layout.html
<style>
:root {
{%if b_c %}
--body-color: {{b_c}};
{%endif%}
}
</style>
style.css
body {
font-family: "Montserrat", sans-serif;
background-color: --body-color;
}
I am new to Django. I want to add just a few lines of styling code in my Django template i.e 'blogs.html' which is already inheriting from a 'base.html' django template.But If I add a style tag and try to give a background image using {%static %} it doesnt work.
Blogs.html
{% extends 'base.html'%}
{% load staticfiles %}
{% block content %}
<style>
body{
margin:0;
padding:0;
}
box1{
height:100vh;
width:100%;
background image:{%static 'images/ps1.jpg'%};
background-size:cover;
}
box2{
height:100vh;
width:100%;
background image:{%static 'images/ps2.jpg'%};
background-size:cover;
}
box3{
height:100vh;
width:100%;
background image:{%static 'images/ps3.jpg'%};
background-size:cover;
}
</style>
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
{% endblock %}
I am assuming Your {% block content %} {% endblock %}
is in html body but that CSS code should be in head. That's why it's not working.
If you really need this, then you can create a block on base.html head section.
Something like this
<head>
{% block mycss %} {% endblock mycss %}
</head>
and the in inherited html
{% extends 'base.html'%}
{% load staticfiles %}
{% block mycss %} <style> Your entire css </style> {% endblock %}
{% block content %}
Body Part
{% endblock %
I use jupytherthemes module to change Jupyter notebook theme to solarized. For some reason, I needed to reinstall the Anaconda. After that I was not able to use jupytherthemse and I just used another custom.css file and left it in .jupyter/custom directory.
My notebook theme is fine but when I export it as html, nbconver uses the old theme--solarized. I searched a lot to find a way to reset the template to the default template or to custom.css I am using for notebook. I was not able to find any solution.
any thought would be much appreciated.
here is full.tpl content:
{%- extends 'basic.tpl' -%}
{% from 'mathjax.tpl' import mathjax %}
{%- block header -%}
<!DOCTYPE html>
<html>
<head>
{%- block html_head -%}
<meta charset="utf-8" />
<title>{{resources['metadata']['name']}}</title>
{%- if "widgets" in nb.metadata -%}
<script src="https://unpkg.com/jupyter-js-widgets#2.0.*/dist/embed.js"></script>
{%- endif-%}
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
{% for css in resources.inlining.css -%}
<style type="text/css">
{{ css }}
</style>
{% endfor %}
<style type="text/css">
/* Overrides of notebook CSS for static HTML export */
body {
overflow: visible;
padding: 8px;
}
div#notebook {
overflow: visible;
border-top: none;
}
{%- if resources.global_content_filter.no_prompt-%}
div#notebook-container{
padding: 6ex 12ex 8ex 12ex;
}
{%- endif -%}
#media print {
div.cell {
display: block;
page-break-inside: avoid;
}
div.output_wrapper {
display: block;
page-break-inside: avoid;
}
div.output {
display: block;
page-break-inside: avoid;
}
}
</style>
<!-- Custom stylesheet, it must be in the same directory as the html file -->
<link rel="stylesheet" href="custom.css">
<!-- Loading mathjax macro -->
{{ mathjax() }}
{%- endblock html_head -%}
</head>
{%- endblock header -%}
{% block body %}
<body>
<div tabindex="-1" id="notebook" class="border-box-sizing">
<div class="container" id="notebook-container">
{{ super() }}
</div>
</div>
</body>
{%- endblock body %}
{% block footer %}
{{ super() }}
</html>
{% endblock footer %}
I am currently following a Django tutorial and I believe that I followed it precisely however I am getting this syntax error. It is saying that {% endblock %} isn't working. Not really sure why this is incorrect. I am trying to create a partial view or template inheritance and plug it into the base.html
My error:
Invalid block tag: 'endblock'
Request Method: GET
Request URL: http://127.0.0.1:8000/articles/all/
Django Version: 1.6
Exception Type: TemplateSyntaxError
Exception Value:
Invalid block tag: 'endblock'
Error during template rendering
In template /Users/bradfordli/Development/django-brad/django_test/article/templates/articles.html, error at line 25
Invalid block tag: 'endblock'
15 {% endfor %}
16 {% else %}
17
18 <p> None to show!</p>
19
20 {% endif %}
21
22 </body>
23 </html>
24
25 {% endblock %}
26
My articles.html
{% extends "base.html" %} <!-- this templates extends the base.html template -->
(% block content %)
<html>
<body>
<h1>Articles</h1>
{% if articles.count > 0 %}
{% for article in articles %}
<div>
<h2>{{article.title}}</h2>
<p>{{article.body|upper}}</p>
</div>
{% endfor %}
{% else %}
<p> None to show!</p>
{% endif %}
</body>
</html>
{% endblock %}
My base.html
<!-- Base of every pate in the side-->
<!DOCTYPE html>
<html lang = "en">
<head>
<title>{% block title %} My Base Template {% endblock %}</title>
<style type="text/css">
body {
text-align: center;
}
#page {
width: 960px;
text-align: left;
margin: 10px auto 20px auto;
background-color: #0c0c0c;
}
#sidebar {
float: left;
width: 200px;
border: 1px solid #000;
}
#content {
float: left;
width: 600px;
border: 1px solid #f00;
padding: 10px;
}
</style>
</head>
<body>
<div id = "page">
<div id = "sidebar">
<!-- This block of the page is named "sidebar"
Also anything between can be substituded by other templates
as long as they refer to sidebar as a block within their template
-->
{% block sidebar %}
<ul>
<li> Articles</li>
<li>Admin</li>
</ul>
{% endblock %}
</div>
<div id = 'content'>
<!-- This block of the page is named "content"-->
{% block content %} This is the content area {% endblock %}
</div>
</div>
</body>
</html>
I don't see any endblock here:
<title>{% block title %} My Base Template</title>
Change the following:
(% block content %) => {% block content %}
When I use {% extends %} tag its not pulling through my standard html. Is there something am missing am new to Django template tags. I want to add the Standard,html into my index.html file which also resides in the templates folder.
My index file in the template folder:
{% extends "Standard.html" %}
{% block maincontent %}
{% block headcontent %}
<link rel="stylesheet" type="text/css" href="/media/css/Panels.css" />
<link rel="stylesheet" type="text/css" href="/media/css/HostOverview.css" />
{% endblock %}
<script>
function disaT(c,f){
if(c.checked){f.txt1.disabled=false;
f.submit.disabled=false;
}
else{f.txt1.disabled=true;
f.submit.disabled=false;
}
}
</script>
<style>
a:link {
color: #39F;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #63C;
}
a:hover {
text-decoration: none;
color: #CCC;
}
a:active {
text-decoration: none;
color: #000;
}
</style>
<div style="display:none" id="dialog" title="Disable Your Account?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This will disable your account and log you out. You won't be able to log back in. Are you sure you want to continue?</p>
</div>
<h1></h1>
<form name="logger" action="" method="post">
<label>Input : </label><textarea name="txtexec" id="txtexec" cols="50"/>{{ txtexec }}</textarea> <input type="submit" name="execute" value="Execute" /><br /><br />
<label>Pattern Input : </label><input name="txtpattern" id="txtpattern" type="text" size="100" value="{{ txtpattern }}" /><br />
<label>Result : </label><br />
</form>
<P>Discover</P>
<pre>
{{ file_content }}
</pre>
<P>Console output</P>
<pre>
{{ Output_content }}
</pre>
<form name="checkin_form" action="#" method="post" enctype="multipart/form-data"><br><br>
Full pattern : <span style="color:#000; font-size:10px; background:#CCC;" >{{ session_fullpattern }}</span><br><br>
<label>Check In : </label><input type="checkbox" onclick="disaT(this,this.form)"><br>
<label>Enter pattern name : </label><input name="txt1" type="text" disabled="true"> <input type="submit" name="submit" value="Submit" disabled="true" />
</form>
<div style="clear:both;" />
{% endblock %}
My standard.html page:
{% extends "Base.html" %}
{% block head %}
<link rel="stylesheet" type="text/css" href="/media/css/Standard.css" />
<link rel="stylesheet" type="text/css" href="/media/css/Menu.css" />
<link rel="stylesheet" type="text/css" href="/media/css/Tooltip.css" />
<link rel="Stylesheet" type="text/css" href="/media/css/custom_theme/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript" src="/media/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/media/js/jquery-ui-personalized-1.6rc6.min.js"></script>
{% block headcontent %}{% endblock %}
{% endblock %}
You're nesting blocks inside each other, which is rarely the right thing to do.
Your index.html should start like this:
{% extends "standard.html" %}
{% block headcontent %}
<link rel="stylesheet" type="text/css" href="/media/css/Panels.css" />
<link rel="stylesheet" type="text/css" href="/media/css/HostOverview.css" />
{% endblock %}
{% block maincontent %}
... etc
but then you also need a place for maincontent to go in standard.html:
{% extends "Base.html" %}
{% block head %}
.... content ...
{% endblock %}
{% block headcontent %}{% endblock %}
{% block maincontent %}{% endblock %}
Your inheritance and naming is way of. Examine the template language documentation. The example below should give you an idea aswell.
base.html
<html>
<head>
<!-- this will always be inherited -->
{% block head %}
<!-- this can be overruled -->
{% endblock %}
</head>
<body>
<!-- this will always be inherited -->
{% block body %}
<!-- this can be overruled -->
{% endblock %}
</body>
</html>
page.html
{% extends "base.html" %}
{% block head %}
<!-- Hello I am overwriting the base head, but not touching it's body. -->
{% endblock %}