Pinned and Locked

[Felix2]

This will add a simple yet lacking little feature to vB5x.
The pinned and locked icons.
Before and after
I originally planned to just edit the LTR sprites image but discovered a very annoying issue.
If for example the topic is both sticky and closed, only 1 sprite is displayed.
I found this message while looking into the matter.

There's a problem here. Topic read state is set by javascript not the node API.
Also it's better to seperate different status into different class, for example:
hot unread (2 classes) instead of hot-unread (1 class) -- Xiaoyu

The problem applies to any 2 or more combinations of topicPrefix. So, close the sticky topic, and I lost my Pinned icon.

New approach, hack it.
In templates, under Display Templates, search for display_Topics_item
You are looking for 2 entries, each the same. Line 155, 329

                    <vb:if condition="!empty($topicPrefix)"><span class="prefix js-prefix">{vb:raw topicPrefix}: </span></vb:if>

replace it with

                    <vb:if condition="!empty($topicPrefix)"><span class="prefix js-prefix">{vb:raw topicPrefix}<vb:if condition="$topic['sticky']"><img class="pinned" src="[B]/images[/B]/pinned.png" width="16" height="16" alt="" /></vb:if>: </span></vb:if>

Add your sprite,
I store all my sites extra graphics in /images/ If you don't want it there, modify the code.

Next, the removal of the raw topicPrefix and replacing with other images.
Because it is an all or nothing situation at this time.

By adding this code

<vb:if condition="$topic['showopen'] == 0"><img class="locked" src="/images/locked.png" width="16" height="16" alt="" /></vb:if>

The closed statement now triggers a Locked icon.



Remove the text output

{vb:raw topicPrefix}

and add the info to the image ALT tags, and we now have as the final code change-

                    <vb:if condition="!empty($topicPrefix)"><span class="prefix js-prefix"><vb:if condition="$topic['showopen'] == 0"><img class="locked" src="/images/locked.png" width="16" height="16" alt="Locked" /></vb:if><vb:if condition="$topic['sticky']"><img class="pinned" src="/images/pinned.png" width="16" height="16" alt="Pinned" /></vb:if>: </span></vb:if>

Now, I don't know about you, but I find that a lot more cosmetically pleasing.

[Calamity]

Hi Felix,

That looks really cool IMO, but the only thing I had to point out is... at least in your screenshots the text seems to be 'pushed up', and doesn't allign with the ":" at all. Is that still a problem when using this code?
If so, is there an easy way to fix that? Just me nitpicking. :P I hope you see what I was refering to.

[Felix2]

text seems to be 'pushed up'

Change the size of the Pinned icon

[Calamity]

Change the size of the Pinned icon

Thanks! I thought it would be something like that. I'll add this to my website in a bit. Thanks for sharing.

[Felix2]

Here is a little update.
I have resized the icons themselves and removed the sizing code. I also added the TITLE tag.

                    <vb:if condition="!empty($topicPrefix)"><span class="prefix js-prefix"><vb:if condition="$topic['showopen'] == 0"><img class="locked" src="/images/locked.png" title="Locked" alt="Locked" /></vb:if><vb:if condition="$topic['sticky']"><img class="pinned" src="/images/pinned.png" title="Pinned" alt="Pinned" /></vb:if>: </span></vb:if>

[Calamity]

Very nice! Appreciate the update.

[glennrocksvb]

I haven't tried it but I think you don't have to hack the template to have 2 icons. You can do it with pure CSS.

With CSS3, you can apply multiple backgrounds to a single element.
https://developer.mozilla.org/en-US/...le_backgrounds

So for closed sticky unread topics, you can do this:

.closed.sticky .vb-icon-topic-status {
    background: [I]background1[/I], [I]background2[/I];
}

You can go even further and provide new icon for read closed sticky topics:

.read.closed.sticky .vb-icon-topic-status {
    background: [I]background1[/I], [I]background2[/I], [I]background3[/I];
}

Or even for unread closed sticky topics the user has posted in:

.posted.closed.sticky .vb-icon-topic-status {
    background: [I]background1[/I], [I]background2[/I], [I]background3[/I];
}

or for read closed sticky topics the user has posted in:

.posted.read.closed.sticky .vb-icon-topic-status {
    background: [I]background1[/I], [I]background2[/I], [I]background3[/I], [I]background4[/I];
}

vB5 by default is already using this technique to overlay this image on top of the paper icon to indicate to user that they have posted in that topic.

/* unread topic the user has posted in */
.posted .vb-icon-topic-status {
    background: url("images/topic-posted-ltr.png") no-repeat,url("images/css/sprite_icons_vb_ltr.png") -100px -240px;
}
/*read topic the user has posted in */
.posted .vb-icon-topic-status {
    background: url("images/topic-posted-ltr.png") no-repeat,url("images/css/sprite_icons_vb_ltr.png") -68px -240px;
}

The result is:

[webmsg]

Great!!

Thank you