Product Features
Log in

Jinja2 Mastery: Level 1: Custom CSS for each Jinja template using inheritance (+37, -1)

Start End

base.html (+2, -0)

From: curriculum/section09/lectures/06_custom_css_jinja2/start/templates/base.html

To: curriculum/section09/lectures/06_custom_css_jinja2/end/templates/base.html 

            
            index feb3392..f0654f7 100644
--- a/curriculum/section09/lectures/06_custom_css_jinja2/start/templates/base.html
+++ b/curriculum/section09/lectures/06_custom_css_jinja2/end/templates/base.html
@@ -4,6 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ title or "Todos" }}</title>
+  {% block head %}
+  {% endblock %}
 </head>
 <body>
   {% block content %}

not-found.html (+10, -1)

From: curriculum/section09/lectures/06_custom_css_jinja2/start/templates/not-found.html

To: curriculum/section09/lectures/06_custom_css_jinja2/end/templates/not-found.html 

            
            index 26a3be4..fe66252 100644
--- a/curriculum/section09/lectures/06_custom_css_jinja2/start/templates/not-found.html
+++ b/curriculum/section09/lectures/06_custom_css_jinja2/end/templates/not-found.html
@@ -1,7 +1,16 @@
 {% extends 'base.html' %}
 
+{% block head %}
+  <style>
+    .notfound {
+      background-color: gray;
+      font-size: 125%;
+    }
+  </style>
+{% endblock %}
+
 {% block content %}
   <h1>Not found</h1>
   <p>We're sorry, that todo item was not found:</p>
-  <p>{{ text }}</p>
+  <p class="notfound">{{ text }}</p>
 {% endblock %}

todo.html (+25, -0)

From: curriculum/section09/lectures/06_custom_css_jinja2/start/templates/todo.html

To: curriculum/section09/lectures/06_custom_css_jinja2/end/templates/todo.html 

            
            index fcba13b..8bc3056 100644
--- a/curriculum/section09/lectures/06_custom_css_jinja2/start/templates/todo.html
+++ b/curriculum/section09/lectures/06_custom_css_jinja2/end/templates/todo.html
@@ -1,5 +1,30 @@
 {% extends 'base.html' %}
 
+{% block head %}
+  {% if completed %}
+    <style>
+      p {
+        margin: 8px 16px;
+        background-color: aquamarine;
+        padding: 12px 24px;
+        border: 1px solid black;
+        border-radius: 4px;
+      }
+    </style>
+  {% else %}
+    <style>
+      p {
+        margin: 8px 16px;
+        background-color: darkred;
+        color: white;
+        padding: 12px 24px;
+        border: 1px solid black;
+        border-radius: 4px;
+      }
+    </style>
+  {% endif %}
+{% endblock %}
+
 {% block content %}
   <h1>{{ text }}</h1>