I'm trying to load block for CSS in Django. However for some reason it doesn't work.
my template :
{% extends 'main/base.html' %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'main/style.css' %}">
{% endblock %}
{% block title %}Some Title{% endblock %}
{% block content %}
Some Content
{% endblock %}
And below is the upper part of base.html file
{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- This line below is the base styling, whereas the css file I'm trying to load is a specific styling for a specific page. -->
<link rel="stylesheet" href="{% static 'base.css' %}">
{% block css %}
{% endblock %}
<title>{% block title %}{% endblock %}</title>
</head>
I have the right css file at the right directory, but it is not reflected at all.
I don't see what I've done wrong. I would very much appreciate your help. :)
Related
I have a working Django app that has started giving me a template block error on my Windows 11 development PC:
Invalid block tag on line 17: 'endblock', expected 'endblock' or 'endblock stylesheets'. Did you forget to register or load this tag?
I looked at this stackoverflow article:
Invalid block tag : 'endblock'. Did you forget to register or load this tag?, but I don't have the typo that that article discusses. It is in a base.html template:
<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{% static 'assets/img/orange-img.png' %}" type="image/x-icon">
<title>
Clever - {% block title %}{% endblock %}
</title>
<!-- Specific Page CSS goes HERE -->
<link rel="stylesheet" href="{% static 'assets/css/blue_theme.css' %}">
{% block stylesheets %}
{% endblock stylesheets %}
</head>
<body class="hold-transition {% block body_class %}{% endblock body_class %}; w3-theme-l4">
{% block content %}{% endblock content %}
<div style="text-align: center">
{% include 'includes/footer.html' %}
</div>
<!-- Specific Page JS goes HERE -->
{% block javascripts %}
{% endblock javascripts %}
{% include 'session_security/all.html' %}
</body>
</html>
The error gets generated on line 17: {% endblock stylesheets %}. I have tried putting the block and endblock on the same line, it gives me that same error with the different line number. I don't have a space between the curly braces and the percentage signs. I am running this with python 3.11.1 and Django 3.2.16 on my Windows PC. I tried it with python 3.7.3 with the same results. I have the app running on a Ubuntu instance with python 3.10.6 and Django 3.2.16, and it works. For what it's worth, I use PyCharm on my Windows PC.
Any suggestions?
Thanks--
Al
In the immortal words of Gilda Radner--"never mind". I had a typo in another template that was causing the error in this template... The lesson learned is don't use vim when you're so tired that you don't notice you're in insert mode when you do a ':w'...
--Al
I seem to be getting the error mentioned in the title:
"NoReverseMatch at /accounts/create/
'shop' is not a registered namespace"
This is my base.html file which is saying is the route of the error:
Error during template rendering
In template C:\Users\conor\djangoprojects\sem4proh01march\phoneshop\templates\base.html, error at line 24
'shop' is not a registered namespace
base.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
<meta name="description" content="{% block metadescription %}{% endblock %}">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div class="container">
{% include 'header.html' %}
{% include 'navbar.html' %}
{% block content %}
{% endblock %}
{% include 'footer.html' %}
</div>
...
</body>
</html>
Any help would be greatly appreciated. Thanks in advance.
Try with adding something like this in your global urls.py:
urlpatterns = [
...
...
path("shop/", include("your_app_name.shop.urls", namespace="shop")),
...
]
I am trying to make a base.html template and inserting a css file in the header. in the page it includes all the styling by it does not do any styling when the link the other page is pressed.
I have two files extending base.html one color_choose.html the other statistics.html which have the exact same lines for linking files. color_choose.html works and it is the first page that opens when navigated and the other is statistics.html
here is the base.html:
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>ColorStore</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
{% block styles %} {%endblock%}
</head>
<body>
<div id="ColorFavor">
<div style="float: right;">
<h2 id="title" class="page-name">Color Picker</h2>
</div>
</div>
{% block navigation %}
{% endblock %}
{% block display %}
{% endblock %}
{% block modal %}
{% endblock %}
{% block scripts %}
{% endblock %}
</body>
</html>
here is the urls.py in the app file:
from django.urls import path
from . import views
urlpatterns = [
path('', views.ColorPageView.as_view(), name='color'),
path('statistics/',views.StatsPageView.as_view(), name='statistics'),
this is the file css is applied and is also the same text in the other file:
{% extends 'base.html' %}
{% block styles %}
<link rel="stylesheet" href="static/styles/main.css" type="text/css">
{% endblock %}
And this is the part in the settings.py:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
If I am missing anything I will edit this post as soon as possible, just leave a comment for it.
You are missing a slash '/' before 'static/...'
<link rel="stylesheet" href="/static/styles/main.css" type="text/css">
Your template should have {% load static %} and you should refer to the stylesheet either as /static/styles/main.css or (preferably) you should use the macro "{% static styles/main.css %}"
See the django doc here.
Probably a super easy thing to tackle but I have a template for a web page and that template has some common CSS that is linked at the surface.
<html>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}">
....
*navbar code in body
{%block content%}{%endblock%}
</html>
for any extending html pages they will have this layout plus some other personalized css. How can I add more custom CSS from a static folder without overriding the current CSS?
{% extends "template.html" %}
{% load static %}
?Insert custom css for the specific page?
{% block content %}
*CONTENT*
{%blockend%}
Use template blocks (https://docs.djangoproject.com/en/1.7/topics/templates/).
Base template (template.html):
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}">
{% block extra_css %}{% endblock %}
</head>
...
Child template:
{% extends "template.html" %}
{% load static %}
{% block extra_css %}
<!-- Specific template css here -->
<link rel="stylesheet" type="text/css" href="{% static 'css/another.css' %}">
{% endblock %}
I had stuck in static files.
When I tried to {% load staticfiles %} in my main template (e.x. {% static "main.js" %}), it works great in main.html template.
But when I tried to extend main.html template by detail.html template, and put there another static file (e.x. {% staticfiles 'fancybox.js' %}), it displays only
<script type="text/javascript" src="static/main.js"></script>
instead
<script type="text/javascript" src="static/main.js"></script>
<script type="text/javascript" src="static/fancybox.js"></script>
in my detail.html.
main.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %}</title>
{% load staticfiles %}
<script type="text/javascript" src="{% static 'main.js' %}"></script>
</head>
<body>
{% block content %}
<!-- SOME CONTENT -->
{% endblock %}
</body>
</html>
detail.html:
{% extends 'layout/main.html' %}
{% load staticfiles %}
<script type="text/javascript" src="{% static 'fancybox.js' %}"></script>
{% block title %}
<!-- SOME CONTENT -->
{% endblock %}
Can somebody help me with solution?
Thanks mates.
When you extend a template you need to make sure all of the code in the child template is inside a block. So for your main template typically you do something like:
main.html
{% load staticfiles %} <!-- This should go at the top for readability -->
<!-- Load any site wide JS here -->
<script type="text/javascript" src="{% static 'main.js' %}"></script>
{% block js %}<!-- Put JS in here for extended templates -->{% endblock %}
detail.html
{% extends 'layout/main.html' %}
{% load staticfiles %}
{% block js %}
<script type="text/javascript" src="{% static 'fancybox.js' %}"></script>
{% endblock %}
{% block title %}
<!-- SOME CONTENT -->
{% endblock %}
{% extends 'layout/main.html' %}
{% block title %}
{% load staticfiles %}
<script type="text/javascript" src="{% static 'fancybox.js' %}"></script>
<!-- SOME CONTENT -->
{% endblock %}
use this code in details.html.You have to put {% block body%}
at the top just after the extend or include statement