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.
Related
I have a problem that I am reproducing with a simple example.
No matter what I do I do always have a page with my content inside a body (js, footer, etc) like the image attached.
Can anyone help me to figure this out? Thank you.
If I remove the body tag from base.html, django include a body tag itself that encapsulates the remaining content.
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
{% block content %}
{% endblock content %}
</body>
<footer>
<h3>This is the footer</h3>
</footer>
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'bootstrap-4.4.1/js/bootstrap.min.js' %}" ></script>
</html>
home.html:
{% extends 'base.html' %}
{% block content %}
<div>
<h1>This is the home body</h1>
</div>
{% endblock content %}
The render result:
This is not a django issue.
The html tag can only have a head and body tag inside it. Your footer and script should go inside the body.
Your web browser have detected that the structure of your document is not valid and have corrected it.
If you check the HTML source code of your page (instead of using the dev tools), you will see that the template is rendered as you write it.
So move all your page content in the body tag.
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
I am developing the website on python(Django). I am getting some difficulties to change the background color of the top menu on every page.
What I am doing is, I have an index.html page and templates which are aboutus, contactus and service. When I am on the home page then I am getting the gray background of the menu which is correct. Now I am on aboutus and I have to change the menu color from gray to black but I am getting the only gray.
So I want to know how do I change the class or override the CSS? Should I need to add the class to the body and then override the menu BG? How do I added the class to the body on each page dynamically?
index.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title%}Home{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'css/style.css'%}" type="text/css">
</head>
<body>
<div class="Wrpper">
<header class="bg_gray"><!--top menu code--></header>
{% block content %}
<!-- template code -->
{% endblock %}
<footer><!--footer code--></footer>
</div>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
style.css
.bg_gray{background-color: #ccc;}
.bg_black{background-color: #000;}
aboutus.html (All template are same)
{% extends 'demo1/index.html' %}
{% load static %}
<title>{% block title %}About us{% endblock %}</title>
{% block content %}
<!--some code here-->
{% endblock %}
you can override the header's class using javascript
first give your header an id :
then include the javascript file:
in app.js
$(document).ready(function() {
$('#top-header').removeClass('bg_gray');
$('#top-header').addClass('bg_blak');
});
<link rel="stylesheet" href="{% static 'js/app.js' %}">
<header class="bg_gray" id="top-header"><!--top menu code--></header>
Give important to bg_black class it will override the css of bg_gray class property...
like this,
.bg_black{
background-color: #000!important;
}
html:
<header class="bg_gray bg_black"><!--top menu code--></header>
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 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 :-)