CSS styles is removed of text/html content on email forwarding - html

I generate and send an email with text/html content.
General structure:
<!DOCTYPE html>
<html>
<head>
<title>{title}</title>
<style type="text/css">
{% block stypes %}
{% endblock %}
</style>
</head>
<body>
{% block content %}
{% endblock %}
</body>
In my email box, I received properly generated the email (html/css works as expected).
But when I forward the message it seems that <styles> tag is removed.
Is it possible to retain css styles on forwarding?

Forwarded mail dosnt hold the same styles as the original html/css. The mail client will add and remove a lot og styles in your code..
What you can do is to Attach the mail to another mail, then the format will hold.

Related

Liquid - Conditionally Include File From _includes Folder

I have a default.html file in _layout folder. This file contains elements that are common throughout the entire site (e.g., the <head> element), and is supposed to be called in other layout files, which will further extend it.
Depending on the file that calls default.html, I want to include the appropriate snippets in the <head> element.
For instance, consider the (simplified) example files bellow:
_includes/post_metadata.html:
<link rel="stylesheet" href="post.css">
_layouts/default.html
<html>
<head>
{% if <is_post_layout> %}
{% include post_metadata.html %}
{% endif %}
</head>
<body>
{{ content }}
</body>
</html>
_layouts/post_layout.html
---
layout: default
---
<article>
{{ content }}
</article>
_posts/2021-09-22-post.md:
---
layout: post_layout
---
[...]
The final page generated by Jekyll should contain:
<html>
<head>
<link rel="stylesheet" href="post.css">
</head>
<body>
<article>
[...]
</article>
</body>
</html>
So, what code should I use to replace <is_post_layout> to make it work?
There are two (and even more) options.
One is similar to the comment of #Brad West.
You can create many layouts, see docs. So create a post.html (e.g. based on default.html) layout and place it inside _layouts folder. Then you can use the layout in the front matter block. For layouts from scratch can use none for an empty layout.
Use a default layout
---
layout: default
---
Use a post layout
---
layout: post
---
The _layouts/default.html
<html>
<body>
{{ content }}
</body>
</html>
The _layouts/post.html
---
layout: none
---
<html>
<head>
{% include post_metadata.html %}
</head>
<body>
{{ content }}
</body>
</html>
The other one is do it with a variable include_post_metadata in the front matter block. Set the variable to true, when it will be omit then it is false / nil, and the if condition will be not excuted.
---
layout: default
include_post_metadata: true
---
The _layouts/default.html
<html>
<head>
{% if page.include_post_metadata %}
{% include post_metadata.html %}
{% endif %}
</head>
<body>
{{ content }}
</body>
</html>
Page (page.include_post_metadata) is valid for pages and posts

Django VSCode: How to make django-html format as expectedl?

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"
},

html doc not using external css style sheet

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.

Forms not clickable inside div in HTML

I am writing an app in Django and it works perfectly fine when not including divs but when including divs, I cannot click on any forms or texts after the post request (weirdly, it works fine before the post request).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Some title</title>
<link rel="stylesheet" href="https://cdn.bokeh.org/bokeh/release/bokeh-0.13.0.min.css" type="text/css" />
</head>
<body>
<div style="width:1200px;">
<div style="width:300px; float:left;">
{% block content %}
<form method="post" action="">
{% csrf_token %}
<table>
{{ form.as_table }}
</table>
<input type="submit" value="Calculate"/>
</form>
<li>Some text</li>
{% endblock %}
</div>
<div style="width:900px; float:right"; >
Some text
</div>
</div>
<body>
</html>
I am very new to HTML but I read that it is related to CSS somehow but I want to avoid fiddling with that when using Django.
The <body> tag should go immediately after <head>. Close out the <body> tag at the end of your code.
There are some conventions which need to follow while working in HTML.
we write html just like xml (Open tag and closing tag)
html tag is the root element of DOM
In html, we have two major tags: head and body
In head, we normally add dependencies tags required to our web page and meta data of our page and this part this not visible to user in browser's view
In body, we write code that we can see in browser
divs, spans, input fields, forms and all other tags should be inside the body
So according to 1 - 6, you are violating the conventions of html. You need to include your all div tags under body

Detect if a file is included in Jekyll

In my posts, I sometimes include the same HTML pattern.
To do it so, I created pattern.html in _includes/ and include it in my posts with :
{% include pattern.html %}
I would like to add a CSS file (or any other code) in my header if, and only if, pattern.html as been used in my post. To put it in pseudo-code, I would like to get the following layouts/default.html:
<!doctype html>
<html>
<head>
{% if pattern.html is included in the post %} code here {% endif %}
</head>
<body>
{{ content }}
</body>
</html>
I already tried to assign a variable in pattern.html and to test it in my layout, but this assignement occurs too late: the layout is already processed. I know I can pass a variable through YALM, but my objective is to get rid of it. I would prefer not to use plugins to do this.
It seems asking the question helped me to answer it!
You can use the Liquid contains in order to look for a pattern in your post.
For example, if the included pattern.html contains a particular piece of code (<!--pattern--> for instance, or any particular HTML), you can use in your head:
<!doctype html>
<html>
<head>
{% if content contains "<!--pattern-->" %} code here {% endif %}
</head>
<body>
{{ content }}
</body>
</html>
This can be used for any HTML pattern. For example, if you want to call the CSS file producing syntaxic coloration only if there is code in the page, use:
<!doctype html>
<html>
<head>
{% if content contains "<code>" %}
<link rel="stylesheet" href="code.css">
{% endif %}
</head>
<body>
{{ content }}
</body>
</html>