I thought it would be easier to download bootstrap and adjust it to my code, instead of messing about a cdn. So I downloaded bootstrap and my directory looks like this.
My static directory is properly (I think) setup since my style.css and maps.js are working fine.
In my base.html I reference the files with:
The old way <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel='stylesheet' type='text/css' href="{% static 'style.css' %}" />
<script src="{% static 'maps.js' %}"></script>
<script src="{% static 'bootstrap-3.3.7' %}"></script>
The static boostrap-3.3.7 is not working. The cdn worked however. My question is how would my static import look to have this setup with the bootstrap directory properly work?
I'm sorry if it's a stupid question.
You are trying to include a complete directory into your HTML, which is impossible. You should adjust the path in {% static 'bootstrap-3.3.7' %} to the location of the actual file you need.
<script src="{% static 'bootstrap-3.3.7/dist/js/boostrap.min.js' %}"></script>
Note, don't forget to add the css file too, you need to include them both individually. Which will probably be:
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap-3.3.7/dist/css/boostrap.min.css' %}"/>
Related
I am trying to link a css file to my html inside a django project but it does not seem to be linking.
base.html
<head>
<title>Document</title>
{% load static %}
<link rel="stylesheet" href="{% static 'myApp/styles.css' %}">
</head>
my folder structure
You static file(styles.css) should be in a static directory created in the root level.
I have index.html file in template file and I have js, css, image, files in my static file. I am writing the codes correctly, but the site does not appear properly. Animations, images and text are not in the correct place. (In fact, the logo of the project I used to work with appears in this project. Both are called "logo.png", I think pycharm is confusing the codes. But I opened my project with Visual Studio Code, and the logo of my old project appeared again. Why is this happening? Do I need to delete something?)
settings.py
STATIC_URL = 'static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
index.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<!-- Basic -->
<head>
<link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" type="image/x-icon">
<link rel="apple-touch-icon" href="{% static 'images/apple-touch-icon.png' %}">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<!-- Site CSS -->
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<!-- Responsive CSS -->
<link rel="stylesheet" href="{% static 'css/responsive.css' %}">
<!-- Custom CSS -->
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
<!--[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>
<body>
<!-- ALL JS FILES -->
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<!-- ALL PLUGINS -->
<script src="{% static 'js/jquery.superslides.min.js' %}"></script>
<script src="{% static 'js/bootstrap-select.js' %}"></script>
<script src="{% static 'js/inewstickerjs' %}"></script>
<script src="{% static 'js/bootsnav.js.' %}"></script>
<script src="{% static 'js/images-loded.min.js' %}"></script>
<script src="{% static 'js/isotope.min.js' %}"></script>
<script src="{% static 'js/owl.carousel.min.js' %}"></script>
<script src="{% static 'js/baguetteBox.min.js' %}"></script>
<script src="{% static 'js/form-validator.min.js' %}"></script>
<script src="{% static 'js/contact-form-script.js' %}"></script>
<script src="{% static 'js/custom.js' %}"></script>
</body>
</html>
I shared important parts of HTML codes
This is what the site looks like
But it should look like this
I hope I was able to explain what my problem was. I will be glad if you help me
The problem seems to be that you might not be reseting the cache. Browsers store caches to make the website run faster, so even though you made changes to the static files(like CSS, js or images), your browser uses the old CSS which is cached. One way to fix this issue during development is to hard refresh, ctrl + shift + r to clear CSS related caches and crtl + F5 for js related files, alternatively you can disable cache in your browser. In development we use versioning to counter this issue. I hope this resolves your issue.
I recently started a basic django project, i want to load an already made default template. This template has an assets folder with all the CSS, JS files etc
This folder, is later called in the templates, so for example i can have:
<base href="../">
// And a lot of static files being called like this:
<link href="./assets/scrollbar/css/scrollbar.css" rel="stylesheet" type="text/css" />
<link href="./assets/somecss.css" rel="stylesheet" type="text/css" />
// And so on..
<script src="./assets/somejsfile.js" type="text/javascript"></script>
The problem with this is that none of the files in the assets are being retrieved. I know that the problem depends on where i put the assets folder, but i don't know how to solve that. I tried to add it to different parts of my project's structure but it doesn't work, since i only get a lot of errors like this:
http://127.0.0.1:8000/assets/somecss.css net::ERR_ABORTED 404 (Not Found)
Here is my settings.py:
STATIC_URL = '/static/'
In this static folder, there is a basic css file i tested before trying this.
And here is the structure of my project:
//MAIN FOLDER
migrations
ASSETS
templates -> INDEX.HTML (where the assets folder is called)
views, forms etc
Have you read the documentation on this?
It is recommended to use the static template tag to make the filesystem location of your static files independent from your URLs. Using this tag, your URLs would have to be defined like this:
{% load static %}
<link href="{% static 'assets/scrollbar/css/scrollbar.css' %}"
rel="stylesheet" type="text/css" />
<link href="{% static 'assets/somecss.css' %}"
rel="stylesheet" type="text/css" />
You also need to define the setting STATICFILES_DIRS because it looks like your static assets are not inside a default location inside an app of your project.
I am trying to install a new template on my Mezzanine website. My Mezzanine is on version 4.2.2 and Django on 1.9.7 . Here is what I did:
With
DEBUG = true
I created a new app call "template_app" and loaded in settings.py:
INSTALLED_APPS = (
"template_app",
...
)
I created the directory structure, and copied over the default mezzanine files (base, index...) like:
template_app
static
css
img
js
templates
base.html
index.html
includes
footer_scripts.html
I downloaded a bootstrap template and replaced the above css js img folder and index.html with the ones found in the template. (The template I used: https://startbootstrap.com/template-overviews/business-casual/ ) Then link the css and javascript in base.html:
(All css)
{% compress css %}
<link rel="stylesheet" href="{% static "css/bootstrap.css" %}">
<link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}">
<link rel="stylesheet" href="{% static "css/business-casual.css" %}">
<link rel="stylesheet" href="{% static "css/mezzanine.css" %}">
<link rel="stylesheet" href="{% static "css/bootstrap-theme.css" %}">
(All js)
{% compress js %}
<script src="{% static "mezzanine/js/"|add:settings.JQUERY_FILENAME %}"></script>
<script src="{% static "js/bootstrap.js" %}"></script>
<script src="{% static "js/bootstrap.min.js" %}"></script>
<script src="{% static "js/jquery.js" %}"></script>
<script src="{% static "js/bootstrap-extras.js" %}"></script>
I'm not sure where I did wrong, or what I am missing. My website can't find the css and javascript file in the app:
Not Found: /css/bootstrap.min.css/
Not Found: /css/business-casual.css/
[07/Jan/2017 08:12:30] "GET /css/bootstrap.min.css/ HTTP/1.1" 404 1716
[07/Jan/2017 08:12:30] "GET /css/business-casual.css/ HTTP/1.1" 404 1720
Not Found: /js/jquery.js/
...
I tried modify urls.py and other parts of setting.py based on other's solutions, but they don't seems to be working. What am I doing wrong?
-- added 2017-01-09 --
Checking with findstatic linked me to the right path. Except bootstrap.css which linked me both the css file in my downloaded template and the mezzanine template.
I had the same issue with static files, but it did require that I set the "STATIC_ROOT" setting since my paths were off course.
Since I was using a custom theme I had to change the "STATIC_ROOT" path in settings.py to point to my app static files rather than it pointing to the default PROJECT_ROOT.
So I added something like this...
## Custom Theme Path (For Static Files)
THEME_URL = "template_app/"
And Changed "STATIC_ROOT" to...
STATIC_URL = "/static/"
STATIC_ROOT = os.path.join(PROJECT_ROOT, THEME_URL, STATIC_URL.strip("/"))
Make sure you restart the test server again (manually if need be), the autorestart doesnt recognise changes to the static/ directories.
I found this question on Google while looking for a solution for the same issue. I managed to work around with these steps:
First of all, double check that template_app is listed on INSTALLED_APPS above all Mezzanine apps;
Re-run findstatic;
If you still don't find it, run collectstatic. While findstatic wouldn't find the theme I wanted (but would find other themes), collectstatic managed to find it and link its static files.
I have a django page and I add various js dependencies on multiple pages. For example, on page 1 and 2 I have table that I want to sort. So I include following code in both pages.
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-sortable.css' %}">
<script type="text/javascript" src="{% static 'js/bootstrap-sortable.js' %}"></script>
Let's say, on page 3 and 4 I have nvd3 graphs. So I include following code:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.js"></script>
<link href="{% static 'js/nvd3-master/build/nv.d3.css' %}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-sortable.css' %}">
If I need to edit src url of these dependencies, I have to edit all pages containing them separately.
I would like to define variables on js and css static files, so I do not have to edit them multiple times, but just once.
Something like this:
bootstrap_sortable_css = """<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-sortable.css' %}">"""
bootstrap_sortable_js = """<script type="text/javascript" src="{% static 'js/bootstrap-sortable.js' %}"></script>"""
And then just print it in my template:
<html>
<head>
{{bootstrap_sortable_css}}
</head>
<body>
content
{{bootstrap_sortable_js}}
</body>
</html>
Is there any standard for this I did miss?
You might want to use block. Block is used for template inheritance. So, you can have 1 root template file, then all your pages just need to inherit the root template.
You can define A css and js block like this.
<html>
<head>
{% block css %}
{% endblock css %}
</head>
<body>
content
{% block js %}
{% endblock js %}
</body>
</html>
Then, you can override the block on your page template based on your page needs.