First off, I realize Django 1.8 is outdated but I'm required to learn it for a project. I got through the first five parts without any issues but when I try to link the stylesheet in part 6, my stylesheet isn't loading (there's no change in the page).
I've gone over the code several times and checked the namespacing of each folder and it should be working but I can't seem to find the problem. If anyone has gone through this tutorial and could shed some light on the issue, I'd really appreciate it.
Here's the code in mysite/polls/templates/polls/index.html:
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css'
%}" />
{% if latest_question_list %}
<ul>
{% for question in latest_question_list %}
<li><a href="{% url 'polls:detail' question.id %}">{{
question.question_t\
ext }}</a></li>
{% endfor %}
</ul>
{% else %}
<p>No polls are available.</p>
{% endif %}
And here's my stylesheet located at mysite/polls/static/polls/style.css:
li a {
color: green;
}
body {
background: white url("images/background.gif") no-repeat right
bottom;
}
For anyone with the same issue, restarting the Django server fixed the problem.
Related
Hey almighty Stackoverflow,
i'm pretty new to Django and i'm required to write an HTML-Email Template, which includes Social-Media Icons that are also Hyperlinks. It all works fine in Preview, but when send by Email only the "Broken-Image"-icons appear.
The Images are located in the static file of the Django Module and also in the static.dist directory of the main application. A few weeks ago, it worked, but after some pause and new testing yesterday, the images are broken.
{% static 'ner_mail/YouTube.png' as yt_icon %}
{% with 'target="blank" href="https://www.youtube.com/URL"'|safe as a_attr %}
{% blocktrans %}
<a {{ a_attr }} > <img src="{{ yt_icon }}" alt="" style="alignment: left;vertical-align:middle; width: 30px; padding-right: 5px" ></a>
<a {{ a_attr }}> Social Media {% endblocktrans %}
{% endwith %}</li>
Can somebody maybe help me? Thank you in advance for any help!
Best regards,
The static template tag gives a relative url, hence when you send that in an email, the user's browser assumes it to be relative from the current website the user is on (gmail.com if suppose the user opened their email there). Hence you want to render an absolute url. To do this you can use request.scheme [Django docs] and request.get_host [Django docs]:
<img src="{{ request.scheme }}://{{ request.get_host }}{{ yt_icon }}" ...>
I would like to adjust default bootstrap class formatting within jinja template. The only thing, what I want to do, is to change the color of the h1 element. But unfortunately, it is still black.
I am using flask and render_template module.
I have following code in template:
{% extends "bootstrap/base.html" %}
{% block head %}
{{ super() }}
<link rel="stylesheet" type="text/css" href="bootstrap_adjust.css">
{% endblock %}
{% block content %}
<div class="container">
<div class="page-header">
<h1>Hello, Vaclav!</h1>
</div>
</div>
{% endblock %}
boostrap_adjust.css looks like this:
h1{
color:blue;
}
Thank you for any advice!
Vaclav
I ll try to answer the question "how to adjust an element using a .css file instead of styling it directly?"
Go in your base.html file, i.e. the file you extend from, and in the header tag, at the end of all the other stylesheets create a Jinja2 block like so
{% block stylesheets %}
{% endblock stylesheets %}
Second step would be to call this block in your child templates and pass your .css files in there instead of passing it in the head block.
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="bootstrap_adjust.css">
{% endblock stylesheets %}
Give it a try and let us know!
I finally found working solution here:
https://stackoverflow.com/questions/34664156/flask-bootstrap-custom-theme
So in my case this works:
{% block styles %}
{{ super() }}
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='bootstrap_adjust.css')}}">
{% endblock %}
.css file is placed in the folder static. But be careful, static is not part of the path in filename parameter, because url_for('static') looks automatically in this folder.
Thank you all for your willing to help!
Adding a custom CSS file:
{% block styles %}
{{super()}}
<link rel="stylesheet"
href="{{url_for('.static', filename='mystyle.css')}}">
{% endblock %}
Please Read the documentation on Flask-Bootstrap and have a good understanding of super classes.
This is the Link - Flask-Bootstrap
I've been trying to get a Django instance my predecessor here at work left me up and running, and I ran into a strange error with the templates that I can't seem to comprehend. Using the new {% static '/core/images/image_name.gif' %} format to display images works just fine in a header bar for all of the pages - with one specific exception. When I click on that page that causes the error, though, I get told that there's a problem in the base template, which all of the other pages that work just fine also extend. It implies that there's a problem with a specific image which displays just fine on all the other pages, and I can't understand why. {% load static %} is performed in every template.
Error during template rendering
In template C:\path_to_project\core\templates\core\base.html, error at line 20
401 Client Error: for url: https://bitbucketdev.it.contoso.com/rest/api/1.0/projects?start=0&limit=1000
10 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
11 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
12 <link rel="stylesheet" type="text/css" href="{% static 'core/css/style.css' %}">
13 </head>
14 <body>
15 <div class="container-fluid">
16 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
17 <!-- Brand/logo -->
18 <a class="navbar-brand" href="https://www.contoso.com/us/en/home.html">
19 {% load static %}
20 <img src="{% static '/core/images/contosotransparent.gif' %}" alt="Contoso Technologies" style="width:120px;">
21 </a>
22
23 <!-- Links -->
24 <ul class="navbar-nav">
25 <li class="nav-item">
26 <a class="nav-link" href="{% url 'core:about' %}">About Smart Help Portal</a>
27 </li>
28 <li class="nav-item">
29 <a class="nav-link" href="{% url 'core:help' %}">Why Am I Here?</a>
30 </li>
Does anyone have any idea what could be causing this sort of error? My apologies for not providing more detail - I'm not as familiar with Django as I should be. If there's anything someone could tell me that could give me a hint as to where to look next, that would be greatly appreciated.
Here's a gist with the files - the base.html that both extend, the portal.html that does not work, and the about.html that does work.
https://gist.github.com/wanderso/0846ee0acba1cd6f336f07b18adc30ea
I'm writing this as an answer since the comment max length weren't enough. Here's the modifications that I suggest, please try the code after each modification (because I've arranged them in probability of cause).
1. base.html
Remove the second {% load static %} that's on line 20, and keep the one on line 2 (this is what I believe might cause the error).
2. about.html & portal.html
Move the {% load ... %} tags to the top of the page. The only tag allowed to be before it is the {% extends ... %} block (this isn't a strict rule in Django Templates, just something for the moment to eliminate possible interferences).
3. base.html & portal.html
Merge the {% load ... %} tags into one line. That means, in portal.html
{% load static %}
{% load portal_extras %}
{% load bootstrap4 %}
|
v
{% load static portal_extras bootstrap4 %}
And in base.html
{% load static %}
{% load portal_extras %}
|
v
{% load static portal_extras %}
4. All concerned template files
Search through and make sure that there aren't any double {% load ... %} tags that loads the same module twice.
I've come across Flask-Appbuilder as it could solve my problem. I'm trying to load different css for every template where only the skeleton remains the same.
I found this solution https://flask-appbuilder.readthedocs.io/en/latest/templates.html
However it doesn't work. Not for me anyways. I used pip3 install flask-appbuilder and everything went OK. I created appbuilder directory within templates directory. Then I used:
{% extends 'appbuilder/base.html' %}
{% block head_css %}
{{ super() }}
<link rel="stylesheet" href="url_for('static',filename='css/your_css_file.css')}}">
{% endblock %}
what might be causing the problem ? It's like the block head_css is being completely ignored. Only the basic bootstrap css is being loaded.
You can have a single layout.html file extended by all templates, then use if statements to select the correct CSS style sheet for each template by accessing request.endpoint which is basically the view function that renders a template.
{% if request.endpoint == 'index' %}
<link href="{{ url_for('static', filename='main.css') }}" rel="stylesheet" type="text/css">
{% elif request.endpoint == 'another' %}
<link href="{{ url_for('static', filename='another.css') }}" rel="stylesheet" type="text/css">
{% endif %}
I would like to use dynamic images based on a a pk of the page.
To be clearer I have a survey app, using one question per page .. which mean that the user is presented a question he answers and is redirected to the next question. Each question has a different id and I would like to attach to each question an image.
Right now I have a static image lik that :
<div class="col-5">
<img src="{% static 'images/RightSpeech.jpg' %}" class="img-fluid" alt="Responsive image">
</div>
but I would like to make it dynamic.. I tried something like that with no success:
<div class="col-5">
<img src="{% static 'images/image{{question.pk}}.jpg' %}" class="img-fluid" alt="Responsive image">
</div>
any idea ?
The static tag doesn't really do anything more than adding the value of STATIC_URL to whatever you pass it. Instead of messing about with all these tags, you could just do this manually:
<img src="{{ STATIC_URL }}/images/image{{question.pk}}.jpg"
If for some reason the static context processor isn't activated, you can use the {% get_static_prefix %} tag in exactly the same way:
<img src="{% get_static_prefix %}/images/image{{question.pk}}.jpg"
You need to use
{% static 'images/image'|add:question.id|add:'.jpg' %}
in order to get concatenate the question PK to the image name. This just makes use of the concatenation filter |add:.
EDIT 1
If the above does not work, you can try to use the {% with %} tag, so in your case:
{% with "images/image"|add:question.id|add:".jpg" as customUrl %}
{% static customUrl %}
{% endwith %}
Hope this helps!