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.
Related
In my template, i use load static to load static files:
{% load static %}
<link rel="stylesheet" href="{% static 'css/default.min.css?t=227' %}" />
but in the browser html changed to this messy code:
<link rel="stylesheet" href="/static/css/default.min.css%3Ft%3D227">
Put the query args outside the template tag.
"{% static 'css/default.min.css' %}?t=227"
Perhaps this is a laughable problem but am really lost. It was working fine until I ported the project to a new laptop. Here is my filesystem structure:
bill
==>bill (contains settings.py)
==>static
==>welcome
==>manage.py
Now in static i have my directory, i have folder plugins, js and css. The following are in my base.html template:
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<title>{% block ownername %}{% endblock %} {% block title %}{% endblock %}</title>
<script src="{% static 'plugins/jQuery/jquery-2.2.3.min.js' %}"></script>
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'plugins/datepicker/datepicker3.css' %}">
**<link rel="stylesheet" href="{% static 'plugins/lobibox/lobibox.min.css' %}">**
<script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>
**<script src="{% static 'plugins/moments/moment.min.js' %}"></script>**
It loads some resources while it gives 404 for some other resources that are there and working in my old laptop (the bold ones such as moment.min.js and css files). The configuration is the same since I used virtual environment to start it.
What am I missing please? I am really lost on what it is doing.
No question is laughable :)
To begin with, change {% load staticfiles %} to {% load static %}.
Then make sure you've got the correct settings in terms of static files. A good setup would look like this:
STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATIC_URL = '/static/'
If you are running your app without DEBUG=True, then also run python manage.py collectstatic --no-input from your terminal - that should do the trick to serve static assets in prod environment.
Try it and let us know how it went.
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' %}"/>
looking to specify the themed css for bootstrap. can't get bootstrap_find_resource to look to my locally placed css files. Seems to continue to pull from the /site-packages/flask_bootstrap location.
the current default for bootstrap css is pointing here
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
and this is the macro generating the url
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
bootstrap_find_resource code pointed me to the BOOTSTRAP_SERVE_LOCAL config. setting it to true gave me a local endpoint. which created the local endpoint
<link href="/static/bootstrap/css/bootstrap.min.css?bootstrap=3.3.5.7" rel="stylesheet">
so I placed the bootstrap css in this local app static folder /static/bootstrap/css/. and i verified that flask's app.static_folder is actually mapped to where I put the new files. still pulling from site packages and ignores my local static files.
bootstrap_find_resource is for loading static files distributed with Flask-Bootstrap. For your own files, use url_for.
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='locally/placed.css') }}">
{% endblock %}
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.