I have a big problem.Django doesn't recognize my css files. PHG
My css file is located in polls, but Django won't recognize it as a static file
My home.html
<link rel="stylesheet" type="text/css" href="home.css">
<title>121212</title>
<body>
<div id="1212">
<li class="fafa">12112</li>
</div>
</body>
my settings.py
STATIC_URL = '/static/'
STATIC_DIRS = [os.path.join(BASE_DIR, "static"),]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')```
It is a very SMALL problem, Mr XD.
In your template: {% load static %}
And then: <link href="{% static 'home.css' %}" rel="stylesheet">
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.
The theme applied by css does not work. In the past it used to apply but i do not what i did that its not executable anymore. base.htmnl is core template for other pages.
In base.html i have :
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{% static 'nana/css/main.css' %}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<nav class='navbar mynav-fixed-top navbar-expand-lg bg-dark' role='navigation' id='navbar'>
<div class="container-fluid">
</div>
</nav>
<div class="container-fluid">
{% block content %}
<div class="main">
</div>
{% endblock %}
main.css
body{background-color: yellow}
settings.py :
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')]
The css does not work. I do not knwow why the application does not apply changes in css file. Would appreciate your though and help how to fix it.
In general it is best to have the link to your own custom stylesheet (in your case that is main.css) after the other stylesheets in the head-section. The bootstrap stylesheets may overwrite your main.css thus making it useless.
You have the link to main.css before the links to bootstrap.
You better set STATIC_ROOT instead of STATICFILES_DIRS if this is the only folder with static files in your project:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,'static')
and change this {% load staticfiles %} to this {% load static %} in your templates - load staticfiles method is deprecated since 2.1.
Also, as already suggested in comments, put your stylesheet after all the thirdparty stylesheets - thus it will have higher priority. Also note that your style may have lower priority if any of prior stylesheets defines the same property with !important option.
You have not set the STATIC_ROOT, that's why your css is not showing up.
First Make sure in settings.py the debug setting is True
Debug=True
Put following code in settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticroot')
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
in your main urls.py
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# other urls
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
and then call following command
>python manage.py collectstatic
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.
I'm struggling to load my custom.css file to use in my bootstrap template:
error:
"GET /static/artdb/css/custom.css HTTP/1.1" 404 1785
path to custom.css:
static/artdb/css/custom.css
base.html:
{% load static %}
:
<!-- Custom styles for this template -->
<link rel="stylesheet" href="{% static "artdb/css/custom.css" %}">
urls.py:
urlpatterns = [
path('artdb/', include('artdb.urls')),
path('admin/', admin.site.urls),
]+static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
settings.py:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,'static')
#STATICFILES_DIRS =(os.path.join(BASE_DIR,"static"),)
any idea what's wrong?
settings.py:
STATIC_URL = '/static/'
STATIC_ROOT= os.path.join(os.path.dirname(BASE_DIR),'static')
STATICFILES_DIRS= [os.path.join(BASE_DIR,'###path to static folder in project###'),STATIC_URL]
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 ;)