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
Related
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')]
No idea why I can't seem to be able to import a styles.css file into a standard HTML page.
The code compiles, but my page doesn't receive any changes whatsoever from the css file.
src/main/resources/templates/page.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<div class="card text-center">
<div class="card-header">
<h4 class="new-header">New header</h4>
<a class="btn btn-primary new-button">New button</a>
</div>
</div>
</body>
src/main/resources/static/css/styles.css
.new-button{
float:right;
}
.new-header{
float: left;
}
I've tried switching the href directory link to several others, such as :
/css/styles.css (the one used by a similar project);
/static/css/styles.css (the IDE considers this to be the best one)
You are looking in the wrong directory. Change the href to
<link rel="stylesheet" type="text/css" href="../static/css/styles.css"/>
the double dot at the start are necessary:
../static/css/styles.css
Here is my views.py file:
from django.shortcuts import render
def page(request):
css = 'temp/css.css'
return render(request, 'temp/index.html', {'css': css})
and templates/temp/index.html file:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{% static '{{ css|safe }}' %}">
</head>
<body>
Hello Page
</body>
</html>
and static/temp/css.css file:
* {
width: 100vw;
height: 100vh;
background: red;
}
After rendering source of the page is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/static/%7B%7B%20css%7Csafe%20%7D%7D">
</head>
<body>
Hello Page
</body>
</html>
but I am expecting
...
<link rel="stylesheet" type="text/css" href="/static/temp/css.css">
...
Why it is not working? Is there any way to do this? How to link a static file if the path is provided by the context in html?
Assuming 'css' is your context variable, you should be able to just do the below. Basically drop the quotes around the 'css' variable.
<link rel="stylesheet" href="{% static css %}">
You should add <link rel="stylesheet" type="text/css" href="/static/temp/css.css"> to your index.html directly. That way it will take care of itself and you don't need to pass it as the context.
I am trying to get a Google font to load from css to my html template for my application. Can't get the "Upload schtuff" to assume the Bangers font. Here's the base.html:
{% load static %}
<!doctype html>
<html>
<title>{% block title %}Upload Schtuff{% endblock %}</title>
<head>
<link href="//fonts.googleapis.com/css?family=Bangers&display=swap" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
<div>
<h1>Upload schtuff </h1>
</div>
</body>
</html>
Here's the static/uploader/style.css:
'''
h1 a, h2 a
{
color: #714D91;
font-family: 'Bangers', cursive;
}
'''
I've also tried importing the font to the style sheet with
#import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');
Also tried importing it to the .html file
<style>
#import url('https://fonts.googleapis.com/css?family=Bangers&display=swap');
</style>
It's got to be my link href lines, right?
Thanks in advance!
Ok I got it to work! This was my first time adding multiple Css files... and I was missing this in my settings.py file
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
LOL, thanks for being a good community and standing by me while I solve my own problems!
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" />