Since I finished the backend of my Django website I started adding some style.
My html files are displayed but it seems no css has been linked to them however the path is correct when I show the source code in Firefox.
mywebsite/
----blog/
----mywebsite/
----static/
--------css/
------------struct.css
----templates/
--------layouts/
--------errors/
------------404.html
--------html/
------------struct.html
Django version: 2.1.7
settings.py:
DEBUG = False
ALLOWED_HOSTS = ['*']
INSTALLED_APPS = [
# other apps...
'django.contrib.staticfiles',
]
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
urls.py:
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
struct.html:
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel="stylesheet" href="{% static 'css/struct.css' %}">
<title>test</title>
</head>
<body>
<p>test</p>
</body>
</html>
struct.css:
p{
color:red:
}
body{
background-color:black:
}
Generally static files path should be like this appname/static/appname/yourfiles
there is no need to change url patterns.
Assuming your appname is Myapp , the proper path for your css file is
Myapp/static/Myapp/css/struct.css
For including static files , add below line in settings.py
STATIC_URL = '/static/'
and in your html template
<!doctype html>
{% load static %}
<link rel="stylesheet" href="{% static 'Myapp/css/struct.css' %}">
If you are having your static files within the app then there is no need to use
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
You can refer Managing Static Files in django documentation .
define static root in settings.py
STATIC_ROOT = BASE_DIR + '/static/'
hope it helps
refer this
if you are running this application on localhost then you may try to set DEBUG = True
if you mistakenly set it to False,
Because it was fixed for me that way.
Related
Django was able to load a static .png file but not the static .css file, why?
settings.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
TEMPLATE_DIR = os.path.join(BASE_DIR,"templates")
STATIC_DIR = os.path.join(BASE_DIR,"static")
STATIC_URL = '/static/'
STATICFILES_DIRS = [
STATIC_DIR,
]
css file
h1{
color: red;
}
html
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8">
<title>Django Guitar Page</title>
<link rel="stylesheet" href="{% static "css/mysyle.css" %}"/>
</head>
<body>
<<h1>Hi, this is text</h1>
<img src="{% static "images/a_picture.png" %}" alt="Uh oh, didn't show">
</body>
</html>
file path
first_app/static/css/mystyle.css
first_app/static/css/images/a_picture.png
It's a Spelling mistake
Change
{% static "css/mysyle.css" %}
to
{% static "css/mystyle.css" %}
in my case changed the structure to this:
├───myapp
│ ├───migrations
│ ├───templates
├───static
│ └───css
| └───style.css
└───myproject
├───templates
└───registration
and worked.
I'm newbie in Django and I'm trying to find a way to load my css files in my project. Here is my settings.py file
STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_FINDERS = (
"django.contrib.staticfiles.finders.FileSystemFinder",
#"django.contrib.staticfiles.finders.AppDirectoriesFinder"
)
AUTHENTICATION_BACKENDS = (
# Uncomment the following to make Django tests pass:
'django.contrib.auth.backends.ModelBackend',
'allauth.account.auth_backends.AuthenticationBackend',
)
I got a way to do it using the variable STATICFILES_DIRS, but it won't work together with the others similars variables.
What should I do to fix it?
EXTRA INFORMATIONS:
My base.html file static files call:
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'icomoon_style.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}" />
My folders disposal:
OntoLogica (main folder)
Ontologica (project folder)
static folder
icomoon_style.css
style.css
css folder
bootstrap.min.css
I found a way that solved my case. It was found in this site: https://devcenter.heroku.com/articles/django-assets
What I've to do:
Add the line PROJECT_ROOT and the change the line STATIC_ROOT to:
PROJECT_ROOT = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'staticfiles')
With this I could add the line STATICFILES_DIRS without any trouble:
STATICFILES_DIRS = (
os.path.join(PROJECT_ROOT, 'static'),
)
It worked perfectly for me and I hope it helps someone else too. Thanks
set static path in a correct way. Get an idea from my project.
settings.py
import os
import sys
from os.path import abspath, dirname, join
sys.path.append(join(dirname(__file__), "../applications"))
PROJECT_ROOT = abspath(dirname(__file__))
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
MEDIA_ROOT = join(PROJECT_ROOT, '../media/')
MEDIA_URL = '/media/'
STATIC_ROOT = join(PROJECT_ROOT, '../static/')
STATIC_URL = '/static/'
My structure of files:
Main directory
project dir
settings.py
urls.py
media
static folder.
As it says in the "Warning" section of the docs
This [STATIC_ROOT] should be an initially empty destination directory for collecting your static files from their permanent locations into one directory for ease of deployment; it is not a place to store your static files permanently.
So you should use STATICFILES_DIRS to point to your static files.
And lastly make sure that you use {% load staticfiles %} in your templates to load your static files.
My structure looks something like this:
myproject/
app1/
static/
css/
style.css
myproject/
settings.py
static/
css/
style.css
db.sqlite3
in settings.py I have:
BASE_DIR = os.path.abspath(os.path.join(os.path.dirname( __file__ ), '..'))
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
# blank
)
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
in my index.html I have:
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
I am trying to load css from myproject/static folder but whenever I load index.html it's looking into /app1/static/css/style.css, db.sqlite3 is working though.
I even tried removing app/static folder, it did not work. What am I doing wrong?
add {% load staticfiles %} at the top of your template
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}" />
In settings.py,
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
No need of STATIC_ROOT, if you're running on localhost.
You forgot to add the Static tags to load your files in the templates:
At the beginning of your html file you have to put
{% load staticfiles %}
then add the static tag in your path
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %} />
see the documentation in django:
https://docs.djangoproject.com/en/1.6/howto/static-files/
kudo to the one who just answered you got it faster ;)
I have a Django project structure like this
Project
app
media
static
style.css
templates
base.html
and in settings
PROJECT_ROOT = os.path.join(os.path.dirname(__file__), '..')
SITE_ROOT = PROJECT_ROOT
STATIC_ROOT = os.path.join(SITE_ROOT, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(SITE_ROOT,'static')
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
and in base.html reference to the css file :
<link href="{{STATIC_URL}}/style.css" rel="stylesheet" type="text/css" />
and it gives an error :
"The STATICFILES_DIRS setting should "
ImproperlyConfigured: The STATICFILES_DIRS setting should not contain the STATIC_ROOT setting
the browser shows html files in no-css style , what can be the problem?
This line should be the culprit:
<link href="{{STATIC_URL}}/style.css" rel="stylesheet" type="text/css" />
Remove the trailing slash after {{STATIC_URL}}
You should say
<link href="{{STATIC_URL}}style.css" rel="stylesheet" type="text/css" />
Can you make sure STATICFILES_DIRS refer to your static directory.
from django.conf import settings
print settings.STATICFILES_DIRS
thanks for looking into this, cause it's getting on my nerves now:)
I can't get a style.css (or any static file to get oared at all!) and I have googled around and none of the solutions worked so far.
my urls.py:
from django.conf.urls import patterns, include, url
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf import settings
urlpatterns = patterns('',
url(r'^$', 'ports.views.home', name='home'),
)
urlpatterns += staticfiles_urlpatterns()
if settings.DEBUG:
urlpatterns += patterns('django.contrib.staticfiles.views',
url(r'^static/(?P<path>.*)$', 'serve'),
)
my base.html where i load the statics:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="static/css/style.css" type="text/css" />
...
my settings.py references the static directory:
STATIC_URL = '/static/'
I don't understand what I am doing wrong (or in fact why it has to be so awkward to server these statics). any help in lakers terms would be appreciated!
Thanks,
blargie-bla
On your server, you probably need to try this
python manage.py collectstatic -l
The -l makes a symbolic link instead of copying. This prevents two copies of the same file and save some space, but also means if you rename the original file, you'll have to reestablish the link.
More info about the collectstatic command here.
Don't forget to set STATIC_ROOT as well.
Just for reference here is my settings.py for that part:
# Absolute path to the directory static files should be collected to.
# Don't put anything in this directory yourself; store your static files
# in apps' "static/" subdirectories and in STATICFILES_DIRS.
# Example: "/home/media/media.lawrence.com/static/"
STATIC_ROOT = os.path.join(os.path.dirname(__file__), '..', 'static').replace('\\', '/')
# URL prefix for static files.
# Example: "http://media.lawrence.com/static/"
STATIC_URL = '/static/'
This applies for Django 1.4+, where the settings.py is under (for example) mysite/mysite/ and it's not on the same level as the static folder.
My problem was adding the css outside block content. Moving it inside the block content solved the issue.
{% extends "home/base.html" %}
{% load static %}
<!--<link rel="stylesheet" href="{% static 'blog/main.css' %}">-->
{% block content %}
<link rel="stylesheet" href="{% static 'blog/main.css' %}">
--some code--
{% endblock content%
Try:
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" />