آموزش ایجاد پنجره ورود جی کوئری

[yasan100]

با سلام دوباره اینبار میخوام اموزش ساخت پنجره ورود زیر رو بهتون یاد بدم

[

ابتدا به مسیر زیر برین
گروه قالبها>>قالب مورد نظر>>قسمت قالبهای گروه بندی نشده>> قالب headerinclude
کدهای زیر رو به انتهای قالبتون اضافه کنین

کد php:

<!--SCRIPTS-->
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery-1.7.2.min.js"></script>
<!--Slider-in icons-->
<script type="text/javascript">
$(document).ready(function() {
    $('a.login-window').click(function() {
       
                //Getting the variable's value from a link
        var loginBox = $(this).attr('href');

        //Fade in the Popup
        $(loginBox).fadeIn(300);
       
        //Set the center alignment padding + border see css style
        var popMargTop = ($(loginBox).height() + 24) / 2;
        var popMargLeft = ($(loginBox).width() + 24) / 2;
       
        $(loginBox).css({
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });
       
        // Add the mask to body
        $('body').append('<div id="mask"></div>');
        $('#mask').fadeIn(300);
       
        return false;
    });
    
    // When clicking on the button close or the mask layer the popup closed
    $('a.close, #mask').live('click', function() {
      $('#mask , .login-popup').fadeOut(300 , function() {
        $('#mask').remove();  
    });
    return false;
    });
});
</script> 


سپس به مسیر زیر برین

گروه قالبها>>قالب مورد نظر>>header >> قالب header_welcomeblock_guest

و کدهای آن را با کد زیر تعویض کننین دقت داشته باشین که این کدها یک باکس ایجاد میکند

کد php:

<table width="100%" border="1">
<div id="mask"></div>
<tr>
<td align="center" valign="middle" width="8%" rowspan="2">
<img src="images/default.jpg" style="width: 56px;">
</td>
<td style="height: 21px;">
<b>{$lang->welcome_guest}</b> &nbsp;
<ol id="notices"><li id="navbar_notice_1"><font size="2"> در صورتی که برای اولین بار  از این سایت بازدید میکنید, لازم است تا <a href="misc.php?action=help" target="_blank"><b>{$lang->toplinks_help}</b></a> را مطالعه فرمایید.</li>
<li> در صورتی که هنوز عضو نشده اید برای ارسال مطالب ,
    دانلود فایل ها, دسترسی به انجمن های ویژه کاربران عضو شده و ... در سایت <a href="{$mybb->settings['bburl']}/member.php?action=register" target="_blank"><b>{$lang->welcome_register}</b></a> کنید. با کلیک بر روی ثبت نام در مدت کوتاهی عضو سایت شده و از مطالب و امکانات سایت بهره مند شوید. </li>
  <li>در صورتی که عضو سایت هستید  <a href="#login-box"><font color="#FF0000"><b> از اینجا وارد سایت شوید</b></font></a></li>
</ol><span>{$lang->welcome_current_time}</span>

</td>
</tr></font></table>
<div id="login-box">
        <a href="#"><img src="images/close_pop.png" title="Close Window" alt="Close" /></a>
          <form method="post" action="member.php">
<input type="hidden" name="action" value="do_login" />               
<fieldset>
                <label>
                <span>نام کاربری/ایمیل</span>
                <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
                </label>
                <label>
                <span>رمز عبور</span>
                <input id="password" name="password" value="" type="password" placeholder="Password">
                </label>

<button type="submit">ورود</button></br>
<p>
                <a href="{$mybb->settings['bburl']}/member.php?action=lostpw">رمز عبورتان را فراموش کرده اید ؟</a>
                </p>       
                </fieldset>
          </form>
</div> 


اگر نمیخواهید بخش ورود شما تغییر کند و فقط مثل شکل زیر باشد از کدهای زیر استفاده کنید

کد php:

<div id="mask"></div>
<tr>
<td style="height: 21px;">
{$lang->welcome_guest}</br><a href="#login-box"><div>ورود به انجمن</div></a>&nbsp&nbsp
<a href="{$mybb->settings['bburl']}/member.php?action=register" target="_blank"><b>{$lang->welcome_register}</b></a>

</td>
</tr></font>
<div id="login-box">
        <a href="#"><img src="images/close_pop.png" title="Close Window" alt="Close" /></a>
          <form method="post" action="member.php">
<input type="hidden" name="action" value="do_login" />               
<fieldset>
                <label>
                <span>نام کاربری/ایمیل</span>
                <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
                </label>
                <label>
                <span>رمز عبور</span>
                <input id="password" name="password" value="" type="password" placeholder="Password">
                </label>

<button type="submit">ورود</button></br>
<p>
                <a href="{$mybb->settings['bburl']}/member.php?action=lostpw">رمز عبورتان را فراموش کرده اید ؟</a>
                </p>       
                </fieldset>
          </form>
</div> 


سپس کدهای زیر را در آخرglobal.css کپی کنید

کد php:

#mask {
    display: none;
    background: #000;
    position: fixed; left: 0; top: 0;
    z-index: 10;
    width: 100%; height: 100%;
    opacity: 0.8;
    z-index: 999;
}

