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?
Add a comment
|
2 Answers
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') }}">
5 Comments
Tony
I had read the other but the way you've written it makes more sense. Thank You
Tony
would this completely negate the use of a main css file? What I'm looking at doing is having a main css file that contains global attributes and then specific css for admin and user.
Tony
Ahh, ok. So you pull in your global and your specific. You don't use the located in the parent. I can basically pull it out of the parent and simply use the global css as you have it here. Ok, cool. Thank You
Tony
my apologies for asking but I still can't seem to get it to work correctly. I have {% block head %} <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}"> {% endblock %} in layout.html. This should at least show my original intent. The css is located in /static/css when I save. The CSS is not brought in?
Tony
I tried putting the css files in "static" and not "static/css" and it worked. How would I write it to find the css in a sub dir of static?
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 }}" />
