Announcement

Collapse
No announcement yet.

Pinned and Locked

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Pinned and Locked

    This will add a simple yet lacking little feature to vB5x.
    The pinned and locked icons.
    Before Click image for larger version

Name:	Clipboard01.jpg
Views:	341
Size:	5.2 KB
ID:	1171and after Click image for larger version

Name:	Clipboard02.jpg
Views:	237
Size:	5.5 KB
ID:	1172
    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

    Code:
                        <vb:if condition="!empty($topicPrefix)"><span class="prefix js-prefix">{vb:raw topicPrefix}: </span></vb:if>
    replace it with
    Code:
                        <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, Click image for larger version

Name:	pinned.png
Views:	239
Size:	3.4 KB
ID:	1173
    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
    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.
    Click image for larger version

Name:	locked.png
Views:	214
Size:	2.6 KB
ID:	1174


    Remove the text output
    Code:
    {vb:raw topicPrefix}
    and add the info to the image ALT tags, and we now have as the final code change-

    Code:
                        <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>

    Click image for larger version

Name:	Clipboard05.jpg
Views:	202
Size:	14.0 KB
ID:	1175

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

    #2
    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.

    Comment


      #3
      Originally posted by Calamity View Post
      text seems to be 'pushed up'
      Change the size of the Pinned icon

      Comment


        #4
        Originally posted by Felix2 View Post
        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.

        Comment


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

          Code:
                              <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>
          Click image for larger version

Name:	locked.png
Views:	98
Size:	731 Bytes
ID:	1187Click image for larger version

Name:	pinned.png
Views:	97
Size:	500 Bytes
ID:	1188

          Click image for larger version

Name:	Clipboard01.jpg
Views:	96
Size:	14.5 KB
ID:	1189

          Comment


            #6
            Very nice! Appreciate the update.

            Comment


              #7
              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:

              Code:
              .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:

              Code:
              .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:
              Code:
              .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:
              Code:
              .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.
              Code:
              /* 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: Click image for larger version

Name:	icons.png
Views:	104
Size:	9.2 KB
ID:	1199

              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


                #8
                Great!!

                Thank you

                Comment

                Users Viewing This Page

                Collapse

                There is 1 user viewing this forum topic.

                • Guest Guest

                Latest Posts

                Collapse

                Working...
                X
                Searching...Please wait.
                An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                Please push the back button and reload the previous window.'
                An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                Please push the back button and reload the previous window.'
                An internal error has occurred and the module cannot be displayed.
                There are no results that meet this criteria.
                Search Result for "|||"