Okay, so I have this first HTML file (header.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>M4A</title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'css/header.css' %}" />
<link rel="icon" href="../../static/image/logo.png">
</head>
<body class="body" style="background-color:#f9f9f9">
{% block content %}
<ul>
<li><img src="../../static/image/logoRect.png" width="25"> </li>
<li>Movies</li>
<li><a class="left" href="">Search</a></li>
<li><a class="left" href="/profile/">Profile</a></li>
<li><a class="left" href="#about">Explore</a></li>
</ul>
{% endblock %}
</body>
</html>
And then I have this other one (home.html):
{% extends "START/header.html" %}
{% block content %}
<p> TEST</p> <!-- for example -->
{% endblock %}
but when running the second one it doesn't extend really, it looks like its replacing the content of the other HTML file's body. the background color is still the one in my css file though so I'm sure it's reading it. What am I missing?
You are replacing the body when you use the same block tag in your home.html that in your header.html
{% block content %}
You should use a different name if you dont want to replace it.
In addition you can use:
{{ block.super() }}
If you want to extend the block content data, notice it's a different issue from extending a template.
It is not clear to me what you are expecting.
The Jinja documentation about templates is pretty clear about what a block does:
All the block tag does is tell the template engine that a child template may override those placeholders in the template.
In your example, the base template (header.html) has a default value for the content block, which is everything inside that block. By setting a value in home.html, you are overriding that default value with another block.
If you want to add content below your navigation menu, simply rework your template to the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>M4A</title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'css/header.css' %}" />
<link rel="icon" href="../../static/image/logo.png">
</head>
<body class="body" style="background-color:#f9f9f9">
<ul>
<li><img src="../../static/image/logoRect.png" width="25"> </li>
<li>Movies</li>
<li><a class="left" href="">Search</a></li>
<li><a class="left" href="/profile/">Profile</a></li>
<li><a class="left" href="#about">Explore</a></li>
</ul>
{% block content %}<p>This will appear if you don't set a block in the inheriting template.</p>{% endblock %}
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>M4A</title>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'css/header.css' %}" />
<link rel="icon" href="../../static/image/logo.png">
</head>
{% block content %}
<body class="body" style="background-color:#f9f9f9">
<ul>
<li><img src="../../static/image/logoRect.png" width="25"> </li>
<li>Movies</li>
<li><a class="left" href="">Search</a></li>
<li><a class="left" href="/profile/">Profile</a></li>
<li><a class="left" href="#about">Explore</a></li>
</ul>
</body>
{% endblock %}
</html>
make body inside in block and change body backgound
{% extends "START/header.html" %}
{% block content %}
<body class="body" style="background-color:#f23d49">
<p> TEST</p> <!-- for example -->
</body>
{% endblock %}
Related
Here is my HTML file:
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<!-- Link to Bookstrap and stylesheet -->
<link rel='stylesheet' href="{% static 'css/bootstrap.min.css' %}">
<link rel='stylesheet' href="{% static 'css/style.css' %}">
<script src="{% static 'js/bootstrap.min.js' %'}"></script>
</head>
<body class="bg-blue">
<div class="container">
<div class ="row">
<div class ="col-lg-4 col-lg-offset-4">
<br/>
<br/>
<br/>
<div class="panel panel-body">
<div class="panel-body">
<h3 class="text-center text-uppercase"><b> {% block heading %}{% endblock %}</b></h3>
<br/>
{% block content %}{% endblock %}
</div>
</div>
</div>
</body>
</html>
I want to use the "bg-blue" class defined in my style.css.
.bg-blue{
background-color: #3F3F63;
}
However it doesn't work. My boostrap and style.css are in the same folder. The Bootstrap loads, for example my text in centered and uppercase and the font is different.
I've also tried putting the class directly in the html file, and that works, but I want to be able to use style.css.
Edit: it works in Firefox but not Chrome, so it's not the code, any explain to this?
that is because you forgot to clear cache in chrome.press control + F5 to clear cache and load again.
So I'm trying to develop an app in Django. At the moment I'm trying to do a simple search bar that when you type the title of a fil it show several data of that film. I have successfully developed the search bar and it works. The problem is that when doing the html template and extending it from base.html the data shown dissapears.
base.html
<!DOCTYPE html>
<html lang="es">
<head>
{% load staticfiles %}
<title>Peliculas</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?
family=Tangerine&v1" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?
family=Yanone+Kaffeesatz" />
<link rel="stylesheet" type="text/css" href="{% static 'myapp/style.css' %}"/>
</head>
<body>
<div id="content">
<div id="main">
<div id="header">
<div id="logo">
<h1>SERIAL KILLER</h1>
<div class="slogan">SLOGAN</div>
</div>
<div id="menubar">
<ul id="menu">
<!-- put class="current" in the li tag for the selected page - to highlight which page you're
on -->
{%block menu%}
{% endblock %}
</ul>
</div>
</div>
</div>
<div id="site_content">
{%block lado%}
{% endblock %}
<div id="content">
{% block contenido %}
{% endblock %}
</div>
</body>
</html>
the template where I show the data from the query: buscarResultados.html
{% extends "base.html" %}
{% load staticfiles %}
{% block titulo %} RESULTADOS {% endblock %}
{%block content %}
<ul>
{% for peli in object_list %}
<li>
{{peli.titulo}}, {{peli.descripcion}}
</li>
{% endfor %}
</ul>
{% endblock %}
my form in index.html
<div id="search">
<form action="{% url 'busqueda_resultados' %}" method= 'get'>
<input type="text" name="q" placeholder="Buscar...">
<input type="submit" value="Buscar">
</form>
</div>
my views.py
class BuscarPeliculas(ListView):
model = Pelicula
template_name = 'buscarResultados.html'
def get_queryset(self):
query = self.request.GET.get('q')
object_list = Pelicula.objects.filter(
Q(titulo__icontains=query) | Q(descripcion__icontains=query)
)
return object_list
my urls.py
path('busqueda/', views.BuscarPeliculas.as_view(), name='busqueda_resultados'),
what appears if I extend from base.html
What appears if I don't extend from base.html
as you can see, The data dissapears if I extend from base.html, I tried to do my question as complete as possible, help is much appreciated.
Its because you are addintg it to a block content, but the base.html expects block contenido
fix your block names
Need some help with django. Seems that somehow i can't change the css of my home page.
These are my static settings:
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
#'/var/www/static/',
]
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_cdn")
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "media_cdn")
In my index_home.html page i want to put a background image e.g. marea.jpg which is in static/img/marea.jpg.
<!--DOCTYPE html -->
<html>
<head>
{% load static %}
<title>Romanii din Italia</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="static/css/custom.css" />
<link href="{% static 'css/custom.css' %}" rel="stylesheet">
<link rel='stylesheet' href="/static/css/custom.css" />
</head>
<body>
<div class='container'>
<ol class='breadcrumb'>
<li><a href='{% url "posts:home" %}'>Acasa</a></li>
<li><a href='{% url "posts:list" %}'>Stiri</a></li>
{% if not request.user.is_authenticated %}
<li class='pull-right'><a href='{% url "register" %}'>Register</a></li>
<li class='pull-right'><a href='{% url "login" %}'>Login</a></li>
{% else %}
<li class='pull-right'><a href='{% url "logout" %}'>Logout</a></li>
{% endif %}
</ol>
</div>
<div class="container" >
<h2>Bine ati venit pe site-ul romanilor din Italia!</h2>
<div class="row" id="primapoza" style="background-image: url('/static/img/roma.jpg');background-repeat: no-repeat;background-size: cover;height: calc(100vh - 71px);">
<div class="col-xs-12 offset-xs-0 col-sm-4 offset-sm-4 section-title" >
<br><br>
<p id="banner-text"> Romani in Italia! </p>
<!-- <p id="banner-text" style="text-align: center;font-size:40px;!important;font-color:white;!important;margin-left: 100px;"> Romani in Italia! </p> -->
</div>
</div>
</div>
</body>
</html>
And this is my custom.css which doesn't change my css code. Can someone pls advise? Thank you in advance!
h1 {
color: #777777;
}
.wmd-panel{
margin-right: 0px !important;
margin-left: 0px !important;
}
.comment-reply{
display:none;
}
#banner-text{
font-color:white;!important;
font-size:40px;
}
I can customize the CSS only with inline code e.g <p id="banner-text" style="margin-left: 400;font-color: black;font-size:30">Romani in Italia!</p
Use {% load static %} and {% load staticfiles %} under head tag in html
Based on my understand of how {% load static %} is used and what the Django documentation is saying, I don't think you're using {% load static %} correctly. I've always used it right above whatever my static link were to be.
For example, in your html doc head, it should be
{% load static %}
<link rel='stylesheet' href='{% static "css/base.css" %}'>
Otherwise, I don't think your stylesheet is linked to your html doc. Try that and also correct that mistake anywhere else you may have it, and it should be working.
You can't have {% load static %} at the top of your file and expect it to apply for the whole page. It needs to be right above whatever your static file is, as many times as you use it.
I have a base.html file that have blovk content and extended by manage.html. and that manage.html has a block sub_manage which is extended by internet_market.html, so visually it looks like:
|- base.html (block content)
|--manage.html (extends base.html)
|---sub_manage.html (extends manage.html)
when I render_template mange.html everything works fine, but when I try to render_template sub_manage.html the css/javascript does not work. What can I do to overcome this issue?
here is my base.html
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
<script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
<style type="text/css">
</head>
<body>
<div id="left_sidebar">
<ul>
<li class="main"> + Главная</li>
<li class="main">Заказы</li>
<li class="main"> - Управление сайтом</li>
</ul>
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
here is my manage.html file:
{% extends "admin/base.html" %}
{% block content %}
<!-- Nav tabs -->
<div>
<ul class="nav nav-tabs" role="tablist">
<li class="dropdown active"></li>
</ul>
</div>
<!-- Tab panes -->
<div class="manage_menu_settings">
{% include 'admin/manage/site_figuraiton.html' %}
</div>
{% block sub_manage%}
{% endblock %}
{% endblock %}
and here is internet_market.html
{% extends "admin/manage.html" %}
{% block sub_manage %}
<div class="tab-content">
<div class="tab-pane {% if current == 'delivery_settings' %} active{% endif %}" id="delivery_settings">
Настройки доставки, корзины и оплаты
</div>
<div class="tab-pane {% if current == 'delivery_type' %} active{% endif %}" id="delivery_type">
Добавить способы доставки
</div>
{% endblock%}
Solved the issue.
the problem was that I links that I used for css and js file where relative links, thus when trying to render the 2 level extend it did not find css/js. so it was like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
<script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
<style type="text/css">
but then I changed these links to dynamic links with url_for and it worked like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="{{url_for("static", filename = "css/bootstrap.min.css")}}">
<script type="text/javascript" src="{{url_for("static", filename = "js/bootstrap.min.js")}}"></script>
<style type="text/css">
I couldn't get my image reflected using StaticFile process. Here are my global settings:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
('assets', 'C:/Users/dhopkins/PycharmProjects/django_test/static'),
My base.html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}My base template.{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="{% static "assets/css/default.css" %}">
</head>
<body>
<div id="page">
</div>
<div id="sidebar">
{% block sidebar %}
<ul>
<li>Articles</li>
<li>Admin</li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block content %}Content goes here!{% endblock %}
<img scr="{% static "images/python-logo.jpg" %}" width="200"/>
</div>
</body>
</html>
My image folder is located in C:\Users\dhopkins\PycharmProjects\django_test\static\images.
Please help.
Your problem lies in this line
<img scr="{% static "images/python-logo.jpg" %}" width="200"/>
it should be
<img src="{% static "images/python-logo.jpg" %}" width="200"/>
This is not a problem with your static files. You've simply misspelled the <img src> attribute :-)