when i use static file in my django app,i found a strange problem : that when i use body{ } in the css file can change the body's attributes ,when i use the div's id or class name ,the css file doesn't work on the div's attributes like this:
the base.html:
<!DOCTYPE html>
{% load staticfiles %}
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %} Food {% endblock title %}</title>
<link rel="stylesheet" href="{% static "style/index.css" %}" media="screen"/>
</head>
<body>
<div class="sidebar">
{% block sidebar %}
{% endblock %}
</div>
<div class="content">
{% block content %}
<i>Delicious</i>
{% endblock %}
</div>
</body>
</html>
and the index.html:
{% extends "blog/base.html" %}
{% block title %} Food title{% endblock title %}
{% block content %}
<div class="body-head">
</div>
<div class="body-middle">
</div>
<div class="body-foot">
</div>
{% endblock content %}
the index.css:
body {
height: 100%;
width: 100%;
background-color: brown;
}
.sidebar{
width: 100%;
height: 10%;
background-color: seagreen;
}
.body-head {
width: 100%;
height: 50%;
background-color: sandybrown;
}
only the body{ }can be effect.and others like .sidebar{ } and .body-head{ } do no effect.
Your sidebar block and .body-head div are empty.
Is this your whole page or just an example?
If you can see body styles, I suppose the css file is well referenced.
Related
*I am having trouble in my index.html file. {% extends 'base.html' %} works. But everything b/w
{% block content %}{% endblock content %} doesn't execute. Here are my files.
views.py:-*
from django.shortcuts import render
def index(request):
return render(request, 'main/index.html')
base.html:-
<!doctype html>
{%load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<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>
<title>To Do App</title>
</head>
<body>
<div>
<nav class=" navbar fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="/">To Do App</a>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
</div>
</body>
</html>
index.html:-
{% extends 'base.html'%}
{% block content %}
<div class="row">
<div class="col">
<h2>Add Item</h2>
</div>
</div>
{% endblock content %}
All it shows is a navbar of dark color saying To Do App
I also tried adding advanced things like form but it didn't work so then i added this heading saying Add Item. And guess what it doesn't work
When I inspect elements in browser I can see your Heading "Add Item". The only problem was that the whole <div class="container">...</div> was hidden behind nav bar. And the reason was CSS.
Adding something like margin-top: 56px to .container may solve the problem.
Based on documentation you must use only 'endblock' tag when you are closing tag.So you must replace {% endblock content %} with {% endblock %}.
I can't link the CSS file in the HTML file, I tried in another example html css alone without django it's work but in django I have problems.
'''
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First site</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
</head>
<body>
<h1>WeLcome</h1>
<hr>
{% if latest_post_list %}
<ul>
{% for post in latest_post_list %}
<h3 >{{ post.title }}</h3>
<p>{{ post.body }}</p>
{% endfor %}
</ul>
{% else %}
<p>no post are availabel</p>
{% endif %}
</body>
</html>
'''
'''
#import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
body{
text-decoration: none;
font-family: 'Raleway', ;
max-width: 300;
margin: auto;
padding: 20px;
}
'''
enter image description here
first you want to add the css as a static file directory in settings.py, Below the BASE_DIR STATIC_DIR = os.path.join(BASE_DIR,'static'). Before that create a folder for static in same hierarchy of manage.py....
Above is for telling that django to search my style.css in these directory folders
then add this in your html file.Add load Staticfiles in the top of the html file
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
First Add a new directory in your app with name static.
in static folder add a new folder css.
in css folder add new file style.css and fill with your css.
now in your base.html add a line like below -->
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
in my css file i have simple property
h1 {
color:red;}
and here is the screenshot of the result Dear! click to see image
I have a webpage structured as follows and I want to have a background-color: #aa2222 property to apply only to the footer.
<body>
{% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
{% block content %}<!-- default content text (typically empty) -->
<!-- Navigation Bar -->
<section class="navbarSection">
<div class="topnav" id="myTopnav">
...
</div>
</section>
<!-- End of Navigation Bar -->
<!-- Articles -->
<section class="articleSection">
<div class="articles" id="myArticles">
{% for article in articles %}
...
{% endfor %}
</div>
</section>
<!-- Footer -->
<footer id="site-footer">
<div id="footer1">
<p> footer text </p>
</div>
</footer>
<!-- End of Footer -->
</body>
The footer is styled as follows:
#footer1 {
background-color: #aa2222;
}
At the moment the page is displayed with all the body with background-color:#aa2222 instead of only the footer.
It seems to be related to Django because using the code in a web editor it applies the background color properly only to the footer.
Could you please help?
EDIT1: as suggested, I tried to add a footer.html file in the templates folder as follows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- Footer -->
<footer id="site-footer">
<div id="footer1">
<p> footer text </p>
</div>
</footer>
<!-- End of Footer -->
</body>
</html>
Then I have added the tag {% include "templates/footer.html" %} in the index.html but I receive the error TemplateDoesNotExist at /home/ when running python manage.py runserver
try defining the footer section in a separate footer.html page and use the include template tag to include the html page.
Solved recoding all the website using bootstrap for responsive design and inserting the footer in the index.html.
Extract of HTML below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
{% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
{% block content %}<!-- default content text (typically empty) -->
<!-- Main Logo -->
<div class="main-image" id="myMainImage">
<img src="{{STATIC_URL}}/static/images/logo.png"/>
</div>
<!-- Navigation Bar -->
<nav class="navbar navbar-inverse">
...
</nav>
<!-- End of Navigation Bar -->
<!-- Articles -->
<div class="articles" id="myArticles">
{% for article in articles %}
<h3>Titolo: {{ article.title }}</h3>
<p><strong>Autori:</strong> {{ article.authors }}</p>
<p><strong>Riepilogo:</strong> {{ article.summary }}</p>
<p><strong>Testo:</strong> {{ article.content }}</p>
{% endfor %}
</div>
<!-- End of Articles -->
<!-- Footer -->
<footer class="site-footer">
<div id="footer1">
<p> Text </p>
</div>
</footer>
<!-- End of Footer -->
{% endblock %}
</body>
</html>
And the CSS:
.site-footer {
padding-left: 40px;
padding-right: 40px;
padding-top: 15px;
padding-bottom: 10px;
background-color: #aa2222;
color: white;
font-style: italic;
text-align: center;
}
So my app has the following structure: base.html, which contains the nav and the links to the stylesheets and the home.html file, which loads the nav via extends. However, i can't really modify the css inside my home.html file, any suggestions whats wrong?
base.html:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>App</title>
<link rel="shortcut icon" href="{% static 'img/favicon.png' %}">
<link rel="stylesheet" href="{% static 'css/app.css' %}">
...## navbar etc.
<div id="body">
<div class="container">
{% block page %}
{% endblock %}
</div>
</div>
home.html:
{% extends 'base.html' %}
{% load staticfiles %}
{% block page %}
<div class="row">
<div class="col-md-12">
<img src="{% static 'img/banner.gif'%}" class="banner">
</div>
{% endblock %}
As you can see in the base.html file, i load the app.css file via static method.
However, changing for example the banner class in the home.html isn't working at all:
#body .banner {
width: 100%;
margin-bottom: 150px;
}
No errors in the terminal / console. The app.css file works for the base.html by the way.
Try ctrl + F5, in django you have to reload your cache after making changes to static files.
I'm getting issues when index.html inherits from base.html Jinja2 is duplicating content.
I'm using the example code from http://jinja.pocoo.org/docs/dev/templates/#template-inheritance but the content in the browser is duplicated completely. I don't know if it's because of jinja environment setting mistake, extends tag or something like that.
base.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{% block head %}
<link rel="stylesheet" href="style.css" />
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %}
© Copyright 2008 by you.
{% endblock %}
</div>
</body>
index.html
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
<style type="text/css">
.important { color: #336699; }
</style>
{% endblock %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
</p>
{% endblock %}
This is that I'm getting ( the same html code twice ):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" />
<title>Index - My Webpage</title>
<style type="text/css">
.important { color: #336699; }
</style>
</head>
<body>
<div id="content">
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
</p>
</div>
<div id="footer">
© Copyright 2008 by you.
</div>
</body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" />
<title>Index - My Webpage</title>
<style type="text/css">
.important { color: #336699; }
</style>
</head>
<body>
<div id="content">
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
</p>
</div>
<div id="footer">
© Copyright 2008 by you.
</div>
</body>
Any idea? Thanks so much.
UPDATE!!
Here my handler. I'm using webapp2.
class LandingHandler(webapp2.RequestHandler):
def get(self):
template = settings.JINJA_ENVIRONMENT.get_template('index.html')
self.response.write(template.render(dict()))
UPDATE 2!!
In my settings.py
JINJA_ENVIRONMENT = jinja2.Environment(
loader=jinja2.FileSystemLoader(os.path.join(os.path.dirname(__file__),'templates')),
extensions=['jinja2.ext.autoescape'],
autoescape=True)
It's something odd about Jinja (& Bootstrap). It takes into account html comments as well, before it gives out warnings. So if you have any comments on that file, probably a commented out {% block content %} ... {% endblock %} section, then remove it completely from there and it will work.