I am starting to learn CSS and after trying to implement an external stylesheet, i found I was unable to change the color of my html document. I am using Visual Studio Code and my html templates are using Djangos inheritance.
I have tried double checking that everything is saved, I have checked spelling for the href, and i even restarted VSC. So far nothing.
Here is the base html sheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{% block style %}
{% endblock %}
<title>
{% block title %}
{% endblock %}
</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
Here is an html sheet that should use the styling:
{% extends 'student_view_base.html' %}
{% block title %}
Socrates Home Page
{% endblock %}
{% block style %}
<link rel="stylesheet" type="text/css"
href="css/sidebar.css">
{% endblock %}
{% block content %}
<h1>Socrates Home Page</h1>
<div>
Login
</div>
Admin Login
{% endblock %}
Here is the css sheet:
h1{
color: blue;
}
As you can tell, I am pretty new to Web Dev in general and this was mostly to experiment and make sure I could implement it properly.
As far as I can tell the h1 tags text should be turning blue. Currently it remains black.
EDIT: I can confirm that the href is linked to the proper document, ctrl clicking takes me to the right document.
You are better off placing your html code on templates and your css on static when you use django. Create a templates and static folders on your project as here. enter image description here
Then edit settings.py'DIRS': [os.path.join(BASE_DIR, 'templates')], inside TEMPLATES. Also add the following code to your settings.py :
STATIC_URL = '/static/'
STATIC_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
You should be good to go.
Related
I've seen a ton of unanswered questions about VSCode formatting (and if not here, where do you ask these questions?).
There are 2 main issues I run into constantly when I'm trying to write django-html templates.
1. Basic HTML tag linebreak doesn't occur in django-html files.
When you write an html tag, and press enter inside of it, it should split the tag with an empty line in the middle like.
Expected behavior (pipe "|" represents the cursor):
<!-- Write the tag -->
<div>|</div>
<!-- Press enter -->
<tag>
|
</tag>
Here's what's happening in the django-html file after enter:
<!-- Press enter -->
<tag>
|</tag>
How do you fix this WITH proper template tag formatting (below)?
2. Django template tags don't indent as expected.
Tags within if, with, block, etc. tags should be indented. (treated like html)
Expected result:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
{% if x %}
<p>I did x</p>
{% else %}
<p> I did else</p>
{% endif %}
<nav class="navbar">
</nav>
{% block content %}
<div class="content">
<p>I'm in contente</p>
</div>
{% endblock %}
</body>
</html>
Instead, the html tags within the django template tags are flattened on the same indent level.
Actual result:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
{% if x %}
<p>I did x</p>
{% else %}
<p> I did else</p>
{% endif %}
<nav class="navbar">
</nav>
{% block content %}
<div class="content">
<p>I'm in contente</p>
</div>
{% endblock %}
</body>
</html>
Also if you're extending a template:
{% extends 'base.html' %}
{% block main %}
<div>
</div>
{% endblock %}
What happens:
{% extends 'base.html' %}
{% block main %}
<div>
</div>
{% endblock %}
Conclusion
I've used both beautify and prettier to try to solve the problems, but neither did the expected behavior 100% (especially with the template tags), but they did help.
I believe with slight tweaks they could have the expected behavior and treat django template tags as html tags AND have the html linebreak feature.
How do you get these to format with these 2 simple specifications correctly?
I got the desired result by using the Twig Language 2 extension and putting the following in my project settings:
"files.associations": {
"*.html": "twig"
},
I have a layout html file called layout.html that goes as follows:
<!DOCTYPE html>
<html>
<head>
<title>{% block title %} {% endblock %}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
</head>
<body>
{% block head %}
<div class = "container-fluid">
<h1>Books </h1>
<h1 class = "text-muted">Rate and discover books</h1>
</div>
{% endblock %}
{% block body %} {% endblock %}
</body>
</html>
and an index layout called index.html that goes as follows:
{% extends "layout.html" %}
{% block title %}{% endblock %}
{% block head %}{% endblock %}
{% block body %}
<h1>some text</h1>
{% endblock %}
but when I render the index.html into the browser with my flask application, all I see is the following text:
Why??
thanks!
OK, I feel pretty stupid now. I realised that whenever you enter the name of a block in the child template that is also present in the parent template, you are overriding that part of the parent template. So in this case, by entering the block head in the child template and leaving it blank, that's exactly what I did, so the text was overridden by no text basically.
I have to do a school project that's basically a website.
Our client asked my team for a preview of the design. However, by then, my colleagues and I didn't know anything about Symfony.
So we first created a static HTML website (with CSS and JS libraries) to work on the design of the website.
Once we had agreed on the final design, we had to make the website dynamic.
After learning about the basics of Symfony in class, we decided to go for this technology.
So my question is: what's the best way to "turn" my team's static website into Twig templates ?
Thanks in advance,
As you can read in the documentation You begin by the global site template, containing the layout and the parts that won't change much. (menu, header, footer, etc..)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Test Application{% endblock %}</title>
</head>
<body>
<div id="sidebar">
{% block sidebar %}
<ul>
<li>Home</li>
<li>Blog</li>
</ul>
{% endblock %}
</div>
<div id="content">
{% block body %}{% endblock %}
</div>
</body>
</html>
Then you can render your specific page rendering content through the blocks you need:
{# app/Resources/views/blog/index.html.twig #}
{% extends 'base.html.twig' %}
{% block title %}My cool blog posts{% endblock %}
{% block body %}
{% for entry in blog_entries %}
<h2>{{ entry.title }}</h2>
<p>{{ entry.body }}</p>
{% endfor %}
{% endblock %}
I'm using twig and having a problem with include and extends.
I have a file header.html.twig that I'm including on index.html.twig. That works fine.
However, I'm also trying to overwrite a portion of the header.html.twig file with extends on index.html.twig. The code I came up with is:
<!-- index.html.twig -->
{% include '::header.html.twig' %}
{% extends '::header.html.twig' %}
{% block head %}
<li class="active">Login</li>
{% endblock %}
However, this code throws the exception "A template that extends another one cannot have a body...."
How can I fix this?
You can only have {% block... %} {% endblock %} tags in the template that extends another one.
In your case, if I got correctly what you are trying to achieve, you can define an empty block in header.html.twig (at the beginning), and override that block in index.html.twig with
{% block foo %}
{% include "header.html.twig" %}
{% endblock %}
If you are doing things outside any block, those things are considered to be the body of your twig file. And as the exception clearly tells, if you are extending a twig template, you need to overwrite some blocks contained in the extended file without any body.
You should use the {% extends %} tag without any include before, as the extends already include contents. The packaged "base.html.twig" file is a good example: you put the code that will be used everywhere in your application in a base.html.twig file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
For your case, you can add a {% block head %}{% endblock %} above the body block, and then, in your index.html.twig file, you'll overwrite this block to fulfill it.
{% extends '::base.html.twig' %}
{% block head %}
<li class="active">Login</li>
{% endblock %}
This will finally output:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome!</title>
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
<li class="active">Login</li>
</body>
</html>
Conclusion
The difference between extends and include is that you are able to override blocks from the extended file, where you can't while including it using include.
I'm developing an web app with Google app engine that uses jinja2 as a template engine.
I'm my base.html file i have a <link> tag for CSS.
Now i have a another file front.html that extends the first file . It has the {% extends 'base.html' %} block and the code is in a block {% block content %} ....... {% endblock %}.
In the second file, the CSS style won't apply. Any ideas how to fix it ?
To be more precise:
base.html :
<head>
<link ... >
< /head>
<body>
{% block content %}
{% endblock %}
</body>
front.html:
{% extends 'base.html' %}
{% block content %}
....
{% endblock %}
The style from the tag won't apply to the block.
Ok. I figured it out . The path to the front.html was something like /path1/path2 while for the base.html the path was /path1. So it did not link corectly.
As a solution you can make a block on the link tag and the override it something like:
{% block stylesheet %}
<link href="path1/something.css">
{% endblock %}
and in the child you have
{% block stylesheet %}
<link href="/path1/path2/something.css">
{% endblock %}
Or, you could put a path in the app.yaml file.