Django: CSS is not getting applied - html

I have placed all my CSS files in static/css folder. My settings are:
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
MEDIA_URL='/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
While the media files are working properly, and the images kept in static/images folder are also appearing, the CSS styling are not appearing. For each page, I am creating a CSS file, placing that in static/css folder, and calling it like this:
{% load static %}
<head>
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/getting-started.css' %}"> <--this
</head>
The getting-started.css file:
h3{
text-align: left;
}
p {
font-family: verdana;
font-size: 20px;
}
Though the bootstrap.min.css is working, the CSS are not working.

Try giving full path in STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
For example STATICFILES_DIRS = [os.path.join(BASE_DIR, 'accounts/static')]
In my case my app name was accounts and then static folder inside it.

You have to collect all staticfiles before loading them in your template:
manage.py collectstatic

If you are developing turning DEBUG=False , try to check out this: https://docs.djangoproject.com/en/2.2/howto/static-files/#deployment.
If you are developing turning DEBUG=True , and still having trouble , follow below methods .
Create a folder inside static folder withyour app name . Move folder css to this location and update the href such that new href = "{% static 'appname/css/getting-started.css' %}"
After that update the settings to
STATIC_URL = '/static/'
Below code is only needed your project will probably also have static assets that aren’t tied to a particular app.
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
You can refer : https://docs.djangoproject.com/en/2.2/howto/static-files/#configuring-static-files
Check whether the css file is loaded by inspecting the rendered element using the inspect element so that you can verify whether it is loaded . The css styling you used might be not matching with elements in the html . If it is loaded you can view your below code
h3{
text-align: left;
}
p {
font-family: verdana;
font-size: 20px;
}

Related

HTML not linking to CSS file django

I know there are so many questions on this but I'm yet to find a solution. I have the below folder structure for my django app:
I then reference the styles.css file from my index.html page, like so:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
{% load static%}
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
but no matter what I change in my css file it doesn't affect my webpage.
css file if useful:
.form-details {
text-align: center;
color: Tomato;
background-color: red;}
Place {% load static %} line to the top of your index.html file.
And also be sure that you correctly set static files direction in the settings.py file.
For example,
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static_assets'),
)
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)

CSS Link Static Page

Before you mark this as a duplicate, I have indeed already looked at the django forums, tutorials, etc.
I have a blog I made with Django, the blog's index page template needs to have a css stylesheet that I have linked in my static folder. (Folder Tree attached
attached).
In the html for the template I have the following code:
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'blog/style.css' %}" />
Why is this not working! Thanks!
EDIT: I found this in my sitename/base.py file:
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]
STATICFILES_DIRS = [
os.path.join(PROJECT_DIR, 'static'),
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
Could it be a problem with the directories? manage.py collectstatic -l says:
196 static files symlinked to
'/home/myusername/webapps/mysite/static'.
Check the console while opening the view accessing this CSS file. The cmd console will print the absolute URL they will use to find CSS file. From the url, you can identify what is the problem. See how the URL is built.
comment the STATICFILES_URL [..], STATICFILE_FINDERS [..] and add the staticfiles_url like this:
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)

Import css in Django

I use django1.10
i reference the official doc
https://docs.djangoproject.com/en/1.10/intro/tutorial06/
my project name:mysite
structure:
mysite-
- mysite - urls.py
-views.py
...
- templates - index.html
- images
- static - mysite - assets - css - main.css
- js
...
In my index.html
add
{% load staticfiles % }
<link rel="stylesheet" text = 'html/css' href="{% static 'mysite/static/main.css' %}" />
it said i have a Invalid block tag about TemplateSyntaxError
<link rel="stylesheet" type = 'text/css' href="{% static 'mysite/static/assets/css/main.css' %}" />
views.py (about static files part)
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
'/mysite/static/',
]
STATIC_URL = '/static/'
STATIC_ROOT='/mysite/static/'
what's part should i notice?
Hi dear try to make python manage.py collectstatic...
hope it solves your problem 😊

Django: Using static, hard time with paths to render css

This is a bit embarrassing, but I don't know how to solve this problem:
First off, my project directory looks like this (there are more directories, but we aren't concerned with them):
projectfolder/
wsgi/
openshift/
templates/
home/
simple-sidebar.html
static/
css/
fonts/
js/
And the file we are concerned with is simple-sidebar.html which looks like the following :
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href= "{% static "css/bootstrap.css" %}" rel="stylesheet">
<!-- Add custom CSS here -->
<link href="{% static "css/simple-sidebar.css" %}" rel="stylesheet">
<link href="{% static "font-awesome/css/font-awesome.min.css" %}" rel="stylesheet">
</head>
Now for some reason my static template tags are not working, but that's probably because I don't know how to set up my static template stuff in my settings.py:
STATIC_ROOT = os.path.join(PROJECT_DIR, '..', 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = () <--- dont know if I need this one?
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
#'django.contrib.staticfiles.finders.DefaultStorageFinder',
)
PS: Also how would you do this without the {% static %} tag? I am not sure how my style sheets href would look like.
Try removing the dots from your STATIC_ROOT, for example
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')
STATICFILES_DIRS are there for you if you'd like to map additional folders to your application that can be anywhere on your machine. When you run ./manage.py collectstatic you're essentially asking python to find all the files within said directories and drop them into the static folder defined in STATIC_ROOT
If you would like to map your files manually (without the static tag) you'd have to write out the full path of your file, for example /some/directory/path/css/style.css.
Lastly if you're running with DEBUG = True you are required to add your static and media urls to urls.py so there is an actual path in place. For example
from django.conf import settings
# ... your normal urlpatterns here
if settings.DEBUG:
urlpatterns += patterns('',
(r'^media/(?P<path>.*)$', 'django.views.static.serve', {
'document_root': settings.MEDIA_ROOT}),
(r'^static/(?P<path>.*)$', 'django.views.static.serve', {
'document_root': settings.STATIC_ROOT}))

Render CSS in Django

I am trying to get the CSS sheet to load on my development computer. It is in the media directory as media/base.css. In my base/base.html template, I have:
<link href="media/base.css" rel="stylesheet" type="text/css" />
I found this page, but that didn't fix it. Any ideas?
if media/ is your project media directory, then in the template use
<link href="{{ MEDIA_URL }}base.css" rel="stylesheet" type="text/css" />
this is considering you have passed RequestContext to your template,
ex:
def some_view(request):
# ...
return render_to_response('my_template.html',
my_data_dictionary,
context_instance=RequestContext(request))
You will also need to have static urls served when running on the localdev server.
Include this in your urls.py:
from django.conf import settings
if settings.DEBUG:
urlpatterns += patterns('',
url(r'^%s(?P<path>.*)$' % settings.MEDIA_URL[1:],
'django.views.static.serve',
{'document_root': settings.MEDIA_ROOT, 'show_indexes': True})
)