Announcement

Collapse
No announcement yet.

Display Status Update in Postbit

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

    Official - Free Display Status Update in Postbit

    Status Update is built-in to vBulletin 5. Updating status is done on your User Profile page under About tab but it only shows up below your avatar and name on your User Profile page. This modification exposes it a bit more by displaying it in the postbit section of a post in a thread. This will encourage forum members to update their status.

    Demo:
    See my status update in the postbit section of this thread.

    (Optional) If you want to customize the look and feel of the status update text, you can add custom CSS in css_additional.css template or via Sitebuilder > Style > CSS Editor. See sample below:

    To customize CSS of the status:
    Code:
    .vb5-noypiscripter-status-update-postbit {
        /* Custom CSS here */
        font-style: italic; /* sample style */
    }
    If you want to customize the style of quotation marks, use this CSS rule:
    Code:
    .vb5-noypiscripter-status-update-postbit span {
        /* Custom CSS here */
    }
    If you want to hide the quotation marks, use this CSS rule:
    Code:
    .vb5-noypiscripter-status-update-postbit span {
        display: none;
    }
    If you want to customize the opening and closing quotation marks by using different background images, use these CSS rules:
    Code:
    .vb5-noypiscripter-status-update-postbit span {
        display: inline-block;
        width: <width of background>px;
        height: <height of background>px;
        text-indent: -99999px;
        overflow: hidden;
    }
    /* for opening quotation mark */
    .vb5-noypiscripter-status-update-postbit span:first-child {
        background: transparent url("path/to/the/opening/quotes.png") no-repeat; /* you can use sprites if you want */
    }
    /* for closing quotation mark */
    .vb5-noypiscripter-status-update-postbit span:first-child + span {
        background: transparent url("path/to/the/closing/quotes.png") no-repeat;  /* you can use sprites if you want */
    }
    If you want to customize the opening and closing quotation marks by using the existing background image icon for the Quote control in posts, use these CSS rules: (I'm using these here in this forum)
    Code:
    .vb5-noypiscripter-status-update-postbit span {
        background: transparent url("images/css/sprite_icons_vb_ltr.png") no-repeat scroll -16px -80px;
        width: 13px;
        height: 12px;
        display: inline-block;
        text-indent: -99999px;
        overflow: hidden;
    }
    .vb5-noypiscripter-status-update-postbit span:first-child {    
        margin-right: 2px;
        margin-left: -13px;
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }
    .vb5-noypiscripter-status-update-postbit span:first-child + span {
        margin-left: 2px;
        margin-right: -13px;
    }
    Download the zip file, uncompress it and upload the XML in AdminCP > Products & Hooks > Manage Products > [Add/Import Product].
    Attached Files
    Last edited by glennrocksvb; 05-08-2019, 10:38 PM.

    #2
    works well, thank you. Unfortunately I could not set up to look like your

    Comment


    • glennrocksvb
      glennrocksvb commented
      Editing a comment
      See post #13

    #3
    I added extra cool CSS to style it and move it up above Join Date.

    Comment


    • nijohn
      nijohn commented
      Editing a comment
      Can you please share the css code ?

    • glennrocksvb
      glennrocksvb commented
      Editing a comment
      CSS for moving the status update up is on post #13

    • nijohn
      nijohn commented
      Editing a comment
      How to make it look exactly like yours ?

    #4
    Hey Glenrocks, I just posted a review on hotscripts for this product, but when I clicked visit publisher site to confirm it was you, the link is broken. I don't want my review to be useless. Let me know where I can publish a review that will help you. I really like this product. I could not get it to have anything but a transparent background, so it doesn't stand out like yours, but that is likely user error. You can see what I mean if you visit my site agentlinkus dot com, and find Kim Knox. Regardless, I find it very useful to encourage members to login AND to post updates. On my site, it will probably be used for advertising more than anything.

    Comment


      #5
      Thanks for the review KimK . I have yet to update the links in Hotscripts to point to this site. It is currently pointing to my old site that I just transferred to a new domain registrar, that's why it's broken.

      Comment


      #6
      Hey I went in to give you a 5 star rating, but vbulletin says I cannot rate that particular thread. I will let them know. I was able to mark it installed and vote for motm.
      Oddly, this mod is showing my status updates in other members postbits. It seems to be happening with people that I have banned, but did not delete all posts, or unregistered users. It also comes up with my Location. My usergroup is admin. Any ideas of how to resolve?

      Comment


        #7
        Here is a screenshot. They both have my location and my status update.

        Comment


          #8
          That's odd. I'll take a look.

          Btw, thanks for the rating and nomination.

          Comment


            #9
            Works great! Thanks Glenn,

            I noticed on this page at Vbmods.rocks and on mine that there is now too much template width. I think it is this code that is adding width to the forum:

            Code:
            .vb5-noypiscripter-status-update-postbit span { 
                 text-indent: -99999px; }
            Click image for larger version

Name:	postbit space.jpg
Views:	24
Size:	59.6 KB
ID:	513

            Comment


              #10
              Originally posted by William View Post
              Works great! Thanks Glenn,

              I noticed on this page at Vbmods.rocks and on mine that there is now too much template width. I think it is this code that is adding width to the forum:

              Code:
              .vb5-noypiscripter-status-update-postbit span {
              text-indent: -99999px; }
              [ATTACH=CONFIG]n513[/ATTACH]
              That was a good catch! Thanks.

              Change it to:

              Code:
              text-indent: 100%;
              EDIT 1: Seems like still not fixed. Investigating...
              EDIT 2: Fixed. Disregard this post and see next post for the fix.

              Comment


                #11
                Seems like I fixed the issue by keeping text-indent -99999px and adding overflow: hidden. Please see updated CSS in the first post.
                .

                Comment


                  #12
                  Works perfect Glenn. Question, how can I change the order or where the post bit update information is located? Mine is after other postbit information, but I'd like it to be as you have it here in this forum.


                  Click image for larger version

Name:	order.jpg
Views:	19
Size:	64.2 KB
ID:	517

                  Comment


                    #13
                    You have to add b-userinfo__additional-info class to the Denomination custom field just like the default fields have. Then add this CSS to re-order the fields and put the status update on top.


                    Code:
                    .b-userinfo__additional-info-block {
                        display: flex;
                        flex-flow: column wrap;
                    }
                    
                    .vb5-noypiscripter-status-update-postbit {
                        order: 1 !important;
                        margin: 10px 0 20px 0; /* you may need to tweak this to adjust to your needs */
                    }
                    
                    /* for mobile */
                    .l-small .vb5-noypiscripter-status-update-postbit {
                        margin-left: 15px; /* you may need to tweak this to adjust to your needs */
                    }
                    
                    .b-userinfo__additional-info-block .b-userinfo__additional-info:first-child {
                        order: 2;
                    }
                    
                    .b-userinfo__additional-info-block .b-userinfo__additional-info:nth-child(2) {
                        order: 3;
                    }
                    
                    .b-userinfo__additional-info-block .b-userinfo__additional-info:nth-child(3) {
                        order: 4;
                    }
                    
                    .b-userinfo__additional-info-block .b-userinfo__additional-info:nth-child(4) {
                        order: 5;
                    }
                    
                    .b-userinfo__additional-info-block .b-userinfo__additional-info:nth-child(5) {
                        order: 6;
                    }
                    
                    .b-userinfo__additional-info-block .b-userinfo__additional-info:nth-child(6) {
                        order: 7;
                    }
                    
                    .b-userinfo__additional-info-block .b-userinfo__additional-info:nth-child(7) {
                        order: 8;
                    }
                    
                    .b-userinfo__additional-info-block .b-userinfo__additional-info:nth-child(8) {
                        order: 9;
                    }
                    
                    .b-userinfo__additional-info-block .b-userinfo__additional-info:nth-child(9) {
                        order: 10;
                    }
                    
                    .b-userinfo__additional-info-block .b-userinfo__additional-info:nth-child(10) {
                        order: 11;
                    }
                    That would work for up to 10 custom fields. Add more (based on the pattern) if needed.
                    Last edited by glennrocksvb; 09-07-2016, 01:09 PM. Reason: Updated CSS again

                    Comment


                      #14
                      Originally posted by glennrocksvb View Post
                      You have to add b-userinfo__additional-info class to the Denomination custom field just like the default fields have. Then add this CSS to re-order the fields and put the status update on top.
                      A little help:

                      Here's the code that was added it to conversation_userinfo template below {vb:hook 'conversation_userstats'}:
                      Code:
                      {vb:data postInfo, user, fetchProfileInfo, {vb:raw conversation.userid}}
                      <vb:if condition="$postInfo['field15']"><li><label>{vb:phrase field15_title}:</lable>
                          <span>{vb:raw postInfo.customFields.default.field15_title.val}</span></li>
                      </vb:if>
                      How would I add b-userinfo__additional-info?

                      I take it that this is what you meant?

                      thanks,
                      William


                      Comment


                        #15
                        Please disregard Glenn, I figured it out:

                        Code:
                        <ul class="b-userinfo__additional-info">
                        Thank you very much!
                        William

                        Comment

                        Working...
                        X