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="{%
Related
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
How To use the audio file of the local system to play in django?
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link href="{% static 'css/result_style.css' %}" type="text/css"
rel="stylesheet"/>
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="container" align="center"><br><br><br>
{% load custom_filters %}
<h2>{{summary}}</h2>
<br>
This part is working fine while playing this part in simple html code
<p>Click on the audio To Listen Your Summary</p>
<audio controls>
<source src="D:\textanalysis\audio_file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div>
</body>
</html>
I'm trying to implement my 404.html page into my django project, and coming across this error. Everything else is complete in my project, so I'm eager to get this last piece done! any help is greatly appreciated. included the 404.html and head_css.html file. please let me know if you need to see anything else.
Can anyone help with this?
My 404.html code:
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="404 Page not found">
<meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport">
<title>Codes For Anyone</title>
<link rel="shortcut icon" type="image/x-icon" href="{% static 'themes/images/favicon.ico' %}">
<!-- Google icon -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
{% include 'landing/head_css.html' %}
</head>
<body class="body-custom body-404page">
<div class="errorpage">
<div class="wrapper">
<div class="container">
<div class="content-primary">
<h1 class="title">Page Not Found</h1>
<p class="description">The page you are looking for was moved, removed, <br>
renamed or might never existed.</p>
<div class="section-footer">
Back To Homepage
Report Error
</div>
</div><!-- content-primary -->
</div><!-- container -->
</div>
</div>
<!-- chitika ad code -->
<div class=" container-fluid full-width-container contact">
<script type="text/javascript">
( function() {
if (window.CHITIKA === undefined) { window.CHITIKA = { 'units' : [] }; };
var unit = {"calltype":"async[2]","publisher":"andrewdiemer","width":550,"height":250,"sid":"Chitika Default"};
var placement_id = window.CHITIKA.units.length;
window.CHITIKA.units.push(unit);
document.write('<div id="chitikaAdBlock-' + placement_id + '"></div>');
}());
</script>
<script type="text/javascript" src="//cdn.chitika.net/getads.js" async></script>
</div>
<!-- end ad code -->
</div>
<!-- Scripts Starts -->
{% include 'landing/javascript.html' %}
<script>
$(document).ready(function() {
var sPath=window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
$(".pmd-sidebar-nav").each(function(){
$(this).find("a[href='"+sPage+"']").parents(".dropdown").addClass("open");
$(this).find("a[href='"+sPage+"']").parents(".dropdown").find('.dropdown-menu').css("display", "block");
$(this).find("a[href='"+sPage+"']").parents(".dropdown").find('a.dropdown-toggle').addClass("active");
$(this).find("a[href='"+sPage+"']").addClass("active");
});
});
</script>
<!-- Scripts Ends -->
</body>
</html>
head_css.html:
{% load staticfiles %}
<!-- Bootstrap css -->
<link rel="stylesheet" type="text/css" href="{% static 'assets/css/bootstrap.min.css' %}">
<!-- Propeller css -->
<!-- build:[href] assets/css/ -->
<link rel="stylesheet" type="text/css" href="{% static 'assets/css/propeller.min.css' %}">
<!-- /build -->
<!-- Propeller date time picker css-->
<link rel="stylesheet" type="text/css" href="{% static 'components/datetimepicker/css/bootstrap-datetimepicker.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'components/datetimepicker/css/pmd-datetimepicker.css' %}" />
<!-- Propeller theme css-->
<link rel="stylesheet" type="text/css" href="{% static 'themes/css/propeller-theme.css' %}" />
<!-- Propeller admin theme css-->
<link rel="stylesheet" type="text/css" href="{% static 'themes/css/propeller-admin.css' %}">
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.
I am working with a django template. the head of the template is:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Landing Page - Start Bootstrap Theme</title>
<!-- Bootstrap Core CSS -->
{% load staticfiles %}
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{% static "css/landing-page.css" %}" rel="stylesheet">
<!-- Custom Fonts -->
<link href="{% static "font-awesome-4.2.0/css/font-awesome.min.css" %}" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
My view contains:
def index(request):
t = loader.get_template('app1/index.html')
c = RequestContext(request, {})
return HttpResponse(t.render(c),content_type="application/xhtml+xml")
How can I fix the error in the screenshot?
This is not a valid XML tag:
<link href="{% static "css/landing-page.css" %}" rel="stylesheet">
Instead, it should be:
<link href="{% static "css/landing-page.css" %}" rel="stylesheet" />
This is because, according to XML specs, any tag has to be either closed with its pair or self-closed by including slash (/) at the and of opening tag.
Most browsers understand this, but, speaking strictly, this is incorrect.
Also, if you have any <hr>, <br> or similar single tags, you'll have to fix them all as well, i.e. <hr />, <br />
See this list: http://xahlee.info/js/html5_non-closing_tag.html.