No announcement yet.

Horizontal Postbit Layout

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.

    /* 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.

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

    thanks BOSS