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.
Related
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. :)
*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 %}.
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.
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