I have basic template "header.html", I am trying to extend it to get some new data using extend tag of django.
header.html
<!DOCTYPE html>
{% load staticfiles %}
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'font-awesome.min.css.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap.min.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'jquery-ui.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/buttons.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'css/jquery.switchButton.css' %}"/>
<script src="{% static 'jquery-1.11.3.min.js' %}"></script>
<script src="{% static 'jquery-ui.js.js' %}"></script>
<script src="{% static 'jquery.dataTables.min.js' %}"></script>
<script src="{% static 'dataTables.bootstrap.min.js' %}"></script>
<script src="{% static 'common.js' %}"></script>
<html lang="en">
<head>
<div id="header">
<div id='topMenuDiv'>
<a href='/search' class='fa '>BROWSE MOVIES</a>
</div>
</div>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
and I have home.html
{% extends "header.html" %}
{% block content %}
<script src="{% static 'index.js' %}"></script>
{% endblock %}
Now, this would work if I include {% load staticfiles %} in home.html, while gives an error - Invalid block tag: 'static' without it.
What I want to know is there a way to include static file "index.js" without using {% load staticfiles %} as this would load static files again.
{% load staticfiles %} is only loading the code for template tag library staticfiles. It's not loading all static files into the django template. The template tag static is part of the staticfiles template tag library, so django template needs to know where is the code for static coming from.
You could call load on any template tag, even your custom ones. It's like the pseudo code from staticfiles import static in python.
Please look at django doc for details.
Related
Html File
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}"/>
</head>
<body>
<h1>This is from index.html</h1>
{{help_me}}
<img src="{% static "images/DjangoGuitar.jpg" %}" alt="sorry text not loaded">
</body>
</html>
CSS file
h1{
color: red;
}
Output:
This is from index.html
Welcome to the page sorry text not loaded
Have you tried enclosing the css/style.css part in single quotes to see if it works? Like so <link href="{% static 'css/style.css' %}" rel="stylesheet">.
The double quotes at "css/style mean you have closed the first one beginning at href="{%
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 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 %}
this is the head of of my base.html:
{% load staticfiles %}
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- the CSS for Foundation - Base of client side -->
<link rel="stylesheet" href="{% static 'css/foundation.css' %}" />
<!-- the CSS for Smooth Div Scroll -->
<link rel="Stylesheet" type="text/cs' %}" href="{% static 'top_scroll/css/smoothDivScroll.css' %}" />
<!-- the CSS for Custom -->
<link rel="stylesheet" href="{% static 'css/custom.css' %} />
<script src="{% static 'js/vendor/modernizr.js' %}"></script>
</head>`
This part is the body, the statics files up above are loading correctly, I have some images in the body that I also want to load, they are located in the same folder but I have written the code in another file and used {% include "images.html" %} to add them to base.
ex.
<img src="{% static 'top_scroll/images/demo/field.jpg' %}" alt="Demo image" id="field" />
<img src="{% static 'top_scroll/images/demo/gnome.jpg' %}" alt="Demo image" id="gnome" />
<img src="{% static 'top_scroll/images/demo/pencils.jpg' %}" alt="Demo image" id="pencils" />
<img src="{% static 'top_scroll/images/demo/golf.jpg' %}" alt="Demo image" id="golf" />
Above is pretty much all of the code that is on the image html file, anyone know why I keep getting the Invalid block tag: 'static' error? The top of my base.html has the {% load staticfiles %} so does django require it on every file that has the static function, even if it is called as a text inclusion?
Yes, you should {% load staticfiles %} in every template which uses the {% static %} tag.
Excerpt from the documentation for the {% include %} tag:
The include tag should be considered as an implementation of “render this subtemplate and include the HTML”, not as “parse this subtemplate and include its contents as if it were part of the parent”. This means that there is no shared state between included templates – each include is a completely independent rendering process.