Quantcast
Channel: MyBB Community Forums - Tutorials
Viewing all articles
Browse latest Browse all 685
↧

[1.8] Dropdown menu: Inline moderation and Thread Options

August 9, 2014, 11:28 pm
$
0
0
Simple Mode: Use dropdown script of mybb core

Change this:

[Image: 2mwtcuJ.png]

To:

[Image: ZUh9LC2.png]
[Image: hLu2RwD.png]

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

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

PHP Code:
.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:

PHP Code:
<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++
PHP Code:
(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:
PHP Code:
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/general.js?ver=1800"></script> 
2.2 - Add below:
PHP Code:
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/drop.js"></script> 
2.3 - Find:
PHP Code:
{$stylesheets} 
2.4 - Add below:
PHP Code:
<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:

PHP Code:
.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:

PHP Code:
<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...
↧
Search
Viewing all articles
Browse latest Browse all 685

Trending Articles

Practice Sheet of Right form of verbs for HSC Students

September 22, 2019, 11:40 pm

Download: FK ft Shenky – Nakuyewa ”Prod by: Shenky”

February 16, 2017, 4:24 pm

How to win at Markstrat (Markstrat Tips and Tricks) – Vodites

January 5, 2014, 10:34 pm

Ominde Commission Report and Recommendations – Ominde Report of 1964

March 16, 2015, 5:14 am

Bureau of Internal Revenue: Regional Offices (Directory)

January 9, 2014, 11:06 pm

GO 53 on Enhancement of Ex-gratia upto 5 Lakhs Toddy Tappers in Telangana

March 26, 2017, 11:23 pm

Cakewalk CA-2A Leveling Amplifier v2.0.1.97 WiN, v2.0.1.96 OSX Incl Keygen

October 17, 2016, 7:20 am

Mp3 Download: Mdu - Kunjenjenjena

December 7, 2017, 8:16 am

How the kill the job , when DTP request running for long hours.

July 26, 2013, 2:41 am

Microsoft Intune から展開しているアプリのアップデートについて

October 17, 2016, 4:11 am

18-year-old girl was beaten for half an hour by two Northampton men in 'an...

September 1, 2017, 10:00 pm

Car crash in Dunton Bassett leaves driver in critical condition

October 7, 2014, 7:51 am

Macky 2, Two Others In Road Accident

March 29, 2015, 5:34 am

Application log 00000000000000089514: Could not convert queue DLVST90CLNT

May 14, 2015, 11:27 pm

Detroit mafia: D’Anna Brothers agree to plea deal

April 21, 2016, 6:56 am

Delivery block field greyed out using VA02

January 26, 2016, 2:52 pm

Muloraki Au

June 22, 2016, 1:44 am

【個人撮影】スマホのプライベート映像♪「中に出さないで///」カラオケ屋での生ハメ撮りが流出ｗ【リベンジポルノ】＠PornHub

October 12, 2017, 2:23 pm

BREAKING NEWS: Diamond Platnumz Is Reported Dead After Ghastly Car Accident

February 9, 2018, 4:56 am

FIAT 500 B0111 B0112

July 5, 2018, 10:31 am
Search