Custom Templates: Post rail template

I realize sometimes things can get a little overwhelming. But possibilities within ForumSpark's customization are quite endless. Themes, widgets, posts, custom templates all have a pretty extended way possible in customization. Here are a few examples for the Post rail template:

For this example above, you'd set your post rail template like this:

<div class="cc">
    <div class="cc-band"></div>
    <div class="cc-avwrap">
        <img class="cc-av" src="{{ user.avatar_url }}" alt="{{ user.username }}" />
        {{#if user.is_online}}<span class="cc-online"></span>{{/if}}
    </div>
    {{#if user.is_staff}}<div><span class="cc-staff">{{ user.is_staff }}</span></div>{{/if}}
    <div class="cc-title">{{#if user.custom_title}}{{ user.custom_title }}{{else}}{{ user.rank }}{{/if}}</div>
    {{#if user.group_image_url}}
        <img class="cc-banner" src="{{ user.group_image_url }}" alt="{{ user.group_name }}" />
    {{else}}
        <span class="cc-group">{{ user.group_name }}</span>
    {{/if}}
    <div class="cc-stats">
        <div class="cc-stat"><b>{{ user.num_posts }}</b><span>Posts</span></div>
        <div class="cc-stat"><b>{{ user.reputation }}</b><span>Rep</span></div>
    </div>
    {{#if user.trust_level}}
        <div class="cc-chip"><span class="fa-solid fa-shield-halved"></span> {{ user.trust_level }}</div>
    {{/if}}
    {{#if user.credits}}
        <div class="cc-chip"><span class="fa-solid fa-coins"></span> {{ user.credits }}</div>
    {{/if}}
    <div class="cc-shelf">
        {{#each user.achievements}}
            {{#if this.icon}}
                <img class="cc-ach" src="{{ this.icon }}" alt="{{ this.name }}" />
            {{else}}
                <span class="cc-ach-fallback fa-solid fa-trophy"></span>
            {{/if}}
        {{/each}}
    </div>
    <div class="cc-foot"><span class="fa-regular fa-calendar"></span> {{ user.joined_long }}{{#if user.location}} · <span class="fa-solid fa-location-dot"></span> {{ user.location }}{{/if}}</div>
</div>

And put this in Custom CSS:

.cc { margin-top: 0.2rem; }
.cc-band { height: 2.7rem; margin: 0 -0.3rem; border-radius: 0.6rem; background: linear-gradient(135deg, var(--fs-panel-title-from, #003049), var(--fs-panel-footer-accent, #35a377)); }
.cc-avwrap { position: relative; display: inline-block; margin-top: -2rem; }
.cc-av { width: 4.6rem; height: 4.6rem; object-fit: cover; border-radius: 50%; border: 3px solid var(--fs-panel-section-bg, #f8f9fe); box-shadow: 0 5px 14px rgba(0, 0, 0, 0.22); }
.cc-online { position: absolute; bottom: 0.25rem; right: 0.25rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--fs-online-active, #30a661); border: 2px solid var(--fs-panel-section-bg, #fff); }
.cc-staff { display: inline-block; margin-top: 0.3rem; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--fs-panel-footer-accent, #35a377); border-radius: 999px; padding: 0.16rem 0.6rem; }
.cc-title { margin-top: 0.3rem; font-size: 0.68rem; font-style: italic; opacity: 0.75; }
.cc-banner { margin: 0.4rem auto 0; max-width: 100%; }
.cc-group { display: inline-block; margin-top: 0.35rem; font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.6; }
.cc-stats { display: flex; gap: 0.35rem; margin-top: 0.55rem; }
.cc-stat { flex: 1; background: rgba(128, 128, 128, 0.1); border: 1px solid rgba(128, 128, 128, 0.16); border-radius: 0.55rem; padding: 0.4rem 0.15rem; }
.cc-stat b { display: block; font-size: 0.82rem; }
.cc-stat span { font-size: 0.52rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; }
.cc-chip { margin-top: 0.35rem; font-size: 0.64rem; background: rgba(128, 128, 128, 0.1); border: 1px solid rgba(128, 128, 128, 0.16); border-radius: 999px; padding: 0.25rem 0.5rem; }
.cc-chip .fa-solid { opacity: 0.7; margin-right: 0.2rem; font-size: 0.58rem; }
.cc-shelf { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.55rem; }
.cc-ach { width: 1.15rem; height: 1.15rem; object-fit: contain; }
.cc-ach-fallback { font-size: 0.9rem; color: #d9a520; }
.cc-foot { margin-top: 0.55rem; font-size: 0.58rem; opacity: 0.55; }
.cc-foot .fa-solid, .cc-foot .fa-regular { font-size: 0.52rem; }
@media (max-width: 1024px) {
    .cc-band, .cc-title, .cc-banner, .cc-group, .cc-stats, .cc-chip, .cc-shelf, .cc-foot, .cc-staff { display: none; }
    .cc-avwrap { margin-top: 0; }
    .cc-av { border-width: 2px; box-shadow: none; }
}

Another example:

Post rail code:

<div class="hc">
    <div class="hc-frame">
        <div class="hc-inner">
            <div class="hc-avhex">
                <img class="hc-av" src="{{ user.avatar_url }}" alt="{{ user.username }}" />
            </div>
            {{#if user.is_online}}<div class="hc-live"><span class="hc-live-dot"></span>Online</div>{{/if}}
            {{#if user.is_staff}}<div class="hc-staff">{{ user.is_staff }}</div>{{/if}}
            <div class="hc-title">{{#if user.custom_title}}{{ user.custom_title }}{{else}}{{ user.rank }}{{/if}}</div>
            <div class="hc-stat">
                <div class="hc-stat-top"><span>Posts</span><b>{{ user.num_posts }}</b></div>
                <div class="hc-bar"><span class="hc-fill hc-fill-a"></span></div>
            </div>
            <div class="hc-stat">
                <div class="hc-stat-top"><span>Rep</span><b>{{ user.reputation }}</b></div>
                <div class="hc-bar"><span class="hc-fill hc-fill-b"></span></div>
            </div>
            {{#if user.trust_level}}
            <div class="hc-stat">
                <div class="hc-stat-top"><span>Level</span><b>{{ user.trust_level }}</b></div>
                <div class="hc-bar"><span class="hc-fill hc-fill-c"></span></div>
            </div>
            {{/if}}
            <div class="hc-shelf">
                {{#each user.achievements}}
                    {{#if this.icon}}
                        <img class="hc-ach" src="{{ this.icon }}" alt="{{ this.name }}" />
                    {{else}}
                        <span class="hc-ach-fb fa-solid fa-trophy"></span>
                    {{/if}}
                {{/each}}
            </div>
            <div class="hc-foot">Est. {{ user.joined_long }}</div>
        </div>
    </div>
</div>

Custom CSS:

.hc { margin-top: 0.3rem; }
.hc-frame { position: relative; border-radius: 0.85rem; padding: 2px; overflow: hidden; }
.hc-frame::before { content: ""; position: absolute; inset: -60%; background: conic-gradient(from 0deg, #ff5ee7, #ffd76e, #59f3ff, #7a5cff, #ff5ee7); animation: hcSpin 6s linear infinite; }
.hc-inner { position: relative; border-radius: 0.72rem; background: #0d0f1e; padding: 0.85rem 0.6rem 0.75rem; color: rgba(255, 255, 255, 0.9); overflow: hidden; }
.hc-inner::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px); pointer-events: none; }
.hc-inner::after { content: ""; position: absolute; top: -150%; left: -70%; width: 55%; height: 320%; transform: rotate(25deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent); animation: hcSheen 5.5s ease-in-out infinite; pointer-events: none; }
.hc-avhex { width: 4.5rem; height: 4.5rem; margin: 0.15rem auto 0; padding: 2px; background: linear-gradient(160deg, #59f3ff, #7a5cff); clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.hc-av { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.hc-live { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.4rem; font-size: 0.5rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #3ddc84; }
.hc-live-dot { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: #3ddc84; animation: hcPulse 1.6s ease-in-out infinite; }
.hc-staff { margin-top: 0.35rem; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.22em; 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); }
.hc-title { margin-top: 0.3rem; font-size: 0.64rem; font-style: italic; color: rgba(255, 255, 255, 0.55); }
.hc-stat { margin-top: 0.55rem; text-align: left; }
.hc-stat-top { display: flex; justify-content: space-between; align-items: baseline; }
.hc-stat-top span { font-size: 0.5rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); }
.hc-stat-top b { font-size: 0.74rem; }
.hc-bar { height: 0.28rem; margin-top: 0.2rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.hc-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #59f3ff, #7a5cff, #ff5ee7, #59f3ff); background-size: 300% 100%; animation: hcFlow 4s linear infinite; }
.hc-fill-a { width: 78%; }
.hc-fill-b { width: 52%; animation-delay: -1.3s; }
.hc-fill-c { width: 90%; animation-delay: -2.6s; }
.hc-shelf { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; }
.hc-ach { width: 1.1rem; height: 1.1rem; object-fit: contain; }
.hc-ach-fb { font-size: 0.85rem; color: #ffd76e; }
.hc-foot { margin-top: 0.55rem; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); }
@keyframes hcSpin { to { transform: rotate(360deg); } }
@keyframes hcSheen { 0%, 55% { left: -70%; } 85%, 100% { left: 150%; } }
@keyframes hcPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes hcFlow { to { background-position: 300% 0; } }
@media (prefers-reduced-motion: reduce) {
    .hc-frame::before, .hc-inner::after, .hc-live-dot, .hc-fill { animation: none; }
}
@media (max-width: 1024px) {
    .hc-live, .hc-staff, .hc-title, .hc-stat, .hc-shelf, .hc-foot { display: none; }
    .hc { margin-top: 0; }
    .hc-frame { border-radius: 50%; padding: 2px; }
    .hc-inner { padding: 0; background: transparent; border-radius: 50%; }
    .hc-inner::before, .hc-inner::after { display: none; }
    .hc-avhex { width: 2.6rem; height: 2.6rem; margin: 0; clip-path: none; border-radius: 50%; padding: 0; background: none; }
    .hc-av { clip-path: none; border-radius: 50%; }
}

AI is pretty good at providing you some code based on what you want. Give it a try and customize to your preference. I'll give some more examples for other custom templates soon.