MyBB

martec · (This post was last modified: 2014-09-07, 02:37 AM by martec.)

Simple Mode: Use dropdown script of mybb core

Change this:

[Image: 2mwtcuJ.png]

To:

http://www.dailymotion.com/video/x237j9o_demo-2_tech

1 - Create extra.css (Admin CP > Templates & Style > Themes > Add Stylesheet) and add:

.zeronone_0, .zeronone_ {
 display:none;
}

.poup {
 font-size: 11px;
 padding-top: 10px;
 padding-right: 3px;
 margin-bottom: 5px;
}

.poup a {
 color: #5A5A5A;
 background: #EAEAEA;
 border-radius: 2px;
 padding: 3px 6px;
 margin-bottom: 3px;
}

.poup a:hover {
 color: #fff !important;
 background: #0072BC;
 text-decoration: none;
}

.dropdown {
 background: #fff;
 font-size: 11px;
 border-top: 5px solid #666;
 overflow: hidden;
 box-shadow: 0px 5px 5px rgba(0,0,0, 0.5); -webkit-box-shadow: 0px 5px 5px rgba(0,0,0, 0.5); -moz-box-shadow: 0px 5px 5px rgba(0,0,0, 0.5); -khtml-box-shadow: 0px 5px 5px rgba(0,0,0, 0.5);
 min-width: 200px;
 position: absolute;
 z-index: 9000;
 padding: 4px;
}

2 - Open showthread template and replace all content with:

