MyBB Community Forums

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...

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.

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

amazing tutorial! it worked great for me

Interesting. May implement this into one of my boards.

Thanks great tutorial

martec

Samuel117

subzr1

Blackbeard

Wires

Shihouin