Log in Sign up
Back to feed
ForumSpark Support Customization Help Join

Custom Templates: Topic view template

Cedric · 3 months ago · 5 replies · 30

Here's a few examples for the topic view:

Template: 

<div class="dk">
{{#each replies}}
<div class="reply">
    <div class="dk-post{{#if this.reply.is_best}} dk-post--best{{/if}}{{#if this.reply.is_op}} dk-post--op{{/if}}">
        <div class="dk-head">
            <a href="{{ this.user.profile_url }}" class="dk-avatar">
                <img src="{{ this.user.avatar_url }}" alt="{{ this.user.username }}" />
            </a>
            <div class="dk-id">
                <span class="dk-name">
                    <a href="{{ this.user.profile_url }}">{{ this.user.username }}</a>
                    {{#if this.reply.is_op}}<span class="dk-tag dk-tag--op">Author</span>{{/if}}
                    {{#if this.user.is_staff}}<span class="dk-tag dk-tag--staff">{{ this.user.group_name }}</span>{{/if}}
                    {{#if this.reply.is_best}}<span class="dk-tag dk-tag--best"><span class="fa-solid fa-circle-check"></span> Best answer</span>{{/if}}
                </span>
                <span class="dk-sub">{{ this.user.num_posts }} posts <span class="dk-sep">·</span> joined {{ this.user.joined_long }}</span>
            </div>
            <a href="{{ this.reply.permalink }}" class="dk-time">{{ this.reply.created_at }}</a>
            {{{ this.reply.meta }}}
        </div>
        <div class="dk-body">
            {{{ this.reply.body }}}
        </div>
        <div class="dk-actions">
            {{{ this.reply.actions }}}
        </div>
    </div>
</div>
{{/each}}
{{#if pagination.has_pages}}
<div class="dk-pages">
    Page {{ pagination.current_page }} of {{ pagination.last_page }}
    {{#if pagination.prev_url}}<a href="{{ pagination.prev_url }}">Previous</a>{{/if}}
    {{#if pagination.next_url}}<a href="{{ pagination.next_url }}">Next</a>{{/if}}
</div>
{{/if}}
</div>

CSS:

.dk { display: flex; flex-direction: column; gap: 0.9rem; padding: 0.9rem; }
.dk-post { background: var(--fs-reply-bg, rgba(128,128,128,0.03)); border: 1px solid var(--fs-panel-border, rgba(128,128,128,0.2)); border-radius: 0.7rem; overflow: hidden; }
.dk-post--best { border-color: var(--fs-panel-footer-accent, rgba(128,128,128,0.45)); box-shadow: 0 0 0 1px var(--fs-panel-footer-accent, transparent); }
.dk-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--fs-forum-divider, rgba(128,128,128,0.13)); background: var(--fs-reply-details-bg, rgba(128,128,128,0.04)); }
.dk-avatar { flex-shrink: 0; line-height: 0; }
.dk-avatar img { width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; }
.dk-id { flex: 1; min-width: 0; }
.dk-name { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.dk-name a { font-size: 0.95rem; font-weight: 750; color: inherit; text-decoration: none; }
.dk-name a:hover { color: var(--fs-panel-footer-accent, inherit); }
.dk-tag { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.13rem 0.5rem; border-radius: 999px; }
.dk-tag--op { background: var(--fs-panel-section-bg, rgba(128,128,128,0.12)); }
.dk-tag--staff { color: #fff; background: var(--fs-panel-footer-accent, #35a377); }
.dk-tag--best { color: var(--fs-panel-footer-accent, inherit); border: 1px solid var(--fs-panel-footer-accent, rgba(128,128,128,0.4)); }
.dk-sub { display: block; font-size: 0.68rem; opacity: 0.55; margin-top: 0.1rem; }
.dk-sep { opacity: 0.6; margin: 0 0.1rem; }
.dk-time { flex-shrink: 0; font-size: 0.72rem; opacity: 0.6; color: inherit; text-decoration: none; }
.dk-time:hover { opacity: 1; text-decoration: underline; }
.dk-head .post-layout-meta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.5rem; }
.dk-head .post-layout-meta__number { font-size: 0.72rem; font-weight: 700; opacity: 0.55; color: inherit; text-decoration: none; }
.dk-body { padding: 1rem 1.1rem 0.5rem; }
.dk-actions { display: flex; padding: 0.5rem 1rem 0.7rem; }
.dk-actions .reply-action-group { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.dk-actions .reply-action-group--reply { margin-left: auto; }
.dk-pages { padding: 0.2rem 0.3rem; font-size: 0.78rem; opacity: 0.8; display: flex; gap: 0.8rem; }
.dk-pages a { color: var(--fs-link-color, inherit); font-weight: 600; text-decoration: none; }
.dk-pages a:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .dk-sub { display: none; }
}

Template:

<div class="td">
{{#each replies}}
<div class="reply">
    <div class="td-msg{{#if this.reply.is_op}} td-msg--op{{/if}}{{#if this.reply.is_best}} td-msg--best{{/if}}">
        <a href="{{ this.user.profile_url }}" class="td-avatar">
            <img src="{{ this.user.avatar_url }}" alt="{{ this.user.username }}" />
        </a>
        <div class="td-col">
            <div class="td-top">
                <a href="{{ this.user.profile_url }}" class="td-name">{{ this.user.username }}</a>
                {{#if this.user.is_staff}}<span class="td-staff">{{ this.user.group_name }}</span>{{/if}}
                {{#if this.reply.is_op}}<span class="td-op">OP</span>{{/if}}
                <a href="{{ this.reply.permalink }}" class="td-time">{{ this.reply.created_at }}</a>
                {{{ this.reply.meta }}}
            </div>
            <div class="td-bubble">
                {{#if this.reply.is_best}}<div class="td-best"><span class="fa-solid fa-circle-check"></span> Marked as best answer</div>{{/if}}
                <div class="td-body">
                    {{{ this.reply.body }}}
                </div>
            </div>
            <div class="td-actions">
                {{{ this.reply.actions }}}
            </div>
        </div>
    </div>
</div>
{{/each}}
{{#if pagination.has_pages}}
<div class="td-pages">
    Page {{ pagination.current_page }} of {{ pagination.last_page }}
    {{#if pagination.prev_url}}<a href="{{ pagination.prev_url }}">Previous</a>{{/if}}
    {{#if pagination.next_url}}<a href="{{ pagination.next_url }}">Next</a>{{/if}}
</div>
{{/if}}
</div>

CSS:

.td { display: flex; flex-direction: column; gap: 1.1rem; padding: 1rem; }
.td-msg { display: flex; gap: 0.75rem; }
.td-avatar { flex-shrink: 0; line-height: 0; margin-top: 0.15rem; }
.td-avatar img { width: 2.3rem; height: 2.3rem; border-radius: 50%; object-fit: cover; }
.td-col { flex: 1; min-width: 0; }
.td-top { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.td-name { font-size: 0.9rem; font-weight: 750; color: inherit; text-decoration: none; }
.td-name:hover { color: var(--fs-panel-footer-accent, inherit); }
.td-staff { font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; background: var(--fs-panel-footer-accent, #35a377); padding: 0.12rem 0.45rem; border-radius: 999px; }
.td-op { font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.12rem 0.45rem; border-radius: 999px; background: var(--fs-panel-section-bg, rgba(128,128,128,0.12)); }
.td-time { font-size: 0.68rem; opacity: 0.55; color: inherit; text-decoration: none; }
.td-time:hover { opacity: 1; text-decoration: underline; }
.td-top .post-layout-meta { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; }
.td-top .post-layout-meta__number { font-size: 0.7rem; font-weight: 700; opacity: 0.5; color: inherit; text-decoration: none; }
.td-bubble { background: var(--fs-reply-bg, rgba(128,128,128,0.05)); border: 1px solid var(--fs-panel-border, rgba(128,128,128,0.16)); border-radius: 0.25rem 0.9rem 0.9rem 0.9rem; padding: 0.9rem 1rem; }
.td-msg--op .td-bubble { border-left: 3px solid var(--fs-panel-footer-accent, rgba(128,128,128,0.45)); }
.td-msg--best .td-bubble { border-color: var(--fs-panel-footer-accent, rgba(128,128,128,0.45)); }
.td-best { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fs-panel-footer-accent, inherit); margin-bottom: 0.5rem; }
.td-actions { display: flex; margin-top: 0.35rem; opacity: 0.45; transition: opacity 0.15s ease; }
.td-msg:hover .td-actions, .td-actions:focus-within { opacity: 1; }
.td-actions .reply-action-group { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.td-actions .reply-action-group--reply { margin-left: auto; }
.td-actions .btn { font-size: 0.68rem; padding: 0.22rem 0.55rem; }
.td-pages { padding: 0.2rem 0.3rem; font-size: 0.78rem; opacity: 0.8; display: flex; gap: 0.8rem; }
.td-pages a { color: var(--fs-link-color, inherit); font-weight: 600; text-decoration: none; }
.td-pages a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .td-actions { transition: none; } }

Template:

<div class="tx">
{{#each replies}}
<div class="reply">
    <div class="tx-post{{#if this.reply.is_best}} tx-post--best{{/if}}">
        <span class="tx-beam"></span>
        <div class="tx-rail">
            <span class="tx-hex">
                <img src="{{ this.user.avatar_url }}" alt="{{ this.user.username }}" />
            </span>
            <a href="{{ this.user.profile_url }}" class="tx-name">{{ this.user.username }}</a>
            {{#if this.user.is_staff}}<span class="tx-staff">{{ this.user.group_name }}</span>{{/if}}
            {{#if this.reply.is_op}}<span class="tx-origin">Origin</span>{{/if}}
            <span class="tx-data">{{ this.user.num_posts }} posts</span>
            <span class="tx-data">Est. {{ this.user.joined_long }}</span>
        </div>
        <div class="tx-main">
            <div class="tx-bar">
                {{#if this.reply.is_best}}<span class="tx-best"><span class="fa-solid fa-circle-check"></span> Verified answer</span>{{/if}}
                <a href="{{ this.reply.permalink }}" class="tx-time">{{ this.reply.created_at }}</a>
                {{{ this.reply.meta }}}
            </div>
            <div class="tx-body">
                {{{ this.reply.body }}}
            </div>
            <div class="tx-actions">
                {{{ this.reply.actions }}}
            </div>
        </div>
    </div>
</div>
{{/each}}
{{#if pagination.has_pages}}
<div class="tx-pages">
    Page {{ pagination.current_page }} of {{ pagination.last_page }}
    {{#if pagination.prev_url}}<a href="{{ pagination.prev_url }}">Previous</a>{{/if}}
    {{#if pagination.next_url}}<a href="{{ pagination.next_url }}">Next</a>{{/if}}
</div>
{{/if}}
</div>

CSS:

.tx { display: flex; flex-direction: column; gap: 1.1rem; padding: 0.9rem; counter-reset: txsig; }
.tx-post { counter-increment: txsig; position: relative; display: flex; background: #0a0d18; border: 1px solid rgba(122, 92, 255, 0.3); border-radius: 0.8rem; color: rgba(255, 255, 255, 0.88); overflow: hidden; }
.tx-post::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px); pointer-events: none; z-index: 0; }
.tx-post::after { content: "SIG " counter(txsig, decimal-leading-zero); position: absolute; top: 0.5rem; right: 0.9rem; font-size: 2.6rem; font-weight: 900; letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.05); pointer-events: none; font-variant-numeric: tabular-nums; }
.tx-beam { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #59f3ff, #7a5cff, #ff5ee7, #59f3ff); background-size: 300% 100%; animation: txFlow 5s linear infinite; z-index: 1; }
.tx-post--best { border-color: #59f3ff; box-shadow: 0 0 26px rgba(89, 243, 255, 0.18); }
.tx-rail { position: relative; z-index: 1; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 9.5rem; padding: 1.3rem 0.8rem; border-right: 1px solid rgba(122, 92, 255, 0.25); text-align: center; }
.tx-hex { display: block; width: 3.6rem; height: 3.6rem; padding: 2px; background: linear-gradient(160deg, #59f3ff, #7a5cff); clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.tx-hex img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.tx-name { margin-top: 0.35rem; font-size: 0.92rem; font-weight: 800; color: #fff; text-decoration: none; }
.tx-name:hover { color: #59f3ff; text-shadow: 0 0 14px rgba(89, 243, 255, 0.8); }
.tx-staff { font-size: 0.54rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; text-shadow: 0.08em 0 0 rgba(255, 94, 231, 0.85), -0.08em 0 0 rgba(89, 243, 255, 0.85); }
.tx-origin { font-size: 0.52rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #0a0d18; background: linear-gradient(90deg, #59f3ff, #ff5ee7); padding: 0.15rem 0.55rem; border-radius: 999px; }
.tx-data { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.tx-main { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tx-bar { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 1rem; border-bottom: 1px solid rgba(122, 92, 255, 0.22); font-size: 0.74rem; }
.tx-best { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #59f3ff; }
.tx-time { color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.tx-time:hover { color: #59f3ff; }
.tx-bar .post-layout-meta { margin-left: auto; display: inline-flex; align-items: center; gap: 0.5rem; }
.tx-bar .post-layout-meta__number { font-size: 0.72rem; font-weight: 800; color: rgba(255, 255, 255, 0.45); text-decoration: none; }
.tx-bar .post-layout-meta__number:hover { color: #59f3ff; }
.tx-body { padding: 1rem 1.1rem 0.5rem; }
.tx-body .content { color: rgba(255, 255, 255, 0.88); }
.tx-body .content a { color: #59f3ff; }
.tx-body .content blockquote { background: rgba(122, 92, 255, 0.12); border-left: 3px solid #7a5cff; }
.tx-body .editby { color: rgba(255, 255, 255, 0.45); }
.tx-body .signature { border-top: 1px solid rgba(122, 92, 255, 0.2); color: rgba(255, 255, 255, 0.55); }
.tx-actions { display: flex; padding: 0.5rem 1rem 0.75rem; margin-top: auto; }
.tx-actions .reply-action-group { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.tx-actions .reply-action-group--reply { margin-left: auto; }
.tx-actions .btn { background: transparent; border: 1px solid rgba(122, 92, 255, 0.4); color: rgba(255, 255, 255, 0.75); }
.tx-actions .btn:hover { border-color: #59f3ff; color: #59f3ff; box-shadow: 0 0 12px rgba(89, 243, 255, 0.25); }
.tx-pages { padding: 0.2rem 0.3rem; font-size: 0.78rem; opacity: 0.85; display: flex; gap: 0.8rem; }
.tx-pages a { color: var(--fs-link-color, inherit); font-weight: 600; text-decoration: none; }
.tx-pages a:hover { text-decoration: underline; }
@keyframes txFlow { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) { .tx-beam { animation: none; } }
@media (max-width: 760px) {
    .tx-post { flex-direction: column; }
    .tx-rail { flex-direction: row; width: 100%; padding: 0.8rem 1rem; border-right: 0; border-bottom: 1px solid rgba(122, 92, 255, 0.25); text-align: left; align-items: center; gap: 0.6rem; }
    .tx-hex { width: 2.4rem; height: 2.4rem; }
    .tx-name { margin-top: 0; }
    .tx-data { display: none; }
    .tx-post::after { font-size: 1.7rem; }
}

5 replies
NeoMetallix · 3 months ago

I like the second example but I noticed a problem. It gets rid of the "tip" button if you use it. I'm not sure what variable that is. It also doesn't have the member card that appears during hover.

Cedric OP · 3 months ago

On Jul 24, 2026, IntellectualLiberation said:

I like the second example but I noticed a problem. It gets rid of the "tip" button if you use it. I'm not sure what variable that is.

The tip button is part of the Credits extension. That too had a bit of work done in the new version where it's possible to give a credits tip on a post. But good point, I'll add it back in at some point.

NeoMetallix · 2 months ago

@cedric is there a variable that identifies the logged in user? Is it possible to make the posts by you styled differently?

Cedric OP · 2 months ago

On Jul 26, 2026, IntellectualLiberation said:

@cedric is there a variable that identifies the logged in user? Is it possible to make the posts by you styled differently?

I haven't tested this, and there is no general version where every member sees their own posts highlighted, but I assume you want posts made by you highlighted and no one else.

I think this should work though: the author's username is available in the template, and it works as a CSS hook. In a custom reply template you can wrap the post like <article class="post" data-author="{{user.username}}"> and then style [data-author="IntellectualLiberation"] in the theme CSS. So "make posts by you look different" works today for a fixed, named user (or certain other staff members, etc.).

I can probably wire a per group setting where posts are highlighted in a next version though.

NeoMetallix · 2 months ago

On Jul 26, 2026, Cedric said:

I haven't tested this, and there is no general version where every member sees their own posts highlighted, but I assume you want posts made by you highlighted and no one else.

I think this should work though: the author's username is available in the template, and it works as a CSS hook. In a custom reply template you can wrap the post like <article class="post" data-author="{{user.username}}"> and then style [data-author="IntellectualLiberation"] in the theme CSS. So "make posts by you look different" works today for a fixed, named user (or certain other staff members, etc.).

I can probably wire a per group setting where posts are highlighted in a next version though.

Actually, that's what I meant. A general version where every member sees their own posts highlighted. Kind of like a group text where your own texts are a different color. I see that isn't possible(yet) but thanks for the consideration in a future update. :)

Create a free account to join the conversation.
Sign up free
ForumSpark © 2023 - 2026 · ForumSpark.net · Terms