<html>
<head>
<title>{$thread['subject']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
 var quickdelete_confirm = "{$lang->quickdelete_confirm}";
 var quickrestore_confirm = "{$lang->quickrestore_confirm}";
 var allowEditReason = "{$mybb->settings['alloweditreason']}";
 lang.save_changes = "{$lang->save_changes}";
 lang.cancel_edit = "{$lang->cancel_edit}";
 lang.quick_edit_update_error = "{$lang->quick_edit_update_error}";
 lang.quick_reply_post_error = "{$lang->quick_reply_post_error}";
 lang.quick_delete_error = "{$lang->quick_delete_error}";
 lang.quick_delete_success = "{$lang->quick_delete_success}";
 lang.quick_delete_thread_success = "{$lang->quick_delete_thread_success}";
 lang.quick_restore_error = "{$lang->quick_restore_error}";
 lang.quick_restore_success = "{$lang->quick_restore_success}";
 lang.editreason = "{$lang->postbit_editreason}";
// -->
</script>
<!-- jeditable (jquery) -->
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1800"></script>
<script src="{$mybb->asset_url}/jscripts/jeditable/jeditable.min.js"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/thread.js?ver=1800"></script>
</head>
<body>
 {$header}
 {$threadnotesbox}
 {$pollbox}
 <div class="float_left">
 {$multipage}
 </div>
 <div class="float_right">
 {$newreply}
 </div>
 <div class="float_right poup">
 <a href="#" id="thread_options" class="drop">Thread Options</a>
 <div id="thread_options_popup" class="dropdown" style="display: none; width: 260px;">
 <ul class="thread_tools">
 <li class="printable"><a href="printthread.php?tid={$tid}">{$lang->view_printable}</a></li>
 {$sendthread}
 <li class="subscription_{$add_remove_subscription}"><a href="usercp2.php?action={$add_remove_subscription}subscription&amp;tid={$tid}&amp;my_post_key={$mybb->post_code}">{$add_remove_subscription_text}</a></li>
 {$addpoll}
 </ul>
 {$forumjump}
 </div> 
 </div>
 <script type="text/javascript">
 $("#thread_options").popupMenu(false);
 </script>
 {$ratethread}
 <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder tfixed clear">
 <tr>
 <td class="thead">
 <div class="float_right">
 <span class="smalltext"><strong><a href="javascript:;" id="thread_modes">{$lang->thread_modes}</a>{$threadnoteslink}</strong></span>
 </div>
 <div>
 <strong>{$thread['threadprefix']}{$thread['subject']}</strong>
 </div>
 </td>
 </tr>
<tr><td id="posts_container">
 <div id="posts">
 {$posts}
 </div>
</td></tr>
 <tr>
 <td class="tfoot">
 {$search_thread}
 <div>
 <strong>&laquo; <a href="{$next_oldest_link}">{$lang->next_oldest}</a> | <a href="{$next_newest_link}">{$lang->next_newest}</a> &raquo;</strong>
 </div>
 </td>
 </tr>
 </table>
 <div class="float_left">
 {$multipage}
 </div>
 <div style="padding-top: 4px;" class="float_right">
 {$newreply}
 </div>
 <div class="float_right poup zeronone_{$ismod}">
 <a href="#" id="inline_moderation" class="drop">Moderation Options</a>
 <div id="inline_moderation_popup" class="dropdown" style="display: none; width: 452px">
 {$moderationoptions}
 </div>
 </div>
 <script type="text/javascript">
 $("#inline_moderation").popupMenu(false);
 </script>
 <br class="clear" />
 {$quickreply}
 {$threadexbox}
 {$similarthreads}
 {$usersbrowsing}
 {$footer}
 <div id="thread_modes_popup" class="popup_menu" style="display: none;"><div class="popup_item_container"><a href="showthread.php?mode=linear&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}" class="popup_item">{$lang->linear}</a></div><div class="popup_item_container"><a href="showthread.php?mode=threaded&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}" class="popup_item">{$lang->threaded}</a></div></div>
 <script type="text/javascript">
 // <!--
 if(use_xmlhttprequest == "1")
 {
 $("#thread_modes").popupMenu();
 }
 // -->
 </script>
</body>
</html>

it´s all...

Elegant mode:

1 - Create drop.js in notepad++

(function($){
 var current_drop = '';
 var DropMenu = function(el)
 {
 var el = $(el);
 var drop = this;
 var drop_menu = $("#" + el.attr('id') + "_popup");
 
 // Opening Drop
 this.open = function(e)
 {
 e.preventDefault();

 if(drop_menu.is(':visible'))
 {
 drop.close();
 return;
 }

 drop_menu.slideDown('fast');
 el.addClass('drop-open').removeClass('drop'); 
 }
 this.openmouse = function(e)
 {
 // Setup popup menu
 var offset = el.offset();
 offset.top += el.outerHeight();

 // We only adjust if it goes out of the page (?)
 if((el.offset().left + drop_menu.outerWidth()) > $(window).width())
 var adjust = drop_menu.outerWidth() - el.outerWidth();
 else
 var adjust = 0;

 drop_menu.css({
 position: 'absolute',
 top: offset.top,
 left: offset.left-adjust
 });

 drop_menu.slideDown('fast');
 el.addClass('drop-open').removeClass('drop');

 $(document).mouseup(function (e) {
 var container = $("#" + el.attr('id') + "_popup:visible, #" + el.attr('id') + "");
 if (!container.is(e.target) && container.has(e.target).length === 0) {
 drop.close();
 }
 }); 
 } 
 this.close = function(e)
 {
 drop_menu.slideUp('fast');
 el.addClass('drop').removeClass('drop-open');
 }
 }
 $.fn.dropMenu = function(el)
 {
 return this.each(function()
 {
 var drop = new DropMenu(this, el);
 $(this).click(drop.open).mouseenter(drop.openmouse);
 });
 }
})(jQuery);

1.1 - Upload drop.js in root/jscripts folder

2 - Open headerinclude template:
2.1 - Find:

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/general.js?ver=1800"></script>

2.2 - Add below:

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/drop.js"></script>

2.3 - Find:

{$stylesheets}

2.4 - Add below:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

3 - Create extra.css (Admin CP > Templates & Style > Themes > Add Stylesheet) and add:

.zeronone_0, .zeronone_ {
 display:none;
}

.poup {
 font-size: 11px;
 padding-top: 10px;
 padding-right: 3px;
 margin-bottom: 5px;
}

.poup a {
 color: #5A5A5A;
 background: #EAEAEA;
 border-radius: 2px;
 padding: 3px 6px;
 margin-bottom: 3px;
}

.poup a:hover {
 color: #fff !important;
 background: #0072BC;
 text-decoration: none;
}

.dropdown {
 background: #fff;
 font-size: 11px;
 border-top: 5px solid #666;
 overflow: hidden;
 box-shadow: 0px 5px 5px rgba(0,0,0, 0.5); -webkit-box-shadow: 0px 5px 5px rgba(0,0,0, 0.5); -moz-box-shadow: 0px 5px 5px rgba(0,0,0, 0.5); -khtml-box-shadow: 0px 5px 5px rgba(0,0,0, 0.5);
 min-width: 200px;
 position: absolute;
 z-index: 9000;
 padding: 4px;
}

.drop i:before {
 font-size: 13px;
 color: #0b315c;
 content: "\f0ab";
}

.drop-open i:before {
 font-size: 13px;
 color: #0b315c;
 content: "\f0aa";
}

4 - Open showthread template and replace all content with:

<html>
<head>
<title>{$thread['subject']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
 var quickdelete_confirm = "{$lang->quickdelete_confirm}";
 var quickrestore_confirm = "{$lang->quickrestore_confirm}";
 var allowEditReason = "{$mybb->settings['alloweditreason']}";
 lang.save_changes = "{$lang->save_changes}";
 lang.cancel_edit = "{$lang->cancel_edit}";
 lang.quick_edit_update_error = "{$lang->quick_edit_update_error}";
 lang.quick_reply_post_error = "{$lang->quick_reply_post_error}";
 lang.quick_delete_error = "{$lang->quick_delete_error}";
 lang.quick_delete_success = "{$lang->quick_delete_success}";
 lang.quick_delete_thread_success = "{$lang->quick_delete_thread_success}";
 lang.quick_restore_error = "{$lang->quick_restore_error}";
 lang.quick_restore_success = "{$lang->quick_restore_success}";
 lang.editreason = "{$lang->postbit_editreason}";
// -->
</script>
<!-- jeditable (jquery) -->
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1800"></script>
<script src="{$mybb->asset_url}/jscripts/jeditable/jeditable.min.js"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/thread.js?ver=1800"></script>
</head>
<body>
 {$header}
 {$threadnotesbox}
 {$pollbox}
 <div class="float_left">
 {$multipage}
 </div>
 <div class="float_right">
 {$newreply}
 </div>
 <div class="float_right poup">
 <a href="#" id="thread_options" class="drop">Thread Options: <i class="fa"></i></a>&nbsp;
 <div id="thread_options_popup" class="dropdown" style="display: none; width: 260px;">
 <ul class="thread_tools">
 <li class="printable"><a href="printthread.php?tid={$tid}">{$lang->view_printable}</a></li>
 {$sendthread}
 <li class="subscription_{$add_remove_subscription}"><a href="usercp2.php?action={$add_remove_subscription}subscription&amp;tid={$tid}&amp;my_post_key={$mybb->post_code}">{$add_remove_subscription_text}</a></li>
 {$addpoll}
 </ul>
 {$forumjump}
 </div> 
 </div>
 <script type="text/javascript">
 $("#thread_options").dropMenu();
 </script>
 {$ratethread}
 <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder tfixed clear">
 <tr>
 <td class="thead">
 <div class="float_right">
 <span class="smalltext"><strong><a href="javascript:;" id="thread_modes">{$lang->thread_modes}</a>{$threadnoteslink}</strong></span>
 </div>
 <div>
 <strong>{$thread['threadprefix']}{$thread['subject']}</strong>
 </div>
 </td>
 </tr>
<tr><td id="posts_container">
 <div id="posts">
 {$posts}
 </div>
</td></tr>
 <tr>
 <td class="tfoot">
 {$search_thread}
 <div>
 <strong>&laquo; <a href="{$next_oldest_link}">{$lang->next_oldest}</a> | <a href="{$next_newest_link}">{$lang->next_newest}</a> &raquo;</strong>
 </div>
 </td>
 </tr>
 </table>
 <div class="float_left">
 {$multipage}
 </div>
 <div style="padding-top: 4px;" class="float_right">
 {$newreply}
 </div>
 <div class="float_right poup zeronone_{$ismod}">
 <a href="#" id="inline_moderation" class="drop">{$lang->moderation_options} <i class="fa"></i></a>&nbsp;
 <div id="inline_moderation_popup" class="dropdown" style="display: none; width: 452px">
 {$moderationoptions}
 </div>
 </div>
 <script type="text/javascript">
 $("#inline_moderation").dropMenu();
 </script>
 <br class="clear" />
 {$quickreply}
 {$threadexbox}
 {$similarthreads}
 {$usersbrowsing}
 {$footer}
 <div id="thread_modes_popup" class="popup_menu" style="display: none;"><div class="popup_item_container"><a href="showthread.php?mode=linear&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}" class="popup_item">{$lang->linear}</a></div><div class="popup_item_container"><a href="showthread.php?mode=threaded&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}" class="popup_item">{$lang->threaded}</a></div></div>
 <script type="text/javascript">
 // <!--
 if(use_xmlhttprequest == "1")
 {
 $("#thread_modes").popupMenu();
 }
 // -->
 </script>
</body>
</html>

all done!

You can make something too in forumdisplay etc...

Samuel117 · 2015-08-24, 12:07 PM

such an awesome tutorial and no comments shocking for me.
i am using elegant mode it worked great but problem i am facing in start dropdown dropdown appears and close instantly. and one suggestion clicking outside close dropdown not working in elegant mode.

subzr1 · 2016-01-04, 04:50 PM

it does works good for me
how would i get the dropdown to be on click and not on hover state??

Blackbeard · 2016-01-28, 08:26 AM

amazing tutorial! it worked great for me

Wires · 2016-01-28, 02:16 PM

Interesting. May implement this into one of my boards.

Shihouin · 2016-01-28, 09:04 PM

Thanks great tutorial

Login
Username:
Password:	Lost Password?
	Remember me