I am pretty new to Django and I do not know how to link CSS and or javascript to my project.
Don't want to have a project with no CSS. Thank you for any help, sorry if this is a very dumb question. Have a nice day!
you problem is that you need to link static files from your html template.
this is fairly easy in django, just create a folder called staticfiles in the root directory and create a folder called css inside of it. Put your styles in there.
go to your settings.py and change
STATIC_URL = whatever
STATIC_ROOT = whatever
to
STATIC_URL = "/static/"
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATICFILES_DIR = [
os.path.join(BASE_DIR, "staticfiles")
]
you see, in django settings, you can't have the static root be the same as what folder you are using for static files in production.
for your urls.py in the folder inside the base directory named after your project
add this after urlpatterns
from django.conf import settings
from django.conf.urls.static import static
if settings.DEBUG:
urlpatterns += (static(settings.STATIC_URL, document_root= os.path.join(settings.BASE_DIR, "staticfiles")))
now in your base template
put
{% load static %}
before the html tag and
<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
in the head tag. I hope this has helped!
Related
Here is the configuration of my static_root variable:
STATIC_ROOT = [os.path.join(BASE_DIR,'vol/web/static')]
My templates are at the root of the project.
TEMPLATES={
...
'DIRS':[os.path.join(BASE_DIR, 'templates')],
...
}
This is how I call my bootstrap.min.css file in a project template:
<link rel="stylesheet" href="{% static 'assets/plugins/bootstrap/css/bootstrap.min.css' %}">
But it doesn't work because the file is not loaded. What's the right way to do it?
Inside main urls.py
from django.conf import settings as SETTINGS
from django.conf.urls.static import static
urlpatterns += static(SETTINGS.STATIC_URL, document_root=SETTINGS.STATIC_ROOT)
urlpatterns += static(SETTINGS.MEDIA_URL, document_root=SETTINGS.MEDIA_ROOT)
settings.py
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'
STATIC_URL = '/static/'
STATICFILES_DIRS = (BASE_DIR / 'static',)
STATIC_ROOT = (BASE_DIR / 'static'/ 'static')
If you store your js and css files in some folder, then you need to specify this folder in STATICFILES_DIRS django setting. For example:
STATICFILES_DIRS = [
"/home/my-user/my-project/static",
]
Then Django will search this directory(ies) when looking up files specified in {% static ... %} tag.
https://docs.djangoproject.com/en/4.0/ref/settings/#staticfiles-dirs
If Django still unable to find particular file, try using findstatic management command for diagnostics. This will show in which directories django is actually looking for the file. For example:
python manage.py findstatic -v3 assets/plugins/bootstrap/css/bootstrap.min.css
https://docs.djangoproject.com/en/4.0/ref/contrib/staticfiles/#findstatic
So, as I said I have a base.html file located at main_project/templates/base.html, but where do I put the base.css file? Do I create a main_project/static directory or should I just put in main_project/templates?
This seems like it should have a simple answer but I have only seen questions asking where to store base.html, and am unsure where to store base.css Thanks in advance for any responses.
All static resources go in static folder examples are, CSS,js,logo images,
STATIC_URL = '/static/'
STATIC_ROOT = ''
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static'),
)
You need to add above code to settings.py to configure static directory. Then you can create a folder called 'static' where your manage.py files are.
After that in urls.py you have this
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)
And then you can use those files in the template using
<img src="{% static "my_app/example.jpg" %}" alt="My image">
Note:- if have dynamic files that change for each page, example blog post images, they are stored in media folder. To know more you can read
Read Full documentation here
https://docs.djangoproject.com/en/3.0/howto/static-files/
It's been a while since I've setup django to work locally. I'm using version 1.11. Getting it to serve the static files.
My project is called chatsys and I've created the static folder and css in this folder chatsys\static\css\style.css .
Here's the current settings in the settings file.
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
and in the urls
#for serving static files
from django.conf import settings
from django.conf.urls.static import static
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
and finally in the html
{% load static %}
...
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
however in the runserver console I get 404 for /static/css/style.css
You should define STATICFILES_DIRS and include your project's static directory there.
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
These are the directories that Django collects static files from.
You should then change STATIC_ROOT to be a different directory. It is the directory that collectstatic collects static files to. The static root should not be under version control.
As an aside, you are loading the static tag in your template but not using it. You could change it to:
{% load static %}
...
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
Move your static folder under the base dir
chatsys
migrations
templates
etc.
static
css
style.css
I want to put the static files in the folder outside any apps. This is the file structure.
mysite
|---assets
|---css
|---js
|---images
|---companyinfo
|---views.py
|---models.py
|---templates
|---index.html
|---recruit.html
|--- ....
|---mysite
|---urls.py
|---settings.py
|--- ....
|---manage.py
|--- ....
settings.py looks like the following.
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/assets/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "assets"),
]
This is how I call the static files in the template files,
<link href="assets/css/theme-style.css" rel="stylesheet">
urls.py under mysite folder looks like the following. I did not define a urls.py under companyinfo folder.
from companyinfo import views as civiews
urlpatterns = [
url(r'^$', civiews.index, name='index'),
url(r'^recruit/$', civiews.recruit, name='recruit'),
]
views.py is just two functions that render the html pages. The urls for the static files are the same in the two html pages.
The problem is the index page loads well with all the css and js files, but the recruit page does not find those files. What might the problem be? I'm using Django1.10.
Thanks in advance!
Please change this:
<link href="assets/css/theme-style.css" rel="stylesheet">
to this:
<link href="{% url 'css/theme-style.css %}" rel="stylesheet">
I have a template that renders an image:
{% load staticfiles %}
<img src="{% static "img/logo.png" %}" alt="My image"/>
The image link is broken, but it points to:
localhost/static/img/logo.png
What are values I need to set for static_root, static_url, and STATICFILES_DIRS to get this image to show up correctly?
This is my directory structure:
myprojectname (top level)
--- myprojectname
--- --- myproectname
--- --- --- settings
--- --- --- --- base.py (setting.py)
--- --- static
--- --- --- img
This is my static configuration in settings:
STATIC_ROOT = '/Users/myuser/myprojectname/myprojectname'
STATIC_URL = '/static/'
STATICFILES_DIRS = (
#normpath(join(SITE_ROOT, 'static')),
os.path.join(BASE_DIR, "static"),
'/Users/myuser/myprojectname/myprojectname/static',
)
This is what it shows:
I have already done a collectstatic and this doesn't work.
Static files can be confusing in Django. I'll try to explain as simply as possible...
STATIC_ROOT
This is the directory that you should serve static files from in production.
STATICFILES_DIRS
This is the directory that you should serve static files from in development.
STATIC_ROOT and STATICFILES_DIRS cannot point to the same directory.
Django is a highly modular framework. Some application modules contain their own templates, css, images and JavaScript. Django admin is one such app. Django extends this modularity to applications you create by using different directories for static files in development versus production.
When DEBUG = True and you have included django.core.staticfiles in your INSTALLED_APPS, Django will serve the files located in the STATICFILES_DIRS tuple using the STATIC_URL path as the starting point.
In production this responsibility should be given to Nginx, Apache, CloudFront, etc. When DEBUG = False, Django will not automatically serve any static files.
When you run:
$ python manage.py collectstatic
The files specified in the STATICFILES_DIRS are copied into the STATIC_ROOT to be deployed.
So, to answer your question, I would do the following:
Create another directory to store your static files in development and add that path to your STATICFILES_DIRS. I usually call this folder "static-assets". It can reside at the same level as your existing "static" directory.
Set STATIC_ROOT to the path to your existing "static" directory.
If you look closely at the path that's returning a 404 in your screenshot, the image path is specified as: /static/img/logo.png, but your directory for images is: /static/image/
So double-check your image path to make sure you're pointing to the right directory.
Make folder "staticfiles" in root of your project where settings.py exists
In staticfiles you can go this way..
css
js
images
In settings.py
STATIC_ROOT = os.path.join(PROJECT_DIR,'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(PROJECT_DIR,'staticfiles'), # if your static files folder is named "staticfiles"
)
TEMPLATE_DIRS = (
os.path.join(PROJECT_DIR,'template'), # if your static files folder is named "template"
)
In base.html
<link rel="stylesheet" type="text/css" href="{% static 'css/demo.css' %}" />
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
In other template files in which you include base.html
{% extends "base.html" %}
{% load static %}
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<div id="yourID" class="yourClass">
<img src="{% static "images/something.gif" %}" alt="something" >
</div>
If you are in development mode then define just one line:
STATICFILES_DIRS = ( os.path.join('static'), )
You don't need to define STATIC_ROOT = '/Users/myuser/myprojectname/myprojectname'
OR
STATICFILES_DIRS as BASE_DIR
So, working solution is :
STATIC_URL = '/static/'
STATICFILES_DIRS = ( os.path.join('static'), )
actually I too was struggling with the same problem , it got resolved now , check javapoint documentation once its really good , another method that worked for me is change the path of static folder i.e place the static folder inside the app folder that u have created (in my case , the static folder is inside the first_app folder) . it should work . after that I relocated my folders back to where it was and to my surprise , it worked again!. sometimes it may be the fault of browser . I tried my level best to explain as I am a beginner in Django .
If you want to save static files in Django you will need to do the following
in settings.py file you will have something like this `
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'my_project/static') # where I want to host the static files i.e img, js & css
]
depends on how you have structure you files but you will need to have something like this in your urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
path('', include('appfront.urls')),
path('admin/', admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Final your template will have something like this Note the usage of static tag
{% load static %}
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div class="container">
<a class="navbar-brand" href="{% url 'index' %}">
<img src="{% static 'img/logo.png' %}" class="logo" alt="">
</a>
'''