main.html
with {% load static %} at top and {% static 'css/main.css' %} in link css href
{% load static %}
<!DOCTYPE html>
<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.0">
<title>CM1</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" type="test/css" href="{% static 'css/main.css' %}">
</head>
<body>
{% include "accounts/navbar.html" %}
{% block content %}
{% endblock content %}
<hr>
<h5>Our footer</h5>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
</html>
setting.py
import os
INSTALLED_APPS = [
...
'django.contrib.staticfiles', #<-- already have
...
]
STATIC_URL = 'static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static/"),
)
also STATICFILES_DIRS bracket should be () or []?
You did wrong in link tag.
change this:
<link rel="stylesheet" type="test/css" href="{% static 'css/main.css' %}"> #You did wrong in type. and according to your structure your css filename is index.css
To this:
<link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}"> #changed main.css to index.css according to your structure
Your settings must be like below.
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
Related
It's probably not about static files configuration because images work and CSS other than navbar's work, navbar's CSS doesn't make any changes it's just like it's not there, even though when I tried to make a simple h1 and color it (as a test) it worked, it's just the navbar's CSS for some reason that I really can't figure out.
base.html:
{% load static %}
<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.0" />
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
</head>
<body>
{% block navbar %}
{% include 'parts/navbar.html' %}
{% endblock navbar %}
{% block content %}
{% endblock content %}
</body>
</html>
homepage.html:
{% extends 'base.html' %}
{% load static %}
{% block content %}
{% endblock content %}
navbar.html:
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}" />
</head>
<div class="navContainer">
<div class="navbar">
<img src="{% static 'images/navLogo.png' %}" class="logo" />
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
</ul>
</nav>
</div>
</div>
static configuration in settings.py:
STATIC_ROOT = path.join(BASE_DIR, 'static')
STATIC_URL = 'static/'
STATICFILES_DIRS = [
path.join(BASE_DIR, 'staticfiles')
]
app's urls.py:
from django.urls import path
from . import views
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('', views.homepage, name="homepage")
]
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
what I'm getting:
perhaps this directory image could help too:
In my project, I attempt to link my html template to a CSS file that I have in my static folder. I have added STATIC_ROOT, STATIC_URL and STATICFILES_DIRS to my settings.py.
In my static folder, I have a folder called styles, and within that, I have a file named signup.css . I have also ran python manage.py collectstatic.
In my template I attempt to reference that CSS file to change the colour of my h1, however no change occurs.
Template:
{% load static %}
<head>
<link rel="stylesheet" href="{% static 'styles/signup.css' %}">
</head>
<h1>YO</h1>
<div id="signupformdiv">
<form class="signupform" action="{% url 'signup' %}">
</form>
</div>
signup.css:
h1 {
color: red;
}
The colour of my h1 remains black. Does anybody know the issue? Thank you.
Source Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Instagram</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="/static/custom.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="/static/favicon.ico" />
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal"><a class="text-dark">Instagram</a></h5>
<nav class="my-2 my-md-0 mr-md-3">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>
<link rel="stylesheet" href="/static/styles/signup.css">
</head>
<h1>YO</h1>
<div id="signupformdiv">
<form class="signupform" action="/users/signup/">
</form>
</div>
</body>
</html>
ERROR in browser:
Failed to load resource: the server responded with a status of 404 (Not Found)
settings.py:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'instagram/static/')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
Project Structure:
instagram-project is root,
subfolder called instagram, and within I have a folder named 'static'
Inside root directory, I have a static folder, where all static files are sent to.
Inside users app, I have a folder called templates, where my template is stored.
** BASE.HTML **
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Instagram</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <link rel="stylesheet" href="{% static 'styles/signup.css' %}">
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
</head>
The problem is that the server can't find the your static files not because they don't exist, but because there's no urlpattern for them, more info
# project urls.py
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = []
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
This should solve it
I have a django project and i have been trying to link a css file to the base.html document to begin implimenting some css to my file. I have bootstrap linked already but i want to add more customization... Here is what i have so far..
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static 'css/blog.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid blue5">
{% block content %}
{% endblock %}
</div>
</body>
</html>
here is the css file
.blue5 {
background-color: lightblue,
}
You can link a CSS and HTML file like this:
In your HTML code:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<link href="{% static 'css/blog.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="pathToYourCSSfile" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid blue5">
{% block content %}
{% endblock %}
</div>
</body>
</html>
Hope this helps.
if your css file only contains these two lines it will be better to include them in the head of the document
<head>
...
<script ...>
<style>
.blue5 {
background-color: lightblue,
}
</style>
</head>
otherwise just like the others css, add a new link tag:
<link href="{% static 'path to your file.css' %}" rel="stylesheet">
I'm quite the newbie at this, but I'm trying to get the bootstrap datepicker inline mode, but my divs are not showing anything once rendered. perhaps you might know what is wrong with my code?
<html>
<head>
<title>bootstrap datepicker examples</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href={%static "bootstrap-3.3.2-dist/css/bootstrap.min.css" %}>
<link rel="stylesheet" type="text/css" href="{%static 'css/datepicker.css' %}"/>
<link rel="stylesheet" type="text/css" href={%static "css/main.css"%}>
</head>
<body>
<div id="main">
<div class="datepicker"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> {# jQuery #}
<script src="{% static 'bootstrap-3.3.2-dist/js/bootstrap.min.js' %}"></script> {# Bootstrap #}
<script type="text/javascript" src="{% static 'js/bootstrap-datepicker.js' %}"></script>
<script>
$(document).ready(function() {
$(".datepicker").datepicker();
});
</script>
</body>
</html>
It works if i use an tag but then it is not in the inline mode.
put the following code to the first line of your template file.
{% load staticfiles %}
and change
<div class="datepicker"></div>
to
<input class="datepicker" />
I want to place my gallery.html and gallery.css inside my base.html. I've ran collectstatic and runserver but the gallery.css and html cannot be located when I inspect it with chrome dev tools. Only the base.html and css are to be found and displayed.
Here is a brief structure of my project:
/proj
/gallery
/static
/css
gallery.css
/templates
gallery.html
/proj
/templates
base.html
/static
/css
base.css
base.html:
{% load staticfiles %}
<!DOCTYPE html>
<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>Bootstrap 101 Template</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Base css -->
<link rel="stylesheet" type="text/css" href="{% static "css/base.css" %}">
</head>
<body class="background">
<div class="wrapper">
{% block content %}
<!-- content here-->
{% endblock %}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
gallery.html:
{% extends "base.html" %}
{% block content %}
<!-- container for photos-->
<script type="text/javascript" src="{% static "js/masonry.pkgd.minjs" %}"></script>
<link rel="stylesheet" type="text/css" href="{% static "css/gallery.css" %}">
<div class="gallery-container">
dsfsdfdsfdsf
</div>
{% endblock %}
gallery.css:
.gallery-container {
background-color: red;
width: 50%;
height: 50%;
margin: 0px;
padding: 0px;
}
base.css
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.background {
background-color:#b0a0e6;
}
.wrapper {
background-color: grey;
height: 100%;
width: 75%;
margin-left: auto;
margin-right: auto;
overflow:auto;
}
settings.py
STATIC_URL = '/static/'
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
STATICFILES_STORAGE = (
'django.contrib.staticfiles.storage.StaticFilesStorage'
)
STATIC_ROOT = os.path.realpath(os.path.join(BASE_DIR, '..', 'websiteAssets'))
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
TEMPLATE_DIRS = (
os.path.join(BASE_DIR,'templates'),
os.path.join(BASE_DIR,'home/templates'),
os.path.join(BASE_DIR,'gallery/templates'),
os.path.join(BASE_DIR,'contact/templates'),
os.path.join(BASE_DIR,'aboutme/templates'),
)
With the line {% static 'css/gallery.css' %} you are trying to get the static file gallery.css located in the directory 'css' but this directory doesn't exist as gallery is put in just the directory 'static' and not 'static/css'. Try doing it by {% static 'gallery.css' %} or creating a directory 'css' in static and putting gallery.css in it.
Old question and I'm sure you've either figured out a solution or moved on, but you need to add:
{% load static %}
in your gallery.html beneath the {% extends 'base.html' %}. Django templates require you to load static files on any template that you are using them in regardless if they are included in a template that you are extending from. See here for a better reference.