# Postbit Changes (Phase II Upgrade)

**URL:** <https://community.unix.com/t/postbit-changes-phase-ii-upgrade/373197>\
**Category:** War Stories\
**Created:** [July 19, 2018, 4:47am UTC](https://community.unix.com/t/postbit-changes-phase-ii-upgrade/373197 "2018-07-19T04:47:18Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Neo](https://community.unix.com/user_avatar/community.unix.com/neo/32/22838_2.png) [@Neo](https://community.unix.com/u/Neo)\
**Post date:** [July 19, 2018, 4:47am UTC](https://community.unix.com/t/postbit-changes-phase-ii-upgrade/373197/1 "2018-07-19T04:47:18Z")

</div>

Next in the pipeline, thinking I will work on postbit (the core of the posts) and try to get Bootstrap and badges working in postbit and not break the quick editors in the post.

Note, I had to turn off the scrollbars in postbit for now because when I turn them on, it breaks the quick editor in posts.

Will keep you informed, as always.....

---

<div class="post-metadata">

**Author:** ![Neo](https://community.unix.com/user_avatar/community.unix.com/neo/32/22838_2.png) [@Neo](https://community.unix.com/u/Neo)\
**Post date:** [July 19, 2018, 6:07am UTC](https://community.unix.com/t/postbit-changes-phase-ii-upgrade/373197/2 "2018-07-19T06:07:08Z")

</div>

OK.... after a lot of analysis of the postbit HTML template, the first thing which must be done is to remove the tables from the 10 $templatehooks, and and search of the DB reveals only 2 plugins are using these template hooks:

```nohighlight
1. Thank You
2. Scott - 998 - Add History to PostBit Menu

```

However, the table in 998 is not an issue because that table is a small popup menu and does not need to be changed at this time.

The Thank You hack is important, so I need to covert all of these to divs first and get rid of the table tags.

Then, after that, the next step, based on postbit HTML analysis, is to look inside these post array items and check for table, td and tr tags since all of these are wrapped in table tags:

```nohighlight
$post[imageattachmentlinks]
$post[otherattachments
$post[moderatedattachments]

```

Then that is done and nothing is broken, then can look at converting the main postbit message table and rows.

... gezzzzzz LOL

---

<div class="post-metadata">

**Author:** ![Neo](https://community.unix.com/user_avatar/community.unix.com/neo/32/22838_2.png) [@Neo](https://community.unix.com/u/Neo)\
**Post date:** [July 19, 2018, 6:17am UTC](https://community.unix.com/t/postbit-changes-phase-ii-upgrade/373197/3 "2018-07-19T06:17:13Z")

</div>

I swear, the next time I scratch down some quick analysis of an HTML file, I'll try to take better notes.

Actually, these kind of notes are useful, so next time I'll do it much better, LOL

![](https://community.unix.com/uploads/default/original/2X/7/73fbbded7fcb6dd6894bc625e0e56bc73e6a9e09.jpeg)

Note: Moving this thread over to "war stories" haha since this is a war against 10 year old HTML code, hacked and smacked over 10 years... and not trying to bring all this code up to snuff.

My scratchy notes above shows that there is really a war going on to make this happen, LOL

---

<div class="post-metadata">

**Author:** ![Neo](https://community.unix.com/user_avatar/community.unix.com/neo/32/22838_2.png) [@Neo](https://community.unix.com/u/Neo)\
**Post date:** [July 19, 2018, 8:07am UTC](https://community.unix.com/t/postbit-changes-phase-ii-upgrade/373197/4 "2018-07-19T08:07:49Z")

</div>

HTML Template (working live now)

```nohighlight
post_thanks_postbit

```

New divs:

```nohighlight
<div style="padding:$stylevar[cellpadding]px 0px 0px 0px;">
	<div class="alt2" style="padding:$stylevar[cellpadding];border-style:solid;border-width:1px;" width="100%">
           <div style="padding:0px;padding:10px 10px 10px 10px;">
                  <div class="alt2" style="display:inline-block;">
	
                
				<if condition="$post['post_thanks_amount'] == 1">
					<span style="float:left;margin-left:2px;font-weight:bold;">
                                           <phrase 1="$post[username]">$vbphrase[post_thanks_user_says]</phrase>
                                        </span>
				<else />
					<span style="float:left;margin-left:2px;font-weight:bold;"><phrase 1="$post[post_thanks_amount_formatted]" 2="$post[username]">
                                           $vbphrase[post_thanks_users_say]</phrase>
                                        </span>
				</if>
            </div>
			<if condition="$bbuserinfo['usergroupid'] == 6">
				<div class="alt2" style="float:right;padding:0px 20px 0px 0px;display:inline-block;" align="right" nowrap="nowrap">
					<a href="post_thanks.php?do=post_thanks_remove_all&p=$post[postid]"<if condition="$vboptions['disable_ajax'] != 2"> 
                                            onclick="return post_thanks_remove_all($post[postid], <if condition="$vboptions['post_groan_integrate']">true<else />false</if>);"
                                           </if> rel="nofollow">$vbphrase[post_thanks_remove]
                                        </a>
                               </div >
			</if>
			<if condition="$post['show_thanks_remove_option']">
				<div class="alt2" style="float:right;padding:0px 20px 0px 0px;display:inline-block;" align="right" nowrap="nowrap">
					<a href="post_thanks.php?do=post_thanks_remove_user&p=$post[postid]"<if condition="$vboptions['disable_ajax'] != 2"> 
                                            onclick="return post_thanks_remove_user($post[postid], <if condition="$vboptions['post_groan_integrate']">true<else />false</if>);"
                           </if> rel="nofollow">$vbphrase[post_thanks_remove_user]</a>
                </div >
			</if>

        </div>
		<div class="alt1" colspan="3" style="padding:10px 10px 10px 10px;">$post[post_thanks_bit]</div>
    </div>
</div>

```

Old table style:

```nohighlight
<div style="padding:$stylevar[cellpadding]px 0px 0px 0px">
	<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
		<tr>
	
                  <td class="alt2" style="padding:0px;padding:10px 10px 10px 10px;">
				<if condition="$post['post_thanks_amount'] == 1">
					<span style="margin-left:2px;font-weight:bold;"><phrase 1="$post[username]">
                                           $vbphrase[post_thanks_user_says]</phrase>
                                       </span>
				<else />
					<span style="margin-left:2px;font-weight:bold;"><phrase 1="$post[post_thanks_amount_formatted]" 2="$post[username]">
                                             $vbphrase[post_thanks_users_say]</phrase>
                                         </span>
				</if>
			</td >
			<if condition="$bbuserinfo['usergroupid'] == 6">
				<td class="alt2" style="padding:0px 20px 0px 0px;" align="right" nowrap="nowrap">
					<a href="post_thanks.php?do=post_thanks_remove_all&p=$post[postid]"<if condition="$vboptions['disable_ajax'] != 2 AND FALSE"> 
                                        onclick="return post_thanks_remove_all($post[postid], <if condition="$vboptions['post_groan_integrate']">true<else />false</if>);"</if> rel="nofollow">
                                         $vbphrase[post_thanks_remove]
                                    </a>
				</td >
			</if>
			<if condition="$post['show_thanks_remove_option']">
				<td class="alt2" style="padding:0px 20px 0px 0px;" align="right" nowrap="nowrap">
					<a href="post_thanks.php?do=post_thanks_remove_user&p=$post[postid]"<if condition="$vboptions['disable_ajax'] != 2 AND FALSE">
                                     onclick="return post_thanks_remove_user($post[postid], <if condition="$vboptions['post_groan_integrate']">true<else />false</if>);"</if> 
                                    rel="nofollow">$vbphrase[post_thanks_remove_user]</a>
				</td >
			</if>

		</tr>
		<tr><td class="alt1" colspan="3"><div style="padding:0px 20px 0px 5px;">$post[post_thanks_bit]</div></td></tr>
	</table>
</div>

```

---

<div class="post-metadata">

**Author:** ![Neo](https://community.unix.com/user_avatar/community.unix.com/neo/32/22838_2.png) [@Neo](https://community.unix.com/u/Neo)\
**Post date:** [July 19, 2018, 10:36pm UTC](https://community.unix.com/t/postbit-changes-phase-ii-upgrade/373197/5 "2018-07-19T22:36:05Z")

</div>

> [@neo](#):
>
> OK.... after a lot of analysis of the postbit HTML template, the first thing which must be done is to remove the tables from the 10 $templatehooks, and and search of the DB reveals only 2 plugins are using these template hooks:
> 
> ```plaintext
> 1. Thank You
> .....
> 
> ```

Divs done in Thank You post bit.

> [@neo](#):
>
> Then, after that, the next step, based on postbit HTML analysis, is to look inside these post array items and check for table, td and tr tags since all of these are wrapped in table tags:
> 
> ```plaintext
> $post[imageattachmentlinks]
> $post[otherattachments
> $post[moderatedattachments]
> 
> ```
> 
> ....

For these three tables above, I already have a working solution on mobile using [Swiper](http://idangero.us/swiper/) for attachments (and for pagination).

For example in postbit, the solution was:

```plaintext
<div style="font-size:1.1em;text-decoration:none;margin:10px;color:black;">
<br>$post[message]<br />

<!-- attachments -->
<if condition="$show['attachments']">
<div align="center" style="margin-top:20px;color:black;"> Attachments</div>
<div style="margin-top:15px;margin-bottom:15px;">
<if condition="$show['thumbnailattachment'] OR $show['imageattachment'] OR $show['otherattachment']">
<div class="swiper-container" >
<div class="swiper-wrapper" style="margin-bottom:15px;" align="center">
<if condition="$show['thumbnailattachment']">
$post[thumbnailattachments]
</if>
<if condition="$show['imageattachment']">
$post[imageattachments]
</if>
<if condition="$show['otherattachment']">
$post[otherattachments]
</if>

</div> 

```

using this JS, which I can configure for desktop and make the attachments look good in the posts:

```plaintext
<script type="text/javascript">
    var swiper = new Swiper('.swiper-container', {
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
        clickable: true,
      },
    });
</script>

```

For example, I will try the [Swiper "Space Between Slides" demo](http://idangero.us/swiper/demos/100-space-between.html), but smaller:

```plaintext
<script>
    var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  </script>

```

This should be easy since I have already implemented Swiper on mobile.

---

<div class="post-metadata">

**Author:** ![Neo](https://community.unix.com/user_avatar/community.unix.com/neo/32/22838_2.png) [@Neo](https://community.unix.com/u/Neo)\
**Post date:** [July 20, 2018, 12:05am UTC](https://community.unix.com/t/postbit-changes-phase-ii-upgrade/373197/6 "2018-07-20T00:05:55Z")

</div>

Swiper for post attachments (images, pdf, etc.) has been installed and seems to be working OK. I'm not totally happy with the alignment and thumbnail sizes, etc. but I'll address that after finishing all the other critical tasks to do to modernize postbit.

If anyone experiences any odd behavior with post attachments, please post the link to the thread / post where you encounter a problem. There may be some hidden bugs I cannot see due to attachments sizes, types of images (jpg, gif, png, etc).

Thanks.

---

<div class="post-metadata">

**Author:** ![Neo](https://community.unix.com/user_avatar/community.unix.com/neo/32/22838_2.png) [@Neo](https://community.unix.com/u/Neo)\
**Post date:** [July 21, 2018, 8:48am UTC](https://community.unix.com/t/postbit-changes-phase-ii-upgrade/373197/7 "2018-07-21T08:48:16Z")

</div>

Added some new Javascript jQuery code to showthread:

```nohighlight
<script>
 jQuery(document).ready(function(){
  jQuery("body").css({"background-color":"white"});
  jQuery("#showthread-toolbar").find("table").css({"border-bottom-width":"1px","margin-bottom":"10px;"});
  jQuery("#showthread-toolbar").find("table").addClass("table table-responsive");
  jQuery(".neo-similiarthreads-wrapper").css({"overflow":"auto"}); 
  jQuery(".neo-quickreply-wrapper").css({"overflow":"auto"}); 
  jQuery(".neo-postbit-wrapper").addClass("table table-responsive").css({"border-width":"1px 0px 0px 0px","border-style":"solid"});
  if (jQuery(".neo-postbit-wrapper").prop('scrollWidth') > jQuery(".neo-postbit-wrapper").width() ) {
        jQuery(".neo-postbit-wrapper").css({"margin-top":"0px","margin-bottom":"10px"});
        jQuery(".neo-bbcode-code-flag").text("(Using Scrollbar)").css({"margin-left":"10px","font-size":".8em"});
 }    
});

</script>

```

Anyway, I plan to covert the tables to divs in postbit and showthread templates, so this overflow scroll bar code is just temporary.

---

<div class="post-metadata">

**Author:** ![Neo](https://community.unix.com/user_avatar/community.unix.com/neo/32/22838_2.png) [@Neo](https://community.unix.com/u/Neo)\
**Post date:** [July 21, 2018, 12:39pm UTC](https://community.unix.com/t/postbit-changes-phase-ii-upgrade/373197/8 "2018-07-21T12:39:08Z")

</div>

OK.. For mobile logged in users (which is not very many, usually less a handful at a time), I have added some jQuery AJAX Javascript to automatically update the "Users Online" info on the home page.

Note: I need to change this from `.load()` to `.getJson()` when I have some time.

---

<div class="post-metadata">

**Author:** ![vgersh99](https://community.unix.com/user_avatar/community.unix.com/vgersh99/32/14851_2.png) [@vgersh99](https://community.unix.com/u/vgersh99)\
**Post date:** [July 23, 2018, 10:49am UTC](https://community.unix.com/t/postbit-changes-phase-ii-upgrade/373197/9 "2018-07-23T10:49:35Z")

</div>

Neo,  
Just noticed something. Somehow the `Options ` active link in the bottom left corner of the `Reply/Message` editor isn't either active while hovering over nor is clickable.  
 ![](https://community.unix.com/uploads/default/original/2X/a/a194f4f8ecf935222422e7ebbc696338eee88fc0.jpeg)

`PostIcons` in the `Go Advanced` Edition isn't either.

---

<div class="post-metadata">

**Author:** ![Neo](https://community.unix.com/user_avatar/community.unix.com/neo/32/22838_2.png) [@Neo](https://community.unix.com/u/Neo)\
**Post date:** [July 23, 2018, 11:08am UTC](https://community.unix.com/t/postbit-changes-phase-ii-upgrade/373197/10 "2018-07-23T11:08:02Z")

</div>

Yeah, I've having some challenges moving some CSS to load remotely.

I reverted that change, so hopefully it's OK again.

---

<div class="post-metadata">

**Author:** ![Neo](https://community.unix.com/user_avatar/community.unix.com/neo/32/22838_2.png) [@Neo](https://community.unix.com/u/Neo)\
**Post date:** [July 23, 2018, 11:10am UTC](https://community.unix.com/t/postbit-changes-phase-ii-upgrade/373197/11 "2018-07-23T11:10:12Z")

</div>

> [@vgersh99](#):
>
> Somehow the `Options ` active link in the bottom left corner of the `Reply/Message` editor isn't either active while hovering over nor is clickable.

That Options text is not a link and is not active. It is and always has been a text lable for the buttons underneath.

---

<div class="post-metadata">

**Author:** ![vgersh99](https://community.unix.com/user_avatar/community.unix.com/vgersh99/32/14851_2.png) [@vgersh99](https://community.unix.com/u/vgersh99)\
**Post date:** [July 23, 2018, 11:11am UTC](https://community.unix.com/t/postbit-changes-phase-ii-upgrade/373197/12 "2018-07-23T11:11:40Z")

</div>

> [@neo](#):
>
> That Options text is not a link and is not active. It is and always has been a text label for the buttons underneath.

I see - thanks!