My layout HTML file seems to be picking up the CSS right up until the {% block ... %}. The content in the block downwards doesn't pick up any CSS which means the pages that extend the layout page don't pickup any CSS. They all share the same CSS file.
App structure
run.py
/MyPortfolio
/static
styles.css
/templates
layout.html
index.html
__init.py
views.py
Layout.html
<head>
<link rel="stylesheet" href="{{ url_for('static',filename='styles.css') }}">
</head>
<body>
<!-- picks up CSS-->
<nav>...</nav>
<!-- doesn't pick up CSS downward-->
{% block body %} {% endblock %}
<div class="page-footer">
...
</div>
</body>
Related
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>
Im making a 'learning website' along with the treehouse course and when I run my website server the GET for the CSS returns a 404 error, below I will provide the details I think will help you help me. Thank you for any help this is annoying for trying to learn Django. Ive looked everywhere and cannot find something to help me, I will happily give more info in the comments!
Here is my file structure:
~/PycharmProjects/learning_site
|--.idea
|--assets
| |--css
| |--layout.css
|--courses
|--learning_site
|--templates
db.sqlite2
manage.py
This is my static variables defined in the settings.py file.
STATIC_URL = '/static/'
STATICFIILES_DIRS = (
os.path.join(BASE_DIR, 'assets'),
)
This is my layout.html template where the css is called.
{% load static %}<!doctype html>
<html>
<head>
<title> {% block title %} {% endblock %}</title>
<link rel = "stylesheet" href="{% static '/css/layout.css' %}"}>
</head>
<body>
<div class="site-container">
{% block content %}{% endblock content %}
</div>
</body>
</html>
This is the homepage where the CSS would be displayed.
{% extends "layout.html" %}
{% block title %} Well hello there! {% endblock %}
{% block content %}
<h1>Welcome!</h1>
{% endblock %}
Courses offered
Please check there is an extra } in yout <link> tag. Fix it:
<link rel = "stylesheet" href="{% static '/css/layout.css' %}">
and take a look in your STATIC_ROOT in settings.py and run pyhton manage.py collectstatic as well.
Hello I am using modelforms . One of my entries is a ChoiceField, when I have my CSS header in the name.html file (the html file for the form page) the page does not show the drop downs. When I remove this header in name.html the drop downs show. Can anyone explain what is happening?
name.html
{% extends 'fitness/header.html' %}
{% block content %}
<form method="post">
{% csrf_token %}
{{form.as_p}}
<input type="submit" value="Submit">
</form>
{% endblock %}
header.html
<head>
{% load static %}
<!-- Prism CSS -->
<link href="{% static "tinymce/css/prism.css" %}" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<nav>
<div class="nav-wrapper">
Gainz.com <!–– Need to adjust this logo ––>
<ul id="nav-mobile" class="right
hide-on-med-and-down">
{% if user.is_authenticated %}
<li>profile</li>
<li>logout</li>
<li>dashboard</li>
<li>feed</li>
<li>forum</li>
<li>manual entry</li>
{% else %}
<li>Home</li>
<li>feed</li>
<li>login</li>
<li>register</li>
{% endif %}
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
</body>
<!-- Prism JS -->
<script src="{% static "tinymce/js/prism.js" %}"></script>
Make sure to add this to the top of the page:
<!DOCTYPE HTML> //always include this at the top of the page of your base file
<html>
Scripts always go on the bottom of the page before the closing </body> tag:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="{% static "tinymce/js/prism.js" %}"></script>
</body>
</html>
This is generally rendered with with a footer.html template using {% include 'footer.html' %}
I added the <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> jquery script because it looks like the cloudfare materialize script requires it (although I'm not sure). Regardless, you should be using jQuery on all your html files! ;-)
Also, I'm not sure if this will fix your problem or not, but its generally good practice to make sure all of your elements have closing tags (if they require them). There might be a random <div> tag on your name.html (or somewhere else) that is causing unexpected errors.
This question already has answers here:
Link to Flask static files with url_for
(2 answers)
Closed 4 years ago.
I have a problem when rendering template in flask it doesn't recongnize the CSS file but this issue occurs only when I give more than one parameter to the funtion.
for this example the css is working on the page:
#app.route('/test/<usrn>')
def test(usrn):
return render_template('test.html')
and it looks like this
but for this one the css isn't working:
#app.route('/test/<usrn>/<grad>')
def test(usrn,grad):
return render_template('test.html')
and now it looks like this
Strucure of test.html:
{% extends 'layout.html' %}
{% block body %}
<header>
<div class="container">
<div id="logo">
<img src="../static/images/logo2.png">
</div>
<nav>
<ul>
<li>Dashboard</li>
<li>Clasament</li>
<li><a href="{{ url_for('profil') }}">Profil ({{ uname }})
</a></li>
<li><button onclick="window.location.href='{{ url_for('logout') }}'" class="input_btn1">Log out</button></li>
</ul>
</nav>
</div>
</header>
{% endblock %}
Structure of layout.html:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="../static/css/main.css?q=1280549780">
</head>
<body>
{% block body %}{% endblock %}
</body>
</html>
Directory structure:
Website
static
css
main.css
images
img
templates
layout.html
test.html
mongo_connect.py
Your path to the CSS file is hard-coded: this is generally a bad idea, as once you move up the path to a new "folder" this CSS path becomes invalid.
The best method is to use url_for to generate a consistent URL for your static assets.
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='css/main.css') }}?q=1280549780">
You should also apply the same change to your other static assets such as images, Javascript files etc.
Documentation for url_for
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.