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!.
Related
I am writing a web app with Flask in Python and I want to style my HTML pages with CSS but I can't manage to create a link between HTML and CSS. I've tried several times to move some files and folders and to use other means but nothing has worked.
Here is my directory:
App (folder):
- main.py
- website (folder)
__init__.py, auth.py, models.py, views.py
- static (folder) -> styling.css (inside)
- templates (folder) -> base.html, home.html (inside)
In my 'base.html' template, I've written:
<script
type="text/css"
src="{{ url_for('static', filename='styling.css') }}"
></script>
But it doesn't work (when I click on the link in VSCode, it tells me that the file doesn't exist (it searches in the template folder). Do anyone see any error please?
You are using wrong tag for including css file. You have to use link tag.
<link rel="stylesheet" href="{{ url_for('static', filename='styling.css') }}">
Edit:
Another problem after including the file is that browsers save cache and sometime doesn't pick up changed static files.
For that you to hard reload or sometime clear cache.
Here is a article for major browsers on how to hard reload.
To see different options of reloading, open inspect tab and right click on reload button at side of search bar.
not familiar with Python, but in HTML you have to import the css with the <link/> tag
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../static/styling.css"> //relative link to the css
</head>
<body>
</body>
</html>
reference: https://www.w3schools.com/css/css_howto.asp
I hope it works
Do you have a <head> section in your base.html file?
It should look like this...
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='styling.css') }}">
</head>
<body>
<!--Your Body Content Here -->
</body>
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')
]
I have a CSS file style.css stored in a CSS folder and tried using <link rel="stylesheet" type="text/css" href="style.css"> to link it into the HTML file. I got a 404 not found error from this and am not sure what I am doing wrong.
Below is the code (there is not much at the moment):
{% extends "base.html" %}
{% block body %}
<div class="MainBody">
<link rel="stylesheet" type="text/css" href="style.css">
<div class="w3-container w3-padding-32 w3-hide-small center-align">
<h1>About Us</h1>
</div>
</div>
{% endblock %}
This shows the full path of style.css within the project
Please let me know what is being done incorrectly.
Actually, you answered your own question:
I have a CSS file style.css stored in a CSS folder
Your href attribute should look something like: href="/css/style.css"
The href should should have the path where the file is located along the file name not only the file name.
Example :
<link rel="stylesheet" type="text/css" href="./css/style.css">
we use "./" to search in the current folder.
we use "../" If you want to come back from the current folder.
Try this:
In the href, would you not leave the first / off? I thought that would go to a root folder. Try and eliminate that first slash and see what happens. As was said, the 404 is because it's looking in the wrong place.
I see this is a structure of a Flask app. In Flask, the CSS files and other assets should by default be stored in the static directory which should be directly inside your home directory.
Your file structure should look like this:
TSAWeb_App
|__ templates
|__ index.html
|__ static
|__ CSS
|__ style.css
Then you to access it inside the web app, first import url_for method
from flask import Flask, url_for
Then you can refer to CSS file as:
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='CSS/style.css') }}">
Then when the app is run, the href tag will have the correct value set
UPDATE: If you're using Django, see this doc
Configuring static files
Make sure that django.contrib.staticfiles is included in your
INSTALLED_APPS.
In your settings file, define STATIC_URL, for example:
STATIC_URL = '/static/'
In your templates, use the static template tag
to build the URL for the given relative path using the configured
STATICFILES_STORAGE.
{% load static %}
<img src="{% static "my_app/example.jpg" %}" alt="My image">
Store your static files in a folder called static in your app.
For example my_app/static/my_app/example.jpg.
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 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......