/mybb-thread-preview

A plugin for previewing MyBB forum threads on hovering over the subject.

Primary LanguagePHP

[MyBB Plugin] Thread Preview

This plugin is an improvement of the original plugin by Mark Janssen (dragonexpert) that can be found here. It displays a preview box of the thread content when hovering over the subject in the forum display.

Installation:

  1. Upload upload/inc/plugins/threadpreview.php to inc/plugins folder.

  2. Go to forumdisplay template. After {$footer} paste the following code:

<!-- Thread Preview - Start -->
<script>
	function make_visible(tid)
	{
		document.getElementById("preview" + tid).style.display="block";
	}
	function make_hidden(tid)
	{
		document.getElementById("preview" + tid).style.display="none";
	}
</script>
<!-- Thread Preview - End -->
  1. Go to forumdisplay_thread template. Locate the line that has the thread subject. Add the following to the element's attributes (span or a as you wish):
onmouseover="make_visible({$thread['tid']})" onmouseout="make_hidden({$thread['tid']})"

You may add an html comment for documentation if you like.

  1. In that same template look for:
<div class="author smalltext">{$thread['profilelink']}</div>

Right after that add this:

<!-- Thread Preview - Start -->
<div style="display:none"  id="preview{$thread['tid']}" class="thread_preview">
    {$thread['preview']}
</div>
<!-- Thread Preview - End -->

  1. Add following CSS (change colours and other things to your liking):

    ACP -> Templates & Style -> Themes -> <Your theme> -> <CSS file of your choosing (must be attacked to forumdisplay.php)>

/* Thread preview - START */
.thread_preview {
	position: absolute;
	margin-top: 10px;
	border: 1px solid #ccc;
	background: #fff;
	max-width: 300px;
	z-index:2;
	word-wrap: break-word;
	padding: 5px;
	text-align: justify;
}
.thread_preview::after, .thread_preview::before {
	bottom: 100%;
	left: 20%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.thread_preview::before {
	border-bottom-color: #ccc;
	border-width: 11px;
	margin-left: -11px;
}
/* Thread preview - END */
  1. Activate the plugin

Customization

You can change how many characters to display in the preview at the ACP settings.

Todo

  • ignore certain types of mycode (select types in ACP options)