/* You can customize to your needs  */
.login-popup{
    display:none;
    background: #333;
    padding: 10px;     
    border: 2px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: fixed;
    top: 50%; left: 50%;
    z-index: 99999;
    box-shadow: 0px 0px 20px #999; /* CSS3 */
        -moz-box-shadow: 0px 0px 20px #999; /* Firefox */
        -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
    border-radius:3px 3px 3px 3px;
        -moz-border-radius: 3px; /* Firefox */
        -webkit-border-radius: 3px; /* Safari, Chrome */
        text-align:right;
        font-family:Tahoma;
}

img.btn_close { Position the close button
    float: right;
    margin: -28px -28px 0 0;
}

fieldset {
    border:none;
}

form.signin .textbox label {
    display:block;
    padding-bottom:10px;
}

form.signin .textbox span {
    display:block;
}

form.signin p, form.signin span {
    color:#999;
    font-size:11px;
    line-height:18px;
}

form.signin .textbox input {
    background:#666666;
    border-bottom:1px solid #333;
    border-left:1px solid #000;
    border-right:1px solid #333;
    border-top:1px solid #000;
    color:#fff;
        border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
    font:13px Arial, Helvetica, sans-serif;
    padding:6px 6px 4px;
    width:200px;
}

form.signin input:-moz-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
form.signin input::-webkit-input-placeholder { color:#bbb; text-shadow:0 0 2px #000;  }

.button {
    background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
    background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
    background:  -o-linear-gradient(top, #f3f3f3, #dddddd);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
    border-color:#000;
    border-width:1px;
        border-radius:4px 4px 4px 4px;
    -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
    color:#333;
    cursor:Pointer;
    display:inline-block;
    padding:6px 6px 4px;
    margin-top:10px;
    font:12px;
    width:214px;
}
.button:hover { background:#ddd; }
.btn-arrow {
    display: inline-block;
    text-align: center;
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
    -khtml-border-radius: 16px;
    padding: 9px 20px 9px 20px;
    margin: 4px 0;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    line-height: 22px;
    cursor: pointer;
    letter-spacing: -1px; /* Optional- Remove if you don't like it */
}

/* Defining a Custom Color for a Button */
.green {
    background-color: #AEEA6F; /* Background of Button */
    border: 1px solid #31540C; /* Border of Button */
    color: #203806; /* Text Color of Button */
    text-shadow: 0 -1px #7DCE28; /* Embed Color of the Text (text shadow) */
}

.blue {
    margin: 0px auto;
    text-align: center;
    background-color: #68ABE9; /* Background of Button */
    border: 1px solid #284561; /* Border of Button */
    color: #162736; /* Text Color of Button */
    text-shadow: 0 -1px #4890D3; /* Embed Color of the Text (text shadow) */
}

.red {
    background-color: #F75C5C; /* Background of Button */
    border: 1px solid #702121; /* Border of Button */
    color: #391111; /* Text Color of Button */
    text-shadow: 0 -1px #C93A3A; /* Embed Color of the Text (text shadow) */
}

.purple {
    background-color: #D741F7; /* Background of Button */
    border: 1px solid #5C1B6A; /* Border of Button */
    color: #391141; /* Text Color of Button */
    text-shadow: 0 -1px #A936C2; /* Embed Color of the Text (text shadow) */
}

.orange {
    background-color: #FFA133; /* Background of Button */
    border: 1px solid #744814; /* Border of Button */
    color: #50310C; /* Text Color of Button */
    text-shadow: 0 -1px #C17720; /* Embed Color of the Text (text shadow) */
} 


سپس فایلهای زیر رو در هاست خود آپلود کنید

[HOssE!N-B]

عکس ها را هم لطفا در همین تایپیک پیوست کنید .

[yasan100]

عکس ها را هم لطفا در همین تایپیک پیوست کنید .

من اجازه پیوست ندارم اما تصاویر لود میشن چک شد مرسی

[HOssE!N-B]

من اجازه پیوست ندارم اما تصاویر لود میشن چک شد مرسی

منظور فایل هایی است که در آخر کار گفتین آپلود کنید در هاست .

سپس فایلهای زیر رو در هاست خود آپلود کنید

در یک آپلود سنتر ایرانی که بشه از دانلود کرد آپلود کنید لینک را بذارید (4shared باید عضو شی بعد دانلود کنی )
من پیوست میکنم به ارسال اول .