I'm new to Django, and facing issues rendering bootstrap on a django page.
This is my base html,
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Dropbox Web App Prototype</title>
<!-- Bootstrap -->
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
The static file is at the same level as the project directory and has the following structure,
I've also added the following line, to my settings.py file
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
The CSS is not rendering on the home page. Any help appreciated.
You are using an older syntax that's probably doesn't match your version of Django.
In your html file change:
{% load staticfiles %}
to
{% load static %}
Also, replace the single quote with a double quote :
"{% static 'bootstrap/css/bootstrap.min.css' %}"
to:
"{% static "bootstrap/css/bootstrap.min.css" %}"
you can see the exact syntax of dealing with static files here
BASE_DIR is defined by default to:
BASE_DIR = os.path.dirname(os.path.dirname(__file__))
Here __file__ is actually settings.py, so BASE_DIR is on the parent directory, the one that contains manage.py.
It seems your static folder is on another level, so just move it to the same level as manage.py and it should work.
CDN:
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
Static
In urls for django runserver:
if settings.DEBUG:
urlpatterns += [url(r'^static/(?P<path>.*)$', views.serve),]
When running from the webserver, you need to config an alias. Nginx example:
location /static {
alias /home/username/mysite/static;}
settings.py:
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)
In the html
replace this
<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
with this
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
and check this is in the settings.
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
just define additioaly static url in your settings as follow somewhere on the bottom:
STATIC_URL = '/static/'
and check again if your bootstrap is served
can you paste your BASE_DIR ? Can you set it to: BASE_DIR to BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
Related
My project name resume
I wanted to add bootstrap to my project
first I copy the assets files to my project sub folder called resume => static assests files
- resume->resume/static
Then I add following settings in setting .py
STATIC_DIR = BASE_DIR / 'resume/static'
STATIC_ROOT = BASE_DIR / 'static'
STATIC_URL = '/static/'
STATICFILES_DIRS = [
STATIC_DIR,
]
after that I tired python manage.py collectstatic
and got a new directory
new static directory
after that I tired to add tag {% load static %} and alter the paths into {% static 'path' %}
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>MyResume Bootstrap Template - Index</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="{% static 'img/favicon.png' %}" rel="icon">
<link href="{% static 'img/apple-touch-icon.png' %}" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="{% static 'vendor/aos/aos.css' %}" rel="stylesheet">
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/bootstrap-icons/bootstrap-icons.css' %}" rel="stylesheet">
<link href="{% static 'vendor/boxicons/css/boxicons.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/glightbox/css/glightbox.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/swiper/swiper-bundle.min.css' %}" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="{% static 'css/style.css' %}" rel="stylesheet">
indext.html
still my website is not showing up
website image
please help
browser Console error
main.js:2 Uncaught TypeError: Cannot set property 'innerHTML' of null
at main.js:2
DevTools failed to load SourceMap: Could not load content for http://127.0.0.1:8000/static/vendor/swiper/swiper-bundle.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
You have to put {% load static %} at the first line.
ok the problem was with Chrome browser. there was no error in the code.
When I open the server with mozilla firefox there were no errors and website running fine
problem was with chrom devtool settings.
Problem: As the title says I am building a django project the base.html extended to homepage.html and works fine, static images appear, but home.css does not works anywhere.
Update
I have switched in the base.html
from this <link rel="stylesheet" href="{% static 'css/home.css' %}">
to this <link href="css/home.css" rel="stylesheet" />
than I have also tried this: <link rel="stylesheet" type="text/css" href="{% static 'css/home.css' %}" />
It deletes a formatting on -s that was caused by another previously used .css that has been deleted since but the formatting sticked on.
I have called this css property thickkk{color: red;}
many places in both base.html and home.html and it still not working.
I have also get the following error message if I inspect the site with/F12/consol/ 127.0.0.1/:1 Refused to apply style from 'http://127.0.0.1:8000/css/home.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Update ERROR message
Refused to apply style from 'http://127.0.0.1:8000/stacic/css/home.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Properties: Python 3.7, Bootstrap 4
settings.py
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'baseprojectfolder/static/')]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
base.html
I have created a base.html that hold the navbar and the footer.
This also has the CSS imported from a static css and also from bootstrap
It finds the static files because it imports the images that are appearing both here and in the home page
<!doctype html>
<html lang="en">
{% load static %}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="xz">
<meta name="author" content="xz">
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
<title>Click Helps - BE PART OF THE NEW CREATION</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/carousel/">
<!-- Bootstrap core CSS -->
<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/home.css' %}">
</head>
....
<!-- Bootstrap core JavaScript ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<!-- I have placed in the followring 3 line from bootstrap to make JS work -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
home.html
I have used the center CSS property I have created
{% extends 'applicaonfolderofmine/templates/base.html' %}
{% load static %}
{% block content %}
<main>
<body>
<div class="container">
<h1 id="about" class="center" >About</h1>
...
home.css
it can be found in "django-project/certainapplication/static/css/home.css"
.center {
margin: auto;
width: 60%;
padding: 10px;
}
Error messages in terminal
Not Found: /docs/4.3/dist/css/bootstrap.min.css
[22/Feb/2020 15:55:26] "GET /docs/4.3/dist/css/bootstrap.min.css HTTP/1.1" 404 2494
Not Found: /docs/4.3/dist/js/bootstrap.bundle.min.js
[22/Feb/2020 16:24:29] "GET /docs/4.3/dist/js/bootstrap.bundle.min.js HTTP/1.1" 404 2509
Not Found: /docs/4.3/dist/js/bootstrap.bundle.min.js
[22/Feb/2020 16:24:29] "GET /docs/4.3/dist/js/bootstrap.bundle.min.js HTTP/1.1" 404 2509
I have read the following articles but they haven't answered my question:
css for base template in django
Adding css file after all extensions css files
Django UserProfile extension
Background from CSS not working in Base.html
Django mptt, extends "base.html"
{ % extends parent _ template|default:"base.html" % } vs {% extends "base.html" %} in Django?
Django templates extending and CSS
How does Django's extends work?
As you have STATICFILES_DIRS remove STATIC_ROOT then type python manage.py collectstatic, then yes, then run your server again.
The server should respond with the correct MIME Type for JSONP application/javascript and your request should tell jQuery you are loading JSONP dataType: 'jsonp'
Please see this answer for further details ! You can also have a look a this one as it explains why loading .js file with text/plain won't work.
Disable Chrome strict MIME type checking
I have the following structure in my Django project. As you can see, there is one app called "blog" as well as the main app that is eponymous with the project itself.
The problem I am having has to do with serving static files from the static directory of the main project. The blog app has its own static directory and those files are served properly (when the pertinent URL routes are traversed).
Could someone tell me what I am doing wrong? Also, what is the best practice of serving static files when dealing with multiple apps? Is it prudent to dump all styles and scripts into a common static directory in the root of the project or is it better to keep things entirely separated from app to app?
settings.py
import os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR, "..", "django_by_example_blog", "static")
STATIC_URL = '/static/'
urls.py
urlpatterns = [
url(r'^$', TemplateView.as_view(template_name="base.html")),
url(r'^admin/', include(admin.site.urls)),
url(r'^blog/', include('blog.urls', namespace='blog', app_name='blog')),
]
base.html
{% 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>Home | Triangle</title>
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">
<link href="{% static "css/font-awesome.min.css" %}" rel="stylesheet">
<link href="{% static "css/animate.min.css" %}" rel="stylesheet">
<link href="{% static "css/lightbox.css" %}" rel="stylesheet">
<link href="{% static "css/main.css" %}" rel="stylesheet">
<link href="{% static "css/responsive.css" %}" rel="stylesheet">
<!--[if lt IE 9]>
<script src="{% static "js/html5shiv.js" %}></script>
<script src="{% static "js/respond.min.js" %}"></script>
<![endif]-->
<link rel="shortcut icon" href="{% static "images/ico/favicon.ico" %}">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{% static "images/ico/apple-touch-icon-144-precomposed.png" %}">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{% static "images/ico/apple-touch-icon-114-precomposed.png" %}">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{% static "images/ico/apple-touch-icon-72-precomposed.png" %}">
<link rel="apple-touch-icon-precomposed" href="{% static "images/ico/apple-touch-icon-57-precomposed.png" %}">
</head><!--/head-->
<body>
STATIC_ROOT specifies the folder into which all static files will be dumped when you run the collectstatic command
python manage.py collectstatic
You seem to have specified one of your app's static folder as the static_root.
It would be preferable to give another folder for holding all your static files.
STATIC_ROOT = os.path.join(BASE_DIR, "static")
when you run the collectstatic command it would collect all your static files and place them into the STATIC_ROOT folder.
Although, while running in DEBUG=True you needn't worry about any of this.
Django will serve all the static content (including from within individual apps), but in a production environment this is not recommended and it would be the job of the web server to serve static content.
EDIT:
You also need to specify in your base urls.py
from django.conf.urls.static import static
from django.conf import settings
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
"Dumping all styles and scripts into a common static directory" is exactly what the collectstatic command does. You should run that, and configure your server to serve the files from there.
First though you should set your STATIC_ROOT setting to point to that common directory, rather than inside your app.
I'm working on a Dajngo project and I want to include a landing page to use it for home page, I was trying to use it on my own and guiding me in tutorials but I could not get it to load the CSS style. I am new using this framework (bootstrap), could anyone help me identify my error to load the CSS style please?
Files:
setting.py
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'crm', #app's name
'bootstrap3',
)
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR,'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
LOGIN_REDIRECT_URL = '/'
mysite\urls.py
from django.conf.urls import include, url
from django.contrib import admin
from django.views.generic.base import RedirectView#TemplateView
from django.core.urlresolvers import reverse
from django.shortcuts import redirect
from crm import views
admin.autodiscover()
urlpatterns = [
url(r'^$', views.HomePageView.as_view()),
url(r'^admin/', include(admin.site.urls)),
url(r'', include('crm.urls')),
]
crm\urls.py
from django.conf.urls import url, include
from django.contrib import admin
from crm import views
urlpatterns = [
url(r'^$', views.HomePageView.as_view()),
url(r'^admin/', admin.site.urls),
url(r'^', include('crm.urls')),
]
crm\views.py
from django.shortcuts import render
from django.views.generic import TemplateView
# Create your views here.
class HomePageView(TemplateView):
def get(self, request, **kwargs):
return render(request, 'crm/index.html', context=None)
bootstrap\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Freelancer - Start Bootstrap Theme</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/freelancer.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
In my crm folder I have 2 folders, static and templates folders and inside of them CSS files and HTML files respectively. I want to use this template Freelancer. Any comment is of help, thanks.
Try changing your index.html and use {% static %} tag for including your static files:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Freelancer - Start Bootstrap Theme</title>
<!-- Bootstrap Core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Theme CSS -->
<link href="{% static 'css/freelancer.min.css' %}" rel="stylesheet">
<!-- Custom Fonts -->
<link href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
In your settings.py include
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
after your definition of STATC_URL so that Django knows to look in the .../static directory where your index.html and css are located. Make sure that your BASE_DIR is pointing to the correct directory that your static files are located in.
Also, in index.html, you should include {% load staticfiles %} at the top of your index.py and also use <link rel="stylesheet" href="{% static 'css/xxx.css' %}"> for each instance of the boostrap core, theme and custom fonts (so all parts of code that you follow the format above).
A good online django tutorial that goes over static files more in depth can be found here.
The Django docs have a good tutorial for writing your first app. Here is the page that explains how to load the css.
The tags that load your css have the wrong href. They should be loaded with the Django static tag. First make sure you have all the files in your static folder. The one specified in STATIC_ROOT, so create the folder <YOUR_BASE_DIR>/static/css/ and copy both bootstrap.min.css and freelancer.min.css there. To load them just change your template to use the correct path.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap Core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Theme CSS -->
<link href="{% static 'css/freelancer.min.css' %}" rel="stylesheet">
you can download bootstrap.css and save in your static file like this :
in setting.py :
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
folders of your project :
mysite/
mysite1/
setting.py
mysite2/
views.py
urls.py
static/
css/
bootstrap.css
#folders name is cutom for me beacuse i dont khow you project folders
at top of your template use :
{% load staticfiles %}
and then in tag of your template :
<link rel="stylesheet" href="{% static "css/bootstrap.css" %}">
have a happy codeing...
I currently have this template
index.html
<!DOCTYPE html>
{% load staticfiles %} <!-- New line -->
<html>
<head>
<title>GingerBites</title>
<link href='//fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Dancing+Script" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/styles.css"/>
</head>
<body>
</body>
</html>
settings.py
ACTUAL_DIR = os.path.dirname(__file__)
STATIC_PATH = os.path.join(ACTUAL_DIR, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = (
STATIC_PATH,
)
For some reason when running my app locally my css is served correctly, but on page refresh my css remains the same after I save changes and refresh my page. I think something is caching my css. Although when I remove the link to my css, all my css styling disappears. Does anyone know how I can change this?
Or why this might be happening?
Ok, turns out the issue is that static files should be called like so:
{% static /path/to/static %}
So in your case:
<link rel="stylesheet" type="text/css" href="{% static css/styles.css %}"/>
Django documents it here.