Free Mod Horizontal Postbit Layout for vB6

[glennrocksvb]

vB6 only uses horizontal postbit layout when in mobile view but not in desktop view. If you want to also do it on desktop, then you are in the right place!

Here are the instructions. This is compatible with self-hosted vB6 and vBCloud. For vB5, you can get it here.

1. Log in to the forum with Can Use Sitebuilder permissions. Typically, users in Administrator usergroup have this permission.
2. Navigate to a topic page.
3. Toggle Edite Site to ON.
4. Click Edit Page
5. Find the Static HTML Module under the Add Modules tab.
6. Drag the module and drop it onto the page above the Conversation Detail Module. Make sure it is placed right above and not below the Conversation Detail Module.
7. Edit the Static HTML Module by clicking the Pencil icon.
8. Configure the module with the following settings:
   1. Title - Horizontal Postbit Layout JS
   2. Show module at these screen sizes: - uncheck all 3 checkboxes. Doing this will still render the module but it will be hidden via CSS. We don't want to show this module as it will only contain CSS and JS.
   3. Module HTML - paste the following code:
      

      		<style>
      		.l-desktop #thread-view-tab .conversation-content .thread-view:not(.l-small) {
      		 opacity: 0;
      		}
      		</style>
      		<script>
      		document.addEventListener('readystatechange', function() {
      		 if (document.readyState === "interactive") {
      		   var threadView = document.querySelector('.l-desktop #thread-view-tab .conversation-content .thread-view');
      		   if (threadView) {
      		     threadView.classList.add('l-small');
      		   }
      		 }
      		});
      		</script>

   4. Module Permissions - Choose "Show to all Usergroups" radio button.
   5. Hide Title - Choose Yes or No, it doesn't matter as the module is not shown anyway
9. Click the Save button.
10. Reload the page.

This modification is offered free of charge, but if you find it useful, please consider making a donation to support our continued development of high-quality mods. Thanks!

[Eolesen]

Yep, it works.

One of the user setting options I have my forums is a user profile setting for the left or horizontal postbit. To take advantage of that, Glenn's approach needed a couple tweaks for that to kick in.

1. Created "custom_horizontal_postbit" as a template which contains Glenn's code above, plus the statements needed to pull and validate the user profile setting. In my case, it's stored in field18 but that value will vary if you try doing the same based on your own database schema.
2. Instead of the Static HTML widget, I used the Display Template widget in the same location, which then calls "custom_horizontal_postbit"

<vb:comment>START Extra CSS and Script elements for the Horizontal Postbit </vb:comment>
<vb:if condition="$user['userid'] > 1">
{vb:data userInfo, user, fetchUserInfo, {vb:raw user.userid}}
<vb:if condition="$userInfo['field18'] == 'Horizontal'">
{vb:cssExtra css_add_horizontal.css}
<!---- Horizontal Userinfo ---->
<style>
.l-desktop #thread-view-tab .conversation-content .thread-view:not(.l-small) {
opacity: 0;
}
</style>
<script>
document.addEventListener('readystatechange', function() {
if (document.readyState === "interactive") {
var threadView = document.querySelector('.l-desktop #thread-view-tab .conversation-content .thread-view');
if (threadView) {
threadView.classList.add('l-small');
}
}
});
</script>
<vb:else />
<!---- Left Userinfo ---->
</vb:if>
<vb:else />
<!---- Guest Settings ---->
</vb:if>
<vb:comment> END Extra CSS and Script elements for the Horizontal Postbit </vb:comment>​

[glennrocksvb]

Nice work integrating my solution to your use case.

But I wonder what the css_add_horizontal.css CSS template is for?

[Eolesen]

Onto part 2 of my experiment.... this is what the css_add_horizontal.css does:

.l-small .b-userinfo__additional-info-block {

position: absolute;
top: 40px;
left: 75%;
margin-top: 4px;
text-align: right;
}
​

Default:



With your code and the CSS above:



Moving the user additional info to the right side makes this almost like what we had in vB4, and conserves some vertical space.

[SGard63]

Does this work with 6.1.1?