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