I created added a dashboard to my project it is using bootstrap files which I am trying to load but aren't loading.
I am trying to load static file using {% static '' %} and it's now picking up the files. You can ask for further code.
Here is the code of the template
<link href=" {%static '../static/Dashboard/assets/css/bootstrap.min.css'%}" rel="stylesheet" />
<link href="{%static '../static/Dashboard/assets/css/bootstrap.min.css '%}" rel="stylesheet"/>
<link href="{% static '../static/Dashboard/assets/css/paper-dashboard.css' %}" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
<link href=" {%static '../static/Dashboard/assets/css/themify-icons.css' %}" rel="stylesheet">
Setting in setting.py
STATICFILES_DIR=[
os.path.join(BASE_DIR, "static"),
'final_project/static',
]
STATIC_URL = '/static/'
In main folder of your project, create a folder named static. then in this folder create two other folders, named static_root and static_dirs
now change the settings.py file like this:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static', 'static_root')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'static', 'static_dirs'),
)
then add static files in static/static_dirs directory.
now you can use static files in your templates like this:
<link href="{% static 'Dashboard/assets/css/paper-dashboard.css' %}" rel="stylesheet"/>
your template should be like this:
<!DOCTYPE html>
{% load staticfiles %}
<head>
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
</head>
</html>
css/bootstrap.min.css is in final_project/static directory
Do not forget add {% load staticfiles %}
in settings.py you define static path, then this way is incorrect:
<link href="{% static '../static/Dashboard/assets/css/paper-dashboard.css' %}" rel="stylesheet"/>
correct:
<link href="{% static 'Dashboard/assets/css/paper-dashboard.css' %}" rel="stylesheet"/>
Related
jquery does not load - Page not found (404)
base.html
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="{% static 'bootstrap-5.0.0/css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<!-- jQuery -->
<script src="{% static 'jquery/jquery.js' %}"></script>
</head>
setting.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'ServiceCRM3/static'),]
static folder created
the script is in the path static / jquery / jquery.js
bootstrap picks up ok in the same folder
the server restarted
what's wrong?
I just created a django application, and I have a problem that I cannot resolve. I have 1 css file 'root.css' that I would like to link with my html database but it's like this /static/root.css was completely ignored. I arrive mostly at link /static/home/home.css on my home app.
This is not work (/templates/base.html) :
{% load static %}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="stylesheet" type="text/css" ref="{% static 'root.css' %}"> **// Not work**
{% block css %}
{% endblock %}
<title>Learned</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
This is work (/home/templates.home.html) :
{% block css %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'home/home.css' %}">
{% endblock %}
In my settings.py :
STATIC_URL = 'static/'
STATICFILES_DIRS = [
BASE_DIR / "static"
]
OMG, I just understood the error! I just made a typo, I'm stupid I put "ref" instead of "href" in my first link. It sure works better like this: D
Are you running this with Debug = False (production)? If so you need something else to serve the static files , check https://docs.djangoproject.com/en/3.1/howto/static-files/
So I've seen a lot of tutorials here explaining what to do, but no matter what I change the static files won't seem to load. This is what my files are looking like atm
settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [os.path.join(PROJECT_ROOT, "static"),'']
job_app/urls.py
urlpatterns = [
path('', main, name='index'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>JobPortal - Free Bootstrap 4 Template by Colorlib</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% load static %}
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/open-iconic-bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/animate.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'css/owl.theme.default.min.css' %}">
<link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">
<link rel="stylesheet" href="{% static 'css/aos.css' %}">
<link rel="stylesheet" href="{% static 'css/ionicons.min.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-datepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/jquery.timepicker.css' %}">
<link rel="stylesheet" href="{% static 'css/flaticon.css' %}">
<link rel="stylesheet" href="{% static 'css/icomoon.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
jobber/urls.py
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('job_app.urls'))
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Below configs worked for me. Django only needs two things.
What should be the base static URL (STATIC_URL)
And where to search static files (STATICFILES_DIRS)
Remove static urlpatterns from urls.py. Only define STATIC_URL and STATICFILES_DIRS in settings.py and remove STATIC_ROOT.
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
I am creating a web app using Django. I have a html template as follows:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
I am using this template to create other html files using
{% extends 'document.html' %}
{% block content %} {% endblock %}
for the moment I am referring to all css and js files in the original document.html. how can I refer to different js and css files in the new templates only when necessary?
thanks
Put this in your setting.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.dirname(BASE_DIR) + '/staticfiles/'
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)
create static folder in created app and put there your css, js and access via this
<link href="{{ static('/app_name/css/reset.css') }}" rel="stylesheet">
<script type="text/javascript" src="{{ static('/app_name/js/jquery-1.11.3.js') }}"></script>
now it's working. I made just few changes
{% extends 'document.html' %}
{% load staticfiles %}
{% block content %}
now I was able to include the js or css files I need it in the newly created template as follow for example
<script src="{% static 'vendors/js/tableexport.min.js' %}"></script>
I'm developing with django first time. I have read what is : STATIC_ROOT / STATICFILES_DIR / STATIC_URL, I know what purpose for each of them.
I have a problem which I keep getting 404 on browser trying to get the css files.
setting.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_URL = '/static/'
STATIC_ROOT = '%s/online_static/' % (BASE_DIR)
STATICFILES_DIRS = ['%s/bootstrap/' % (PROJECT_DIR),]
index.html
<head>
{% load staticfiles %}
<meta charset="UTF-8">
<title>{% block title%}Default title{% endblock title %}</title>
<meta name="description" content="{% block metadescription%}{% endblock metadescription %}">
<meta name="keywords" content="{% block metakeywords%}{% endblock metakeywords %}">
<meta name="author" content="alme7airbi9357#gmail.com">
<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" type="text/css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static 'css/shop-homepage.css' %}" rel="stylesheet" type="text/css">
<!-- Bootstrap core JavaScript -->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
</head>
what I did
after setting this params I have run the python manage.py collectstatic
Note : DEBUG = False
As per the Django Docs, follow the configuration steps for static : https://docs.djangoproject.com/en/1.11/howto/static-files/