Announcement

Collapse
No announcement yet.

Horizontal Postbit Layout

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

    Official - Free 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.

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

          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.

              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;
                }

                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

                    Working...
                    X