XF 2.0 New Post Icon Column

[Disciple of Nagash]

Hi,

One of the pieces of feedback I've had on my forum is around the highlighting of threads which have new posts. Whilst the thread title is bolded, many feel that function we had on our old software, of an icon in a column left of the post to be clearer.

I'd agree that it was much clearer, as the icons in that column clearly showed new posts, hot topic, and locked.

Is there anyway to do this in XF2, I couldn't find an addon for it?

 

[Russ]

Pretty easy to do, you can style each icon accordingly. I put them in a sort of "priority order".



Open thread_list_macros

Find:

<div class="structItem-cell structItem-cell--main" data-xf-init="touch-proxy">

Add right above that line:

        <div class="structItem-cell structItem-cell--readIcon{{ ($thread.isUnread() AND !$forceRead) ? ' unreadIcon' : ' readIcon' }}">
                <xf:if is="$thread.sticky">
                <i class="fa fa-thumb-tack fa-fw" aria-hidden="true" data-xf-init="tooltip" title="{{ phrase('sticky') }}"></i>
                <xf:elseif is="!$thread.discussion_open" />
                <i class="fa fa-lock fa-fw" aria-hidden="true" data-xf-init="tooltip" title="{{ phrase('locked') }}"></i>
                <xf:elseif is="$thread.discussion_type == 'poll'" />
                <i class="fa fa-bar-chart fa-fw" aria-hidden="true" data-xf-init="tooltip" title="{{ phrase('poll') }}"></i>
                <xf:elseif is="$thread.isUnread()" />
                <i class="fa fa-comments fa-fw" aria-hidden="true" data-xf-init="tooltip" title="{{ phrase('new_posts_unread') }}"></i>
                <xf:else />
                <i class="fa fa-comments-o fa-fw" aria-hidden="true" data-xf-init="tooltip" title="Read"></i>
                </xf:if>
        </div>

Then add to your extra.less:

.structItem-cell--readIcon
{
    width: 40px;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
}

It's easy to adjust the icons, also may need to change the tooltip on "Read" I couldn't find a decent phrase (didn't look long).

Also included "unreadIcon" in the parent class so you could style each icon even further:

.structItem-cell--readIcon .fa-thumb-tack { color: pink; }
.structItem-cell--readIcon.unreadIcon .fa-thumb-tack { color: yellow; }

This way, your sticky icon would be pink if it's read, yellow if it's unread. Anyways, hope that helps . No way out of the box to display a "hot topic" by the way.

 

[Vanjoe]

Is it possible to apply a similar setup or just an "unread" indicator in the latest posts sidebar?

 

[Disciple of Nagash]

Thanks @Russ I'll give this a go

 

[Disciple of Nagash]

So that works really well, however, how do I change the icons to custom ones?

 

[Russ]

So that works really well, however, how do I change the icons to custom ones?

Instead of placing a font-awesome icon, just use an image of your choice:

<img src="styles/default/locked-icon.png" data-xf-init="tooltip" title="{{ phrase('locked') }}" />

Is it possible to apply a similar setup or just an "unread" indicator in the latest posts sidebar?

I think this would work, edit template: thread_list_macros,

Find:

<div class="contentRow-main contentRow-main--close">

Add right above:

            <div class="widget-icon">
            <xf:if is="$thread.isUnread()">
                <i class="fa fa-comments fa-fw" aria-hidden="true" data-xf-init="tooltip" title="{{ phrase('new_posts_unread') }}"></i>
            <xf:else />
                <i class="fa fa-comments-o fa-fw" aria-hidden="true" data-xf-init="tooltip" title="Read"></i>
            </xf:if>
            </div>>

There are 2 instances of it. Then you can use .widget-icon { color: red; } or whatever to style it how you want.

 

[zackm]

Can this be done in 2.1?

 

[Russ]

Can this be done in 2.1?

My code would work for 2.1 (it should at least).