Example flavours for forums blocks

misago/forums/migrations/0002_default_forums.py

@@ -45,7 +45,8 @@ def create_default_forums_tree(apps, schema_editor):
         level=1,
         role='category',
         name=category_name,
-        slug=slugify(category_name))
+        slug=slugify(category_name),
+        css_class='accent')
 
     Forum.objects.create(
         parent=category,

misago/static/misago/css/misago/forums.less

@@ -158,3 +158,27 @@
     }
   }
 }
+
+
+// Few predefined CSS classes for block styling
+//
+//==
+.forum-panel-flavour(@color) {
+  .panel-heading {
+    background: darken(@color, 3%);
+    border-color: darken(@color, 10%);
+
+    h3 {
+      color: #fff;
+      text-shadow: 1px 1px 0px darken(@color, 30%);
+    }
+  }
+}
+
+.panel-forums {
+  &.primary {.forum-panel-flavour(@brand-primary);}
+  &.accent {.forum-panel-flavour(@brand-accent);}
+  &.success {.forum-panel-flavour(@brand-success);}
+  &.warning {.forum-panel-flavour(@brand-warning);}
+  &.danger {.forum-panel-flavour(@brand-danger);}
+}

misago/templates/misago/forums/category.html

@@ -9,35 +9,37 @@
 
 
 {% block content %}
-<div class="page-header">
+<div{% if category.css %} class="page-{{ category.css_class }}"{% endif %}>
+  <div class="page-header">
+    <div class="container">
+      {% if path %}
+      <ol class="breadcrumb">
+        {% for crumb in path|slice:":-1" %}
+        <li>
+          <a href="{{ crumb.get_absolute_url }}">{{ crumb.name }}</a>{% if not forloop.last %}<span class="fa fa-chevron-right"></span>{% endif %}
+        </li>
+        {% endfor %}
+      </ol>
+      {% endif %}
+
+      <h1>{{ category.name }}</h1>
+    </div>
+  </div>
   <div class="container">
-    {% if path %}
-    <ol class="breadcrumb">
-      {% for crumb in path|slice:":-1" %}
-      <li>
-        <a href="{{ crumb.get_absolute_url }}">{{ crumb.name }}</a>{% if not forloop.last %}<span class="fa fa-chevron-right"></span>{% endif %}
-      </li>
-      {% endfor %}
-    </ol>
+    {% if category.description %}
+    <div class="lead">
+      {{ category.description|escape|urlize|linebreaks }}
+    </div>
     {% endif %}
 
-    <h1>{{ category.name }}</h1>
-  </div>
-</div>
-<div class="container">
-  {% if category.description %}
-  <div class="lead">
-    {{ category.description|escape|urlize|linebreaks }}
+    {% if forums %}
+      {% include "misago/forums/subforums.html" category=category %}
+    {% else %}
+    <p class="lead">
+      {% trans "No forums are set in this category or you don't have permission to see them." %}
+    </p>
+    {% endif %}
   </div>
-  {% endif %}
-
-  {% if forums %}
-    {% include "misago/forums/subforums.html" %}
-  {% else %}
-  <p class="lead">
-    {% trans "No forums are set in this category or you don't have permission to see them." %}
-  </p>
-  {% endif %}
 </div>
 {% endblock content %}
 

misago/templates/misago/forums/subforums.html

@@ -2,7 +2,9 @@
 <div class="forums-list">
   <div id="{{ category.slug }}-{{ category.pk }}" class="panel panel-default panel-shadow panel-forums {{ category.css_class }}">
     <div class="panel-heading">
-      <h3 class="panel-title">{% trans "Subforums" %}</h3>
+      <h3 class="panel-title">{% blocktrans trimmed with forum=category.name %}
+        Forums in {{ forum }}
+        {% endblocktrans %}</h3>
     </div>
     {% include "misago/forums/forums.html" %}
   </div>