Announcement

Collapse
No announcement yet.

Horizontal Postbit Layout

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

    Free Mod Horizontal Postbit Layout

    vBulletin 5 does not have an option to use horizontal postbit layout compared to previous versions.

    It only uses horizontal postbit layout when in mobile view but not in desktop view. If you want to also do it on desktop, then add the following custom CSS in css_additional template in AdminCP or in Sitebuilder > Style > CSS Editor.

    Code:
    /* Horizontal Postbit Layout START */
    .b-post .js-post__content-wrapper {
        width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .b-post.b-post--first .js-post__content-wrapper .b-post__arrow {
        border-bottom-color: #EBF4F9; /* Change to the first post background color if you changed the default */
    }
    .b-post .js-post__content-wrapper .b-post__arrow {
        top: -10px;
        left: 39px;
        border-bottom: 10px solid #FFF; /* Change #FFF to the reply background color if you changed the default */
        border-top: none;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
    }
    .b-post .l-row .l-col__small--full {
        padding-left: 0;
        padding-right: 0 !important;
        width: 100% !important;
        float: none;
        margin-left: 0;
        margin-right: 0;
    }
    .b-post .b-userinfo__additional-info {
        display: inline-block;
        vertical-align: top;
        margin-right: 10px;
    }
    .b-post .l-row .l-col__small--full .b-userinfo {
        text-align: left;
        padding: 10px;
    }
    .b-post .l-row .l-col__small--full .b-userinfo .b-avatar {
        margin-right: 5px;
    }
    .b-post .l-row .l-col__small--full .b-userinfo .b-userinfo__details {
        display: inline-block;
        vertical-align: top;
    }
    .b-post .l-row .l-col__small--full .b-userinfo .b-userinfo__details .b-meter,
    .b-post .l-row .l-col__small--full .b-userinfo .b-userinfo__details .b-userinfo__additional-info-block {
        margin-top: 5px;
    }
    .b-post .l-row .l-col__small--full .b-userinfo .b-userinfo__details .b-userinfo__icons {
        top: 10px;
        bottom: auto;
        left: auto;
        right: 10px;
    }
    /* Horizontal Postbit Layout END */
    Note: This code is based off the vB5 Default Style. If you have a highly customized theme, you may need to tweak the CSS.
    Last edited by glennrocksvb; 03-01-2023, 09:18 PM.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    it's really good mod for all fourm with changed avatar size

    thanks BOSS

    Comment


      #3
      Wonderful dear
      Always creative

      Comment


        #4
        Hi,

        I tried it and it is almost functionnal but the facebook and twitter share buttons are not where they are supposed to be.
        Also, i guess it would be nice to have them side by side since we have more wide than high space in this view.

        It is too bad because this would actually allow us to change the conversation pages to a wide/narrow layout and use the narrow part to present users with other content. I guess it would be a great way to lower the bounce rate as for now user do not have any invitation du browse other pages than the discussion they landed on.

        Click image for larger version  Name:	06-08-2018 10-01-48.jpg Views:	1 Size:	20.4 KB ID:	12159

        Comment


          #5
          This mod was created when there was no Share buttons yet. I'll update the code.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          Comment


            #6
            That would be great, thanks a lot.

            Comment


              #7
              Try adding this:

              Code:
              .b-sharing-menu {
                  float: right;
                  position: relative;
                  top: -56px;
                  right: 10px;
              }
              Let me know if it works and I'll update the first post.
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


                #8
                It looks like the first code I provided pushes the post number a little bit to the left.

                Try this one instead:

                Code:
                .b-post .l-row .l-col__small--full {
                    position: relative;
                }
                .b-sharing-menu {
                    position: absolute;
                    bottom: 10px;
                    right: 10px;
                }
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #9
                  It looks great !
                  Thanks a lot, i will see if my users will accept this or not ...

                  Comment


                    #10
                    Super! Thanks a lot!

                    Comment


                      #11
                      I'd like to check out whether to give this as an alternative viewing option for my users.
                      After applying your code (With the addition in post #8) this is what I get:

                      Click image for larger version

Name:	RTLhorizontal.JPG
Views:	297
Size:	13.3 KB
ID:	14625

                      This doesn't seem right, I guess it needs to be set to RTL (recurring issue...)?

                      Thanks

                      Comment


                        #12
                        Originally posted by watershed View Post
                        This doesn't seem right, I guess it needs to be set to RTL (recurring issue...)?
                        Yes it's due to RTL. Try replacing all occurrences of right with {vb:stylevar right} and left with {vb:stylevar left}
                        Helpful? Donate. Thanks!
                        Buy me a coffeePayPal QR Code
                        Fast VPS Host for vBulletin:
                        A2 Hosting & IONOS

                        Comment


                          #13
                          Thanks! That did fix the alignment issue

                          However, I don't know if this is a bug or a feature, but there seems to be quite a lot of unused grey space in the postbit, here is what I see now:

                          Click image for larger version

Name:	horizontal_old.JPG
Views:	306
Size:	12.5 KB
ID:	14651

                          And here is what I would ideally prefer (made a mock with paint, social buttons should be lower):

                          Click image for larger version

Name:	horizontal_new.jpg
Views:	215
Size:	8.7 KB
ID:	14652

                          I guess it's the social buttons expanding the box, this can be fixed with CSS right? I'd appreciate it if you could direct me to the relevant value to play around with

                          Comment


                          • glennrocksvb
                            glennrocksvb commented
                            Editing a comment
                            I need to see and inspect it on your site in order to suggest a solution. But when I checked your site, it's not using the horizontal postbit layout.

                          #14
                          Originally posted by watershed View Post
                          Click image for larger version

Name:	horizontal_new.jpg
Views:	215
Size:	8.7 KB
ID:	14652
                          Wonderful
                          How did you do this dear ??
                          Best Regards

                          Comment


                            #15
                            Is there no way to get Membership History and Messages to the right?

                            Google Translate, sorry!

                            Comment


                            • glennrocksvb
                              glennrocksvb commented
                              Editing a comment
                              Which Membership History and Messages? Those seem to be custom postbit mod?

                          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 "|||"