Following is my homepage.html is home app
{% extends "base.html" %}
{% load static %}
<link rel = "stylesheet" href = "{% static 'css/home.css' %}" > #reference to stylesheet in the home app static directory
{% block body %}
<h1>I am homepage</h1>
{% endblock %}
My base.html in the project root folder is the following
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "{% static 'base.css' %}" > #stylesheet in root folder
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
But here, the home.css in the homepage.html is not functional as the base.html on extend closes the head before the home.css can come in the head section.
Is there any way I can add the CSS into the header
Thanks
You just need another block.
In base.html:
<head>
<link rel="stylesheet" href="{% static 'base.css' %}">
{% block extrahead %}{% endblock %}
</head>
...
and in homepage.html:
{% extends "base.html" %}
{% load static %}
{% block extrahead %}<link rel="stylesheet" href="{% static 'css/home.css' %}">
{% endblock %}
...
Related
I am still very new to Django and I want to add the HTML for a navigation bar and its respective CSS into my base HTML file. Here is what I did up till now:
in app/base.html:
{% extends "BritIntlSchl/navbar.html" %}
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<link href="{% static 'appname\stylebase.css' %}" rel="stylesheet">
<link href="{% static 'appname\navbarstyles.css'}" rel="stylesheet" %}">
{% block head-content %}{% endblock head-content %}
</head>
{% block nav%}{% endblock nav %}
{% block content1 %}{% endblock content1 %}
</body>
</html>
and in app/navbar.html:
{% block nav%}
<div class="wrap">...</div>
{% endblock nav%}
I am pretty much lost here. I am sure that putting{% block nav%} around the nav bar does nothing.
How do you suggest I go about this?
I'm using Django 2.1.
When one uses the extend template tag one cannot have any HTML outside any block as then there would be the confusion of where to put this HTML (In fact the template engine would completely ignore that HTML). So when you extend /navbar.html at most you can fill the block named nav which you are overriding and filling with nothing. What you want to do is to use the include template tag to include the navbar into base.html:
base.html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<link href="{% static 'appname\stylebase.css' %}" rel="stylesheet">
<link href="{% static 'appname\navbarstyles.css'}" rel="stylesheet" %}">
{% block head-content %}{% endblock head-content %}
</head>
{% block nav %}{% include 'app/navbar.html' %}{% endblock nav %}
{% block content1 %}{% endblock content1 %}
</body>
</html>
Note: We put the {% block nav %} there not because navbar.html would fill it but because some page extending base.html might want a
custom navbar.
navbar.html:
<div class="wrap">...</div>
My project has two apps (for now),table and menu. Each app has a template and both templates extends a base.html template at the project root.
table_view.html
{% extends "base.html" %}
{% load static %}
{% block title %}Table Mgt{% endblock %}
{% block content %}
<link href="{% static "css/table.css" %}" rel="stylesheet" />
...some elements here...
{% endblock %}
{% block sidebar %}
<a href="#">
<button class="sidebar_button check_in">Check In</button>
</a>
<a href="#">
<button class="sidebar_button check_out">Check Out</button>
</a>
{% endblock %}
menu_view.html
{% extends "base.html" %}
{% load static %}
{% block title %}Menu{% endblock %}
{% block content %}
<link href="{% static "css/menu.css" %}" rel="stylesheet"/>
{% block sidebar %}
{% include 'table/table_view.html' %}
{% endblock %}
base.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static "css/base.css" %}" rel="stylesheet" />
</head>
<body>
<div id="header">
...some elements here...
</div>
<div id="sidebar">
{% block sidebar %}
{% endblock %}
</div>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
In menu_view.html, I am trying to include the block sidebar only. However, the entire table_view.html is actually embedded.
How do I include only a specific block from specific template?
Template extension works by defining slots you can put stuff into. These slots can be filled with defaults. The slots will be rendered as is if you don't override them in the extending (child) templates.
For example with this base:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Hello World!{% endblock %}</title>
<link href="{% static "css/base.css" %}" rel="stylesheet" />
{% block extra_css %}{% endblock %}
</head>
</html>
And this child:
{% extends "base.html" %}
The result will be:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="/static/css/base.css" rel="stylesheet" />
</head>
</html>
With this child template:
{% extends "base.html" %}
{% block extra_css %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">{% endblock %}
The result is:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="/static/css/base.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
</html>
Now specific to your problem:
if you have different sidebars, try to make the sidebar.html template smarter so it can render all variations -or- create different sidebar templates
if you have the same sidebar everywhere, but some pages don't have a sidebar, create different base templates: one with a sidebar slot and one without.
if each sidebar is different for each page, don't bother with include and just override the slot
Quick Summary: I can get 'base.css' to load but not 'index.css', they are in the same directory.
I have a 'base.html' file and a 'base.css' file, all other .html files extend 'base.html.' Using static to load the 'base.css' is working without a problem. It is when I try to have my 'index.html' extend 'base.html' and then also load the 'index.css' file that I am running into an issue. If I go to the js console and click 'sources' it will say 'Could not find the original style sheet.' in reference to 'index.css'. I am not sure why this is happening.
Here is the directory for the app 'core':
core/
templates/
core/
base.html
index.html
static/
core/
base.css
index.css
Base.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Generic</title>
<meta name="description" content="DESCRIPTION">
<link rel="stylesheet" href="{% static 'core/base.css' %}"> <!-- loading without issue -->
{% block head %}
{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
index.html:
{% extends "core/base.html" %}
{% load static %}
{% block head %}
<link rel="stylesheet" href="{% static 'core/index.css' %}"> <!-- not loading -->
{% endblock %}
{% block body %}
<!-- content -->
{% endblock %}
Thanks in advance for any help.
I'm trying to add the dropzone form to a django template and it won't show up. I've imported using django's static and downloaded the dist folder from http://www.dropzonejs.com/ and used
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>
as instructed by the website.
<html>
{% extends 'base.html' %}
{% block head %}
<head>
{% load staticfiles %}
<script src="{% static '/dropzone/dropzone.js' %}"></script>
<link href="{% static '/dropzone/dropzone.css' %}" rel="stylesheet">
<link href="{% static '/dropzone/basic.css' %}" rel="stylesheet">
</head>
{% endblock %}
{% block body %}
<body>
<form action="/file-upload" class="dropzone" id="my-awesome-dropzone">
</form>
</body>
{% endblock %}
</html>
I know it's not an issue with static in django because I have bootstrap working using static within this project. Any idea as to why dropzone won't display?
try initialize the dropzone using jquery
<script>
$(".dropzone").dropzone();
</script>
I've 2 templates. Here is the listing:
1)base.html
<!DOCTYPE html>
<html>
<head>
{% load staticfiles %}
<link type="text/css" rel="stylesheet" href={% static 'resume/stylesheet.css'%}/>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div id=header> some info </div>
{% block content %}{% endblock %}
</body>
</html>
2)person.html
{% extends "base.html" %}
{% block title %}Personal info{% endblock %}
{% block content %}
<div>{{person.first_name}}</div>
{% endblock %}
I use template "person.html" in my view
def person_view(request):
person = get_object_or_404(Person, pk=1)
return render(request, "resume/person.html", {'person': person})
urls.py:
url(r'^$', views.person_view, name='person'),
The problem is, when I run the server, and trying to open page with this url, there is only text and information from "person.html" template(meaning of "person.first_name"). Information from "base.html" and css styles don't used.
You forgot double quotes:
<link type="text/css" rel="stylesheet" href={% static 'resume/stylesheet.css'%}/>
should be:
<link type="text/css" rel="stylesheet" href="{% static 'resume/stylesheet.css'%}"/>
Edit
here as well:
<div id=header>
should be:
<div id="header">