When I am trying to extend the header and footer of base.html to index.html and about.html, I am unable to load CSS and javascript files.
Here is my code.
I have Included django.contrib.staticfiles in INSTALLED_APPS. Also, I have defined STATIC_URL
setting.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'gadget/static')
]
I am trying to extend the header and footer to index.html and about.html
base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Muli:300,400,500,600,700,800,900&display=swap" rel="stylesheet">
<!-- Css Styles-->
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css'%}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/font-awesome.min.css'%}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/themify-icons.css'%}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/elegant-icons.css'%}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/owl.carousel.min.css'%}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/nice-select.css'%}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/jquery-ui.min.css'%}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/slicknav.min.css'%}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css'%}" />
<title>e-Gadget</title>
</head>
<body>
<!-- Header Section Begin -->
<header class="header-section">
<div class="container">
<div class="inner-header">
<div class="row">
<div class="col-lg-2 col-md-2">
<div class="logo">
<a href="./index.html">
<img src="img/logo.png" alt="">
</a>
</div>
</div>
<div class="col-lg-7 col-md-7">
<div class="advanced-search">
<button type="button" class="category-btn">All Categories</button>
<div class="input-group">
<input type="text" placeholder="Search here">
<button type="button"><i class="ti-search"></i></button>
</div>
</div>
</div>
<!--
<div class="col-lg-3 text-right col-md-3">
<ul class="nav-right">
<li class="cart-icon">
<a href="#">
<i class="icon_bag_alt"></i>
<span>3</span>
</a>
<div class="cart-hover">
<div class="select-items">
<table>
</table>
</div>
<div class="select-button">
VIEW CARD
CHECK OUT
</div>
</div>
</li>
</ul>
</div>
-->
</div>
</div>
</div>
<div class="nav-item">
<div class="container">
<nav class="nav-menu mobile-menu">
<ul>
<li class="active">Home</li>
<li>Shop</li>
<li>Contact</li>
<li>Login</li>
<li>Register</li>
</ul>
</nav>
<div id="mobile-menu-wrap"></div>
</div>
</div>
</header>
{% block content %} {% endblock %}
<!-- Footer Section Begin -->
<footer class="footer-section">
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="footer-left">
<div class="footer-logo">
<img src="img/footer-logo.png" alt="">
</div>
<ul>
<li>Address: 44600 Kathmandu, Nepal</li>
<li>Phone: +977 9876543210</li>
<li>Email: electronicgadget#gmail.com</li>
</ul>
<div class="footer-social">
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-pinterest"></i>
</div>
</div>
</div>
<div class="col-lg-2 offset-lg-1">
<div class="footer-widget">
<h5>Information</h5>
<ul>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<div class="copyright-reserved">
<div class="container">
<div class="row">
<div class="col-lg-12">
</div>
</div>
</div>
</div>
</footer>
<script src="{% static 'js/jquery-3.3.1.min.js'%}"></script>
<script src="{% static 'js/bootstrap.min.js'%}"></script>
<script src="{% static 'js/jquery-ui.min.js'%}"></script>
<script src="{% static 'js/jquery.countdown.min.js'%}"></script>
<script src="{% static 'js/jquery.nice-select.min.js'%}"></script>
<script src="{% static 'js/jquery.zoom.min.js'%}"></script>
<script src="{% static 'js/jquery.dd.min.js'%}"></script>
<script src="{% static 'js/jquery.slicknav.js'%}"></script>
<script src="{% static 'js/owl.carousel.min.js'%}"></script>
<script src="{% static 'js/main.js'%}"></script>
<script src="{% static 'js/imagesloaded.pkgd.min.js'%}"></script>
</body>
</html>
index.html
{% extends 'base.html' %}
{% block content %}
<h1> hello</h1>
{% endblock %}
Here is my project hierarchy
You've specified that your static files are under your apps directory in your settings.py file.
Make sure you have stored your static files in your app folder.
You will have a hierarchy like this:
-Project root folder
-App folder
-static (keep your static files in here)
-Project folder
- __init__.py
- decorators.py
- settings.py
- urls.py
- wsgi.py
I would remove staticfiles_dirs or comment out to test.
Related
The following is my code, when I tried it I get an error:
'accounts/register' could not be found
index.html:
{% load static %}
{% static "images" as baseUrl %}
<!doctype html>
<!-- Website Template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mustache Enthusiast</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/mobile.css' %}" media="screen and (max-width : 568px)">
<script type="text/javascript" src="{% static 'js/mobile.js' %}"></script>
</head>
<body>
<div id="header">
<a href="{% static 'index.html' %}" class="logo">
<img src="{% static 'images/logo.jpg' %}" alt="">
</a>
<ul id="navigation">
<li class="selected">
home
</li>
<li>
about
</li>
<li>
register
</li>
<li>
contact
</li>
</ul>
</div>
<div id="body">
<div id="featured">
<img src="{% static 'images/the-beacon.jpg' %}" alt="">
<div>
<h2>the beacon to all mankind</h2>
<span>Our website templates are created with</span>
<span>inspiration, checked for quality and originality</span>
<span>and meticulously sliced and coded.</span>
read more
</div>
</div>
<ul>
{% for cate in categos %}
<li>
<a href="{% static 'gallery.html' %}">
<img src="{{cate.img.url}}" alt="" style="width:240px;height:200px;">
<span>{{cate.name}}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
</body>
</html>
register.html :
{% load static%}
<!doctype html>
<!-- Website Template by freewebsitetemplates.com -->
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mustache Enthusiast</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/mobile.css' %}" media="screen and (max-width : 568px)">
<script type="text/javascript" src="{% static 'js/mobile.js' %}"></script>
</head>
<body>
<div id="header">
<a href="{% static 'index.html' %}" class="logo">
<img src="{% static 'images/logo.jpg' %}" alt="">
</a>
<ul id="navigation">
<li class="selected">
home
</li>
<li>
about
</li>
<li>
contact
</li>
</ul>
</div>
<div id="body">
<div id="featured">
<img src="{% static 'images/the-beacon.jpg' %}" alt="">
<div>
<h2>Registration</h2>
<form action="register" method="POST">
{% csrf_token %}
<input type="text" name="first_name" placeholder="First name"><br>
<input type="text" name="last_name" placeholder="Last name"><br>
<input type="text" name="username" placeholder="Username"><br>
<input type="email" name="email" placeholder="email"><br>
<input type="password" name="password1" placeholder="Password"><br>
<input type="password" name="password2" placeholder="Confirm password"><br>
<input type="submit">
</form>
read more
</div>
</div>
</div>
</body>
</html>
views.py in accounts app:
from django.shortcuts import render
# Create your views here.
def register(request):
return render(request,'register.html',)
urls.py in accounts app :
from django.urls import path
from . import views
urlpatterns = [
path('register', views.register, name='register')
]
models.py in propython :
from django.db import models
# Create your models here.
class categories(models.Model):
name = models.CharField(max_length=100)
img = models.ImageField(upload_to='pics')
views.py in propython
from django.shortcuts import render
from .models import categories
# Create your views here.
def index(request):
categos = categories.objects.all()
return render(request,'index.html', {'categos': categos})
But I change chrome browser URL http://127.0.0.1:8000/static/accounts/register to
http://127.0.0.1:8000/accounts/register then my code run without any problem.
I'm guessing that the error is in your register.html, where you are initializing your form:
<form action="register" method="POST">
the action attribute accepts a url not a string, change it to this:
<form action="{% url 'register' %}" method="POST">
or add a slash before register:
<form action="/register" method="POST">
Of course there is no path http://127.0.0.1:8000/static/accounts/register.
so when you change http://127.0.0.1:8000/static/accounts/register to http://127.0.0.1:8000/accounts/register, it should work properly. that's obvious. unless the path in your urls.py project be static/accounts/.
The way you generate URLs in the template seems off.
The static tag is used to include static assets (images, CSS, JavaScript) in your code:
{% static "some_app/some_file.css" %}
The url tag is used to generate an URL, basing on your Django application URL configuration:
{% url "app_prefix:name" %}
I was making a site with Django in which I was applying CSS properties to an extended template file. The CSS file is imported in parent template and is used in child template. But it isn't showing any changes in child template. Here's my code:
.c1 a:hover {
background-color: #1D1C1C;
color: white;
}
.theta {
position: relative;
left: 100px;
}
{% load static %}
<!DOCTYPE html>
<!-- Parent File -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Site</title>
<link href="{% static 'css/bootstrap-4.4.1.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/style.css' %}" rel="stylesheet" type="text/css">
<!-- <link href="../static/css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css"> -->
<!-- <link href="../static/css/style.css" rel="stylesheet" type="text/css"> -->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="{% url 'home' %}">Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-white" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">A</a>
<div class="dropdown-menu c1" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">a</a>
<a class="dropdown-item" href="#">b</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">B</a>
</li>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
<script src="{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap-4.4.1.js' %}"></script>
<!-- <script src="../static/js/jquery-3.4.1.min.js"></script>
<script src="../static/js/popper.min.js"></script>
<script src="../static/js/bootstrap-4.4.1.js"></script>
-->
</body>
</html>
<!-- Child File -->
{% extends "index.html" %}
{% block content %}
<br>
<div class="theta">
{% for i in theta %}
{{ i }}
<br>
{% endfor %}
</div>
<br>
{% endblock %}
Is there any additional loc required to show those changes in child template?
use this for clear collect static files:
python manage.py collectstatic --no-input --clear
I have a file that extends my base HTML file and this file contains a form. I want to create a margin for the form and also change the color of the submit button and form text box to match the theme of my website. How do I go about doing this in my CSS file? As of now, the margin does not seem to be working and I am also not sure how I would change the color as I mentioned earlier.
search.html file
{% extends 'base.html' %}
{%load static%}
<link rel="stylesheet" type= "text/css" href="{% static 'css/form.css' %}" >
<body>
{% block content %}
<container >
<center>
<form action="/searchoutput/" method="post">
{% csrf_token %}
Input Text:
<input type="text" name="param" required> <br><br>
{{data_external}}<br><br>
{{data}}
<br><br>
<input type="submit" value="Check for Service">
</form>
</container>
</center>
{% endblock %}
</body>
form.css file
form {
margin-top: 200px;
}
base.html
{%load static%}
<!DOCTYPE html>
<html>
<head>
<title>TweetyBird</title>
<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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type= "text/css" href="{% static 'css/main.css' %}" >
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/">TweetyBird</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/search">Search by Tweet <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Twitter Bot</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">To be added</a>
</li>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
</body>
</html>
main.css
body
{
background-color: lightblue;
}
Add a block tag in your base.html ({%block staticfiles%}) just below your head tag.
Now in search.html add your css inside the staticfiles block.
Since you have extended base.html only the block content of search.html would be replaced with the content inside base.html's block
Since your link tag is outside the block hence that css would not even be picked up.
Also its better to use the body tag in base.html instead of search.html
I need your little help. I have set up everything according to the course that I am following but I am not getting images shown as in the course.
Here is the issue: I have fetched some images from database and I want to show them using lightbox. I did everything right but images are not showing.
My views.py
from django.shortcuts import render, get_object_or_404
from django.core.paginator import Paginator
from .models import Listing
def listing(request, listings_id):
listing = get_object_or_404(Listing, pk=listings_id)
context = {
'listing': listing
}
return render(request, 'listings/listing.html', context)
My listing.html
{% extends 'base.html' %}
{% load humanize %}
{% block content %}
<!-- Listing -->
<section id="listing" class="py-4">
<div class="container">
Back To Listings
<div class="row">
<div class="col-md-9">
<!-- Home Main Image -->
<img src="{{ listing.photo_main.url }}" alt="" class="img-main img-fluid mb-3">
<!-- Thumbnails -->
<div class="row mb-5 thumbs">
<div class="col-md-2">
<a href="{{ listing.photo_1.url }}" data-lightbox="home-images">
<img src="{{ listing.photo_1.url }}" alt="" class="img-fluid">
</a>
</div>
<div class="col-md-2">
<a href="{{ listing.photo_2.url }}" data-lightbox="home-images">
<img src="{{ listing.photo_2.url }}" alt="" class="img-fluid">
</a>
</div>
<div class="col-md-2">
<a href="{{ listing.photo_3.url }}" data-lightbox="home-images">
<img src="{{ listing.photo_3.url }}" alt="" class="img-fluid">
</a>
</div>
<div class="col-md-2">
<a href="{{ listing.photo_4.url }}" data-lightbox="home-images">
<img src="{{ listing.photo_4.url }}" alt="" class="img-fluid">
</a>
</div>
<div class="col-md-2">
<a href="{{ listing.photo_5.url }}" data-lightbox="home-images">
<img src="{{ listing.photo_5.url }}" alt="" class="img-fluid">
</a>
</div>
<div class="col-md-2">
<a href="{{ listing.photo_6.url }}" data-lightbox="home-images">
<img src="{{ listing.photo_6.url }}" alt="" class="img-fluid">
</a>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
Here is my base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Font Awesome -->
<link rel="stylesheet" href="{% static 'css/all.css' %}">
<!-- Bootstrap -->
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<!-- Custom -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<!-- Lightbox -->
<!-- Please NOTE that I have added the light box correctly from static -->
<link rel="stylesheet" href="{% static 'css/lightbox.min.css' %}">
<title>BT Real Estate</title>
</head>
<body>
<!-- Top Bar -->
{% include 'partials/_topbar.html' %}
<!-- Nav Bar -->
{% include 'partials/_navbar.html' %}
{% block content %}
{% endblock %}
<!-- Footer -->
{% include 'partials/_footer.html' %}
<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
<!-- Please NOTE that I have added the light box correctly from static -->
<script src="{% static 'js/lightbox.min.js' %}"></script>
</body>
</html>
Here is my static directory path:
myproject
>myproject
>static
>admin
>css
>lightbox.min.css
>img
>js
>lightbox.min.js
>myapp
>manage.py
Your help is much appreciated. Thank you!
In your Root urls, try to add the static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
For example:
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
1st of all inspect your code and see, if any error happend..?
or
check to your django project, are you added .!
static/img/lightbox
>close.png
>loading.gif
>next.png
>pre.png
unless img file lightbox face error.
I have the following Django settings:
views.py
from .forms import Method1Form
def method1_input(request):
if request.method == 'POST':
method1_form = Method1Form(request.POST, request.FILES)
# Handle file upload
if method1_form.is_valid():
q = method1_form.save()
q.save()
# This is where we run code
# with the given parameters
# Do something q.run_code1()
# This will show the method1_result to be executed.
return HttpResponseRedirect(reverse('method1-result', kwargs={'id': q.id }))
else:
method1_form = Method1Form()
return render(request, 'my_app/method1.html', {'m1_form':method1_form})
urls.py
from django.conf.urls import include, url
from myapp import views
urlpatterns = [url(r'^method1/input$', views.method1_input, name='method1-input')]
Now the current template my_app/method1.html looks like this. Note that it contain navigation bar.
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="{% static "images/favicon.png" %}"/>
<link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}"/>
<script src="{% static "vendors/jquery-2.1.4.min.js" %}"></script>
<script src="{% static "vendors/bootstrap.min.js" %}"></script>
<script src="{% static "vendors/bootstrap.file-input.js" %}"></script>
<link rel="stylesheet" href="{% static "css/style.css" %}"/>
<meta charset="utf-8">
<title>Cool title</title>
</head>
<body>
<!--- BEGINNING OF NAVBAR -->
<nav class="navbar navbar-inverse" style="border-radius:0px;">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand active" href="{% url 'index' %}">ICEPOP</a>
</div>
<div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Help</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-cutlery"></span> API</li>
</ul>
</div>
</div>
</nav>
<!--- END OF NAVBAR -->
<h1> Content specific to METHOD1 </h1>
</body>
</html>
What I want to do is to separate the file into a base.html template which contain only the navbar and method1_only.html. So at the end of the day method1_only.html file will contain only the inherit from base.html and the text specific to it. What's the scheme to do such wrapping in Django?
Well, django advises to use base.html file to contain no only navbar but hold all common staff for all pages: block, navbar, footer, side panel is available on the site. So I think you should do it next way:
base.html
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="{% static "images/favicon.png" %}"/>
<link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}"/>
<script src="{% static "vendors/jquery-2.1.4.min.js" %}"></script>
<script src="{% static "vendors/bootstrap.min.js" %}"></script>
<script src="{% static "vendors/bootstrap.file-input.js" %}"></script>
<link rel="stylesheet" href="{% static "css/style.css" %}"/>
<meta charset="utf-8">
<title>Cool title</title>
</head>
<body>
<!--- BEGINNING OF NAVBAR -->
<nav class="navbar navbar-inverse" style="border-radius:0px;">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand active" href="{% url 'index' %}">ICEPOP</a>
</div>
<div>
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Help</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-cutlery"></span> API</li>
</ul>
</div>
</div>
</nav>
<!--- END OF NAVBAR -->
<h1>{% block method_content %}{% endblock method_content %}</h1>
</body>
</html>
And in your method1_only.html you will extend base.html and put your method content in method_content block like this
{% extends "base.html" %}
{% block method_content %}Here goes your method content{% endblock method_content %}
Hope this will help.