Add three responsive light and dark blog themes by mraible · Pull Request #160 · apache/roller

mraible · 2026-08-13T15:34:53Z

Adds three modern, production-ready Roller themes:

Horizon: a crisp editorial layout with cool blue accents and generous whitespace
Alpenglow: a warm, expressive magazine design with coral and violet accents
Dispatch: a compact, typography-led newspaper layout with amber accents

Each theme includes responsive weblog, permalink, search, tag, archive, and sidebar templates. They automatically follow the visitor’s light or dark color-scheme preference, avoid external runtime dependencies, and include an SVG preview for Roller’s theme selector.

Theme discovery coverage verifies that all three themes and their stylesheets load through ThemeManager. The create-weblog flow also keeps Basic as its explicit default so adding an alphabetically earlier theme does not change existing setup behavior.

The previews below are the same production preview.svg assets included in this pull request. They use Roller’s established neutral test-blog fixture content.

Horizon

Alpenglow

Dispatch

Tested with:

mvn -pl app -Dtest=ThemeManagerTest test
mvn -pl app -DskipTests package
mvn -V -ntp install -DskipTests
cd it-selenium && mvn -V -ntp install
git diff --check

Introduce Horizon, Alpenglow, and Dispatch as modern Roller themes with responsive layouts and automatic color-scheme support. Add theme discovery coverage for all three.

Expand the compact theme templates into readable, consistently indented HTML and Velocity control flow.

Expand the three theme stylesheets for review and use the same neutral test-blog fixtures as Roller’s existing theme previews.

Set the create-weblog form's default theme explicitly so adding an alphabetically earlier shared theme does not change existing setup behavior.

snoopdave

Thanks for these themes. Three template bugs found by rendering the templates with Velocity 2.4 (the version Roller uses); details inline. Also, CI on this PR predates the current workflow (no JDK 25 or CodeQL); merging current master would re-run it.

snoopdave · 2026-10-04T19:38:51Z

@@ -0,0 +1,28 @@
+#foreach($entry in $entries)
+<article class="story">
+  <div class="story-index" aria-hidden="true">$velocityCount</div>


Velocity 2 removed $velocityCount, and Roller's velocity.properties doesn't enable the old name, so this prints the literal text $velocityCount on every entry. Rendered with Velocity 2.4: #foreach($x in $l)$velocityCount#end gives $velocityCount$velocityCount. Use $foreach.count (as gaurav and frontpage use $foreach.index).

Fixed. It uses $foreach.count now.

snoopdave · 2026-10-04T19:38:51Z

@@ -0,0 +1,30 @@
+#foreach($entry in $entries)
+<article class="dispatch">
+  <div class="dispatch-number">#if($velocityCount<10)0#end$velocityCount</div>


Velocity 2 removed $velocityCount, and Roller's velocity.properties doesn't enable the old name, so this prints the literal text $velocityCount on every entry. Rendered with Velocity 2.4: #foreach($x in $l)$velocityCount#end gives $velocityCount$velocityCount. Use $foreach.count (as gaurav and frontpage use $foreach.index).

Here: #if($foreach.count<10)0#end$foreach.count.

Fixed with #if($foreach.count < 10)0#end$foreach.count, so entries show 01, 02, and so on.

snoopdave · 2026-10-04T19:38:51Z

+<footer class="site-footer">
+  <p>
+    <strong>$model.weblog.name</strong>
+    — #if($model.weblog.tagline)$model.weblog.tagline#elseField notes from a life in motion.#end


Velocity reads #elseField as one unknown directive, not #else + text. With a tagline this prints My tagline#elseField notes from a life in motion.; without one, the fallback never shows. Use #{else}Field notes from a life in motion. (Horizon's footer works because it has a space after #else).

Good catch. The fallback text was hard-coded persona copy, so I removed it instead of switching to #{else}. The footer now shows the tagline only when the weblog has one.

snoopdave · 2026-10-04T19:38:51Z

+    <main id="content" class="article-shell">
+      <header class="page-heading">
+        <p class="eyebrow">Topic</p>
+        <h1>$model.tags</h1>


