I would like to connect my layout.html file with a CSS file so that every other page extending my layout.html has access to this CSS file.
That is the code:
layout.html
<!DOCTYPE html>
<html lang="de">
<head>
<title>Aufgabenzettel</title>
<link rel="stylesheet" href="/aufgabenzettel/static/css/main.css">
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
index.html
{% extends "aufgabenzettel/layout.html" %}
{% block body %}
<h1>Meine Aufgaben</h1>
{% endblock %}
main.css
h1 {
color: aqua;
}
The href in layout.html is probably correct bacause I can be redirected to it in VS via ctrl + click. However, the h1 in index.html still appears in black instead of aqua...
What am I doing wrong?
I appreciate every kind of help!
First you have to add {% load static %} at the top of your code where you want to use static function in template and than you have to use static function like this {% static 'your_css_path_inside_static_directory' %} eg.
{% load static %}
<!DOCTYPE html>
<html lang="de">
<head>
<title>Aufgabenzettel</title>
<link rel="stylesheet" href="{% static '/aufgabenzettel/static/css/main.css' %}">
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
Related
For some reason I cant seem to load my css file onto my flask website, I have tried many ways but for some reason it's not working. Here's all the files with the directory on the left hand side.
main.py
from flask import Flask, render_template
app = Flask(__name__)
app.config['SESSION_COOKIE_SECURE'] = False
#app.route("/home")
#app.route("/")
def home():
return render_template("home.html")
if __name__ == "__main__":
app.run(debug=True)
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %} {% endblock %}</title>
{{super()}}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css')}}" />
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
home.html
{% extends 'base.html'%}
{% block title %}
Home Page
{% endblock %}
{% block content %}
<h1>Home Page</h1>
{% endblock %}
style.html
body {background-color:000000;}
Please note that 'main.py' is not inside of the folder of 'venv' but rather a sibling of 'venv', since it might look misleading
I am building a webapp with Django and Python 3.7 and I'm really confused by this simple thing:
These are my templates. They are all in the same directory.
When I try to call {% extends 'store.html' %} , I get TemplateDoesNotExist at /publicaciones/ and it points to store.html. This is in publicaciones.html. Here's the template:
publicaciones.html:
{% extends "store.html" %}
{% load static %}
{% load crispy_forms_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{% static 'css/style_reset-pass.css' %}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Publicaciones</title>
</head>
<body>
<div class="container">
{% block content %}
{% for item in items %}
{{ item|crispy }}
{% endfor %}
{% endblock content %}
</div>
</body>
</html>
What am I missing?
Please ask if you need any other code. I'll answer immediately.
It should be {% extends "store/store.html" %}
You have path as templates/store/store.html
You refer to the super template just like you refer to a template in the view for example. In case you thus should refer to it as "store/store.html":
{% extends "store/store.html" %}
Note that if you extend a template, you can only fill in the {% block … %}…{% endblock %} template blocks [Django-doc], so you can not just write an entire html file, that would be rather non-sensical, since otherwise there is no reason to inherit the template.
Adding to the point #baldr made, make sure you specify the template folder in your settings.py file (properly): like 'DIRS': [os.path.join(BASE_DIR, 'templates')] in the TEMPLATES section
New to Django, I want to use different css files for different pages - i.e. page1.css for page1.html, page2.css for page2.html. Is there a way to do this while still extending base.html?
In base.html
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{% block title %}Default Title{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- css -->
if page1.html
<link rel="stylesheet" href="{% static "css/page1.css" %}">
if page2.html
<link rel="stylesheet" href="{% static "css/page2.css" %}">
if page3.html
<link rel="stylesheet" href="{% static "css/page3.css" %}">
</head>
<body class="{% block body_class %}{% endblock %}">
{% block content %}{% endblock%}
</body>
</html>
In page1.html
{% extends "base.html" %}
{% load staticfiles %}
{% block body_class %}page1{% endblock %}
{% block title %}Page1{% endblock %}
{% block content %}
Page 1
{% endblock content %}
You can use the same concept that applies to {% block content %} in that you can fill it in or extend it on a page by page basis.
Hence, in base.html, create a block called styles in the head section (or anywhere you want to load your CSS):
{% block styles %}
{% endblock %}
Now, you can extend this block on a per page basis in any of your templates that use base.html:
Example: page1/template-view.html
{% extends "base.html" %}
{% load staticfiles %}
{% block styles %}
<link rel="stylesheet" href="{% static 'css/page1.css' %}">
{% endblock %}
How would you get your template to use a specific css file in Flask?
admin.html = admin.css
user.html = user.css
I've looked at the Flask docs and they don't make sense?
You can overwrite the <head> section in your base template in a child template. So every user page use the css file from the base.html template and only the admin.html use the other file. This is documented in http://flask.pocoo.org/docs/patterns/templateinheritance/#template-inheritance
Edit:
Maybe you can use this: All pages derive from base.html and use base.css. Only user.html and admin.html overwrite the head section and include base.css and the specific admin.css / user.css.
Example :
base.html:
<!doctype html>
<html>
<head>
{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='base.css') }}">
{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
</body>
</html>
admin.html:
{% extends "base.html" %}
{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='base.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='admin.css') }}">
{% endblock %}
{% block content %}
content goes here
{% endblock %}
user.html:
{% extends "base.html" %}
{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='base.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='user.css') }}">
{% endblock %}
{% block content %}
content goes here
{% endblock %}
Edit:
If you store your css files in a sub directory of static/ you must write the link like this:
<link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
You can pass the css file to use to the template as a variable.
{'css_file': 'admin.css'}
Then use it in the template:
<link rel="stylesheet" href="/css/{{ css_file }}" />
I have a website i'm putting together with python and django.
I have a template html page, Speakers.html, that extends Base.html. Base.html has the stylesheet base.css.
Speakers.html is displaying with base.css styling as it should be, my problem is that I want Speakers.html to have additional styling from another stylesheet, speakers.css.
I've been trying to figure it out but speaker.css doesn't seem to be applied, infact i've just noticed in the cmd output that the file speaker.css isn't being loaded at all.
I tried putting it in a block, which is the code you now see below.. I had to repeat {% load static %} to get rid of an error about it expecting the endblock but it doesn't seem to have made a difference.
Base.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Base.Html</title>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static "CSS/base.css" %}" />
{% block additionalcss %}{% endblock %}
</head>
<body>
...ect
Speakers.html
<!-- extending works -->
{% extends "Base.html" %}
<!-- Now i'm trying to load an additional stylesheet -->
{% block additionalcss %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static "CSS/speakers.css" %}" />
{% endblock %}
{% block currentpage_content %}
<h2>Guest speakers at the event</h2>
<p> This text would be red if speakers.css was applying properly </p>
...ect
For testing purposes i've put the following rule in speakers.css:
*
{
color: red;
}
So I reason the text on Speakers.html should all be red if it were working.
Try using blocks in the templates.
Something like:
Base.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Base.Html</title>
{% load static %}
{% block css %}{% endblock %}
<link rel="stylesheet" type="text/css" href="{% static "CSS/base.css" %}" />
</head>
<body>
...ect
Speakers.html
<!-- extending works -->
{% extends "Base.html" %}
{% block css %}
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static "CSS/speakers.css" %}" />
{% endblock %}
{% block currentpage_content %}
<h2>Guest speakers at the event</h2>
<p> This text would be red if speakers.css was applying properly </p>
...ect
By defining blocks in the parents and then specifying them in the children the css files will be inserted into your template.