ساخت Box Modal ورود به انجمن
سلام به همه ی دوستان عزیز. خیلی از دوستان علاقه دارند به جای صفحه ی ورود قدیمی مثل خیلی از قالب های جدید صفحه ی Box Login Modal ورود داشته باشند.(خودمم نمی دونم چطور توضیحش بدم). به هر حال می خوایم صفحه ی ورودمون رو به صورت زیر در بیاریم(شاید اینطوری بهتر متوجه بشید)
image

خب فکر کنم منظور منو متوجه شده باشید. بریم سراغ آموزش::D

برید به:
کنترل پنل مدیریت » قالب ها و پوسته ها » قالب ها » قالب مورد نظر » قالب های دسته بندی نشده » headerinclude
و خط زیر رو وارد کنید.(اگر بود نیازی به وارد کردن نیست -- در آخر باشه بهتره )
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
خب اینجوری ما آخرین نسخه ی جی کوئری رو از CDN گوگل فراخانی می کنیم. حالا بعد از خط بالا کد های زیر را وارد کنید:

[align=right]<script type="text/javascript">
/**
 * Modal Boxes JS
 * @author Euan T. <euan@euantor.com>
 * @version 1.0.0
 &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
 * ترجمه شده توسط:محمد صبائیان (mohammad.sabaeian@gmail.com)
 * انجمن همیار بی بیhttp://community.mybbco.ir/
 */

jQuery.noConflict();

jQuery(document).ready(function($)
{
    
    $('#loginModal input[name="url"]').attr("value", window.location);
    // /ریدایرکت صفحه لوگین //

    // باکس مدل //
    $('a[name="modal"]').on('click', function(event)
    {
        event.preventDefault();
        
        var target = $(this).attr('rel');
        
        // تنظیمات سیاهی صفحه توسط جی کوئری
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#mask').css({'width': maskWidth, 'height': maskHeight});
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow", 0.8);  
        
        // موقعیت مدل ها
        var winH = $(window).height();
        var winW = $(window).width();
        $(target).css('top',  (winH / 2) - ($(target).height() / 2));
        $(target).css('left', (winW / 2) - ($(target).width() / 2));
        $(target).fadeIn(2000); 
    });
    
    $('.modalBox a[rel="closeModal"]').on('click', function(event)
    {
        event.preventDefault();
        $('#mask, .modalBox').hide();
    }); 
    
    $('#mask').on('click', function ()
    {
        $(this).hide();
        $('.modalBox').hide();
    }); 
    // /مدل باکس //
});
</script>[/align]
[align=right][/align]

خب حالا برید به:
قالب ها و پوسته ها » قالب ها » قالب مورد نظر » قالب های سربرگ » header_welcomeback_guest

و هرچی اونجا هست رو پاک کنید و به جاش کد زیر رو وارد کنید:

<div id="mask"></div>
خوش آمدید مهمان! <a href="{$mybb->settings['bburl']}/member.php?action=login" name="modal" rel="#loginModal">{$lang->welcome_login}</a>  یا <a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a>
<div id="loginModal" class="modalBox loginModalBox">
    <div class="thead">
        ورود به انجمن {$mybb->settings['bbname']}
    </div>
    <div class="modalContent loginModalContent">
        <form method="post" action="member.php">
            <table border="0" width="100%">
                <tr>
                    <td>
                        <label for="login_username">نام کاربری</label>
                    </td>
                    <td>
                        <input type="text" value="" style="width: 200px;" maxlength="30" size="25" name="username" class="textbox" id="login_username" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="login_password">رمز عبور</label>
                    </td>
                    <td>
                        <input type="password" value="" style="width: 200px;" size="25" name="password" class="textbox" id="login_password" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="smalltext" title="اگر تیک این گزینه را بزنید سیستم شما در این سایت باقی خواهد ماند"><input type="checkbox" value="yes" checked="checked" name="remember" class="checkbox">به خواطر داشته باش؟</label>
                    </td>
                    <td>
                        <input type="submit" value="ورود" name="submit" class="button" />
                    </td>
                </tr>
            </table>
            <input type="hidden" value="do_login" name="action" />
            <input type="hidden" value="" name="url" />
        </form>
    </div>
</div>
[align=right][/align]

خب حالا برید به Global.css قالبتون(قالب ها و پوسته » پوسته ها » قالب مورد نظر » Global.css)
و از سربرگ های بالا حالت رو پیشرفته کنید و کد های زیر رو قرار بدید:
#mask {
    position: absolute;
    z-index: 9010;
    background-color: #000000;
    display: none;
    top: 0;
    left: 0;
}

.modalBox {
    position: fixed;
    width: 440px;
    display: none;
    z-index: 9015;
    background: #ffffff;
    border: 1px solid #000000;
    -webkit-box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.81);
    -moz-box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.81);
    box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.81);
}
    .modalBox .thead {
        font-weight: bold;
    }
    .modalBox .modalContent {
        padding: 5px 10px;
    }

خب کار ما تموم شد حالا صفحه ی ورود شما بصورت عکس اولیه در اومده(داخل هر قالبی هر رنگی که دوست دارید قرار بدید)

امیدوارم این آموزش بدرد شما خورده باشه.
توجه: این مقاله ترجمه شده توسط گروه همیار بی بی(محمد صبائیان) هرگونه کپی و تغیر در آن بدون ذکر منبع شرعا و قانونا حرام بوده.
نویسنده :

X
پلاگین تصاویر ثابت در گوشه های انجمن [Static Image]
نام پلاگین : Static Image توضیحات : امکان افزودن تصویر به گوشه های انجمن به صورت ثابت نویسنده : My ...
تعیین نشده
    دیدگاه های کاربران 0

    برای عضویت در کانال تلگرامی
    [همیار مای بی بی]
    کلیک کنید
    دریافت آخرین اخبار ، کدهای تخفیف و جوایز
    برای اطلاع از آخرین اخبار مای بی بی فارسی عضو کانال تلگرامی شوید :