$model.tags is a List<String>, so this renders with list brackets, e.g. [java] or [java, roller]. Same on line 5 (<title>). Suggest joining the tags with a #foreach.

Fixed here and in the <title> on line 5. The tags are joined with a #foreach, so a multi-tag page reads java, roller.

snoopdave · 2026-10-04T19:38:51Z

+    <main id="content" class="reading-shell">
+      <header class="page-title">
+        <p class="kicker">Stories filed under</p>
+        <h1>$model.tags</h1>


$model.tags is a List<String>, so this renders with list brackets, e.g. [java] or [java, roller]. Same on line 5 (<title>). Suggest joining the tags with a #foreach.

Fixed here and in the <title>, the same way as Horizon.

snoopdave · 2026-10-04T19:38:51Z

+    <main id="content" class="reading-shell">
+      <header class="page-title">
+        <p class="label">FILTER / TAG</p>
+        <h1>$model.tags</h1>


$model.tags is a List<String>, so this renders with list brackets, e.g. [java] or [java, roller]. Same on line 5 (<title>). Suggest joining the tags with a #foreach.

Fixed here and in the <title>, the same way as Horizon.

…og-themes

…w themes Velocity 2 removed $velocityCount, so Alpenglow and Dispatch printed the literal text on every entry; they now use $foreach.count. Alpenglow's footer used #elseField, which Velocity reads as an unknown directive, so it now shows the tagline only when one is set. The tag pages joined $model.tags as a Java list, which rendered as [java, roller] in the heading and title; they now list the tags separated by commas.

Alpenglow, Dispatch, and Horizon shipped with hard-coded copy written for one blog, so every weblog using them showed the same headline, founding year, and about text. The hero headings now show the weblog name, Dispatch derives its founding year from the weblog's creation date, and the about and tagline sections are omitted when those fields are empty. Long weblog names now wrap in the Alpenglow and Dispatch headlines instead of overflowing on narrow screens.

mraible · 2026-10-11T00:30:01Z

Thanks for the review. I merged current master, so CI now runs on JDK 25 with CodeQL.

I also took two items from the UI audit you attached to #156:

UI-07: the three themes now use the weblog's own name, tagline, and about text, and hide those sections when the fields are empty. Dispatch's "EST." year comes from the weblog's creation date.
UI-08 Removing empty spaces #1: long names now wrap in the Dispatch and Alpenglow headlines.

I rendered the changed templates with Velocity 2.4.1, with the tagline and about fields both set and empty, and the full test suite passes.

mraible added 4 commits August 13, 2026 09:30

Add three responsive light and dark blog themes

ee93e14

Introduce Horizon, Alpenglow, and Dispatch as modern Roller themes with responsive layouts and automatic color-scheme support. Add theme discovery coverage for all three.

Format the new Velocity templates

4211833

Expand the compact theme templates into readable, consistently indented HTML and Velocity control flow.

Format theme CSS and normalize preview content

8f89729

Expand the three theme stylesheets for review and use the same neutral test-blog fixtures as Roller’s existing theme previews.

Preserve Basic as the default weblog theme

834a1ff

Set the create-weblog form's default theme explicitly so adding an alphabetically earlier shared theme does not change existing setup behavior.

snoopdave added the 7.0.0 label Sep 11, 2026

snoopdave reviewed Oct 4, 2026

View reviewed changes

mraible added 4 commits October 10, 2026 18:24

Merge remote-tracking branch 'upstream/master' into feature/modern-bl…

d11cac8

…og-themes

Indent the Alpenglow footer tagline like the surrounding markup

9c46a78

This was referenced Oct 11, 2026

Convert the admin and editor UI from Bootstrap 3 to Bootstrap 5.3 #156

Open

ROL-2185: Keep comments out of EclipseLink's shared cache #214

Merged

Conversation

mraible commented Aug 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

snoopdave left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mraible commented Oct 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mraible commented Aug 13, 2026 •

edited

Loading