I am creating a website with Django and for some reason my CSS file is having no effect on the page. I have checked to make sure my STATIC_URL is defined but still no luck.
My settings.py:
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Inside of my blog app I have a static directory
blog
|
static
|
css
|
blog.css
My HTML doc:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Medicare Supplemental info</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">
<!-- This is where I'm loading the CSS file -->
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
I checked to make sure that I have the required app installed in the settings.py:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'blog',
]
I have also tried changing the way I load static files from:
{% load staticfiles %}
to:
{% load static %}
Still no luck. What is it I'm doing wrong?
I think you miss this in urls.py:
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
This work in dev, in production you must collectstatic with manage.py and serve statics with nginx(or apache).
for django==2.0.2 none of the urls.py changes are necessary, just get STATIC_URL in settings.py right
Run into the same issue, after searching without any solution, I casually pressed Enter in CMD window, and python runserver continued and I found /static/css/blog.css was successfully found.
I had the some problem and the solution that works for me was stop the server using CRTL-BREAK and start again. I am using Django v.3.0.7.
If you are not extending from other html file as in your case then the first entry in your html file should be !DOCTYPE html and then the load template tag i.e {%load staticfiles%}.
For anyone who this after django removed the import of os in the settings file.
Use STATIC_ROOT = BASE_DIR / 'static' instead of os.path......
Related
I cant load css file in my web page it just gives me a simple page without css elements as shown in the screenshot and says it cant load local resource Page and inspect elememt
I've loaded the static files in settings
STATIC_URL = '/static/'
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'assets')
]
STATIC_ROOT=os.path.join(BASE_DIR,'assets')
added url
static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
used this in html
{%load static%}
<head>
<meta charset="UTF-8">
<title>LOGIN</title>
<link rel="stylesheet" href="{% static 'assets/styles/style.css' %}">
</head>
also did manage.py collectstatic
followed the docs dont know where i went wrong
You should use a link tag:
<link rel="stylesheet" href="{% static 'assets/styles/style.css' %}">
That is enough to load the file; so you don't need the following:
{% include "assets/styles/style.css" %}
and also, you should change your settings like below if your css file is in BASE_DIR/assets/style.css:
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'assets')
]
my django project wont find my css file. Spelling is correct, path is correct, lower and upper cases are correct, its linked in the head part. ive been searching for 2 hours now.
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../src/Templates/style.css">
<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://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
-->
<title>Document</title>
<style>
.form-control{
width: 50%;
}
</style>
</head>
<body>
<div class="container" id="thisone">
<h3 class="">BlaBlaBla!</h3>
<h5>{{ message }}</h5>
<form action="" method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
is this a stupid fail of mine?
Greetings
Check Your path again,
If it's correct
Follow the Guidelines to Include CSS in Django Project
Static files are intended to wrap CSS files and your images, Django automatically identifies this file.
Create static folder in your app folder, same directory as of migrations and template folder
Create css Folder and insert it into static Folder
Now put your styles.css into css folder
Now in your HTML File where you want to include CSS, add {% load static %} On the top of HTML File and Your Path should be like this <link rel="stylesheet" href="{% static 'css/styles.css' %}"> in HTML file.
Then Make Change To Your settings.py in projectfoldername with-
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
Then Run this command
python manage.py collectstatic
You static file will be copied to New file created by django as assets.
If it does not reflect changes Refer here If it does not work
According to the official statement "Generally, the templates folder is created and kept in the sample directory where manage.py lives. This templates folder contains all the templates you will create in different Django Apps."
As a Django projects grow in size it's often more convenient to have all the templates in one place rather than hunting for them within multiple apps.
Just as an additional information for the accepted answer's 1."Statement"
Besides, yes you should have your static folder at App-level and it should work!.
All of my html and css and files are in the same templates folder so i don't think that is the problem. I am brand new to frontend development and deeply confused... please help, this is not a good start lol!
-- My base.html file --
<!DOCTYPE html>
<html>
<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">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<nav class="navigation_bar">
<ul>
<li>
<b>about page</b>
</li>
</ul>
</nav>
{% block content %}{% endblock %}
</body>
</html>
-- main.css --
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');
body {
text-align: center;
font-family: 'Montserrat';
}
.navigation_bar a {
text-decoration: none;
}
Maybe it is an issue with my css? Thank you!
I think the problem here is in your server, I assume you are using Flask since you are writing Jinja syntax in your html file, I think the problem is that Flask can't find your css file. you need to tell it exactly where to look for your static file, or you can just make a router to deal with file requests, read the files and send them back to the browser.
The first way
from flask import Flask, render_template
app = Flask(__name__,
static_url_path='',
static_folder='static',
template_folder='templates')
#app.route('/')
def main_page():
return render_template("index.html")
so now Flask will look for your static files inside the folder "static" you need to create it and then put your static files there including your css file, and leave your html file like it is, don't change the path of your css file to include the folder name since Flask will serve it as if it were in the current directory of the script.
The second way
from flask import Flask, render_template, request, Response
app = Flask(__name__)
#app.route('/')
def main_page():
return render_template("index.html")
#app.route('/css')
def giveCSS():
fileContent = ""
file_name = request.args.get("name")
if(file_name):
file = open("css/" + file_name + ".css", "r")
for line in file:
fileContent += line
return Response(fileContent, mimetype='text/css')
I assume you have other css files, you need to change the path of the css file inside the html file to include the query /css/name=main and the css file inside maybe a folder named "css" of course you can change whatever names you don't like but make sure to take care.
I'm having trouble linking CSS to an HTML page. Both files are in the same directory but I'm getting this in the terminal when I run on local port in Chrome ('test3' is the html file):
Not Found: /test3/sidebar.css
[15/Apr/2020 17:57:52] "GET /test3/sidebar.css HTTP/1.1" 404 8233
No matter how I alter the href path get some variation of this issue unless I include the directory name:css file name, but even then the HTML file doesn't inherit the CSS styling.
I'm working on a sidebar nav, which is why the names are the way they are but I just included a test line I'm using below:
.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Testang</title>
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="sidebar.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1> Test </h1>
</body>
</html>
If I input the href like
<link href="requests:sidebar.css" rel="stylesheet" type="text/css">
I don't get the error but I still don't see the CSS changes ('requests' is the name of the directory).
.css file:
h1 {
color: red;
font-size: 50px;
}
I just switched from PyCharm. Once I got Atom set up I opened the project in Atom from the PyCharm folders. Everything else seems to work fine.
The code looks good, there is no typo in it. Make sure you have the CSS file and the HTML file in the same folder and they are not text files and they have extensions and, of course, that the files are saved.
test3 is the parent directory?
Is it just HTML and CSS or is it a Django project?
Since the CSS file is in the same folder, you could try something like this:
<link href="./sidebar.css" rel="stylesheet" type="text/css">
The dot tells the browser to search in the same folder as the HTML.
At the very beginning of your HTML file add:
{% load static %}
and change
<link href="sidebar.css" rel="stylesheet" type="text/css">
to something like this:
<link href="{% static 'sidebar.css' %}" rel="stylesheet" type="text/css">
I created a folder in the main project directory called "static", then created a directory within that called "css". Then, and this was the big thing missing for me, went into the project's settings.py and created the STATICFILES_DIRS path to that new folder.
From what I've read I'll need some additional work when I push this to production.
# Static files (CSS, JavaScript, Images)
https://docs.djangoproject.com/en/3.0/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
"full folder path to static folder"
]
Then in the HTML file I entered:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/sidebar.css' %}">
</head>
The key parts are the load static at the top and the href to {% static 'css/sidebar.css' %}.
I have started a Flask project and to stay organized I would like to have a css file per html file. A lot of the tutorials online have one css file in the /static/styles.css file. When I run the following code, the css does not seem to be used and the terminal of the flask connection gives:
127.0.0.1 - - [01/Nov/2019 20:49:30] "GET /%7B%7B%20url_for('static',%20filename='css/index.css')%20%7D%7D HTTP/1.1" 404 - but it does load the page, just no css. Is there a standard way to have multiple css files in the static directory.
My project structure is:
Dockerfile
docker-compose.yml
venv
app
-> main.py
-> templates
-> index.html
-> static
-> css
-> index.css
My main.py file is :
from flask import Flask, render_template
app = Flask(__name__)
app.config.from_object(__name__)
# Set-up Flask routes.
#app.route('/')
def index():
return render_template('index.html')
My index.html file is:
<!DOCTYPE html>
<html lang="en">
{% block head %}
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" type="test/css" href="{{ url_for('static', filename='css/index.css') }}"/>
</head>
{% endblock %}
<body>
<header>
<div class="container">
<strong><nav>
<ui class="menu">
<li>Home</li>
<li>About</li>
</ul>
</nav></strong>
</header>
My index.css file is:
.menu li {
display: 'inline-block";
border: 2px solid green;
}
A little later, I found the solution for this:
In my/your base.html define a jinja template for the stylesheet so all pages have that as a default but can be overridden.
{% block stylesheet %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/base.css') }}"/>
{% endblock stylesheet %}
Then in another html file say posts.html, the stylesheet tag can be used to change it,
{% block stylesheet %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/posts.css') }}"/>
{% endblock stylesheet %}
This allows use of multiple css files. However, this means all css will be overridden and used from the new css so there will be a lot of duplication across files. However, to me this makes it more organized and readable. It is a matter of preference. Good luck