--- a/default/chat/message.html	Tue Jan 30 07:47:23 2018 +0100
+++ b/default/chat/message.html	Tue Jan 30 07:47:26 2018 +0100
@@ -1,11 +1,9 @@
+{% import 'components/avatar.html' as avatar with context %}
+
 <p id="{{msg.id}}" class="msg_{{msg.type}} {{'own_msg' if msg.from_ == own_jid.full()}}">
     {%- if msg.type != C.MESS_TYPE_INFO %}
         {%- set author = identities[msg.from_].nick | default(msg.from_) -%}
-        {%- if identities[msg.from_].avatar_basename is defined %}
-            <img class="avatar" src="{{cache_path}}{{identities[msg.from_].avatar_basename}}">
-        {% else %}
-            <span class="avatar generated">{{author|first|upper}}</span>
-        {%- endif -%}
+        {{ avatar.avatar(msg.from_) }}
         <span class="msg_header">
             <span class="author">{{author}}</span>
             <span class="date">{{msg.timestamp|date_fmt('auto_day')}}</span>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/components/avatar.html	Tue Jan 30 07:47:26 2018 +0100
@@ -0,0 +1,9 @@
+{% macro avatar(jid) %}
+    {%- if identities is defined -%}
+        {%- if identities[jid].avatar_basename is defined %}
+            <img class="avatar" src="{{cache_path}}{{identities[jid].avatar_basename}}">
+        {% else %}
+            <span class="avatar generated">{{author|first|upper}}</span>
+        {%- endif -%}
+    {%- endif -%}
+{% endmacro %}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/forum/view.html	Tue Jan 30 07:47:26 2018 +0100
@@ -0,0 +1,34 @@
+{% if not embedded %}{% extends 'base/base.html' %}{% endif %}
+{% set dates_format='relative' if single else 'short' %}
+{% import 'blog/macros.html' as blog with context %}
+{% import 'input/textbox.html' as textbox with context %}
+
+{% block body %}
+
+<div id="blog_items">
+    {{ blog.show_items(items, expanded=true) }}
+</div>
+<div class="forum_topic_answer">
+    {{- textbox.comment_or_login(service=service, node=node, placeholder=_("Enter your message here")) -}}
+</div>
+<nav class="prev_next_links">
+    <ul>
+        {% if newer_url is defined %}
+            <li class="newer_items">
+                <a href="{{newer_url}}">
+                    <img src="{{media_path}}icons/tango/actions/32/go-previous.png">
+                    {% trans %}newer messages{% endtrans %}
+                </a>
+            </li>
+        {% endif %}
+        {% if older_url is defined %}
+            <li class="older_items">
+                <a href="{{older_url}}">
+                    <img src="{{media_path}}icons/tango/actions/32/go-next.png">
+                    {% trans %}older messages{% endtrans %}
+                </a>
+            </li>
+        {% endif %}
+    </ul>
+</nav>
+{% endblock body %}

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/default/static/forum.css	Tue Jan 30 07:47:26 2018 +0100
@@ -0,0 +1,78 @@
+@import 'blog.css'; /* needed as blog/articles.html is included */
+
+#forums {
+    margin: 2em auto 0 auto;
+    width: 90%;
+}
+
+ul.forum {
+    box-sizing: border-box;
+    list-style: none;
+    display: flex;
+    margin: 0 auto;
+}
+
+ul.forum>li {
+    width: 100%;
+}
+
+ul.forum>li>a {
+    border: 0.7rem solid #ddd;
+    border-radius: 0.5em;
+    display: block;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    text-decoration: none;
+    color: inherit;
+}
+
+a.forum_actif:hover {
+    background-color: #43d2f6;
+}
+
+p.forum_short-desc {
+    color: #666;
+    margin: 0;
+    font-size: 0.8em;
+}
+
+#forum_topics {
+    margin-top: 3em;
+}
+
+#forum_topics>div {
+    box-sizing: border-box;
+    width: 80%;
+    margin: 0.5em auto;
+    padding: 0.2em 2em;
+    background: #eee;
+
+}
+
+#forum_topics>:hover {
+    background-color: #43d2f6;
+}
+
+#forum_topics img.avatar {
+    width: 1.5rem;
+    vertical-align: middle;
+    padding-right: 1em;
+}
+
+#forum_topics a {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+}
+
+.textbox input {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+@media (min-width: 500px) {
+    .textbox input {
+        min-width: 26em;
+        width: auto;
+    }
+}