این آموزش باکس لاگین استایل دیفالت ویبولتین رو پاپ آپ میکنه و فقط مناسب
برای طراحان استایل و افرادی هست که از استایل دیفالت استفاده میکنن ، پس
اگر از استایل دیگه ای جز دیفالت استفاده میکنید از انجام آموزش جدا
خودداری کنید ، حالا شاید بگید که اگر مناسب طراحان استایل هست به چه درد
ما میخوره ، در جوابتون بگم که وقتی طراحان بتونن خیلی ساده باکس لاگین پاپ
بزنن از این به بعد شاهد کلی استایل رایگان با این قابلیت هستیم پس در
واقع بیش از هر کسی به درد کاربران میخوره .
لازمه بگم این آموزش برای اولین بار در ایران ارایه میشه ، شاید قبلا به هر
طریقی آموزش داده شده اما این ساده ترین و مطمئن ترین راه برای طراحان
استایل هست بنابر این کپی برداری بدون ذکر منبع ممنوع میباشد .
خب حالا بریم سراغ آموزش :
بعد از اینکه استایل دیفالت رو ساختید قبل از هرکاری مراحل زیر رو انجام بدید
1 - فایل پیوست رو دانلود کنید و فایل های jquery.bpopup.min.js و jquery.min.js رو داخل پوشه images بریزید
2 - در جست و جوی قالب ها headinclude_bottom رو سرچ کنید و کد های زیر رو به انتهاش اضافه کنید :
کد:
<script src="mages/jquery.min.js"></script>
<script src="mages/jquery.bpopup.min.js"></script>
<script>
;(function($) {
$(function() {
$('#wikivbloginbutton').bind('click', function(e) {
e.preventDefault();
$('#popupwikione').bPopup({
speed: 800,
});
});
});
})(jQuery);
</script>
3 - در جست و جوی قالب ها
additional.css رو سرچ کنید و کد های زیر رو بهش اضافه کنید :
کد:
#wikivbloginbutton {
margin-top: 5px;
border: none;
cursor: pointer;
background: rgba(0,0,0,0.4);
color: #fff;
padding: 3px 10px 7px 10px;
}
.loginrighticon {
height: 37px;
width: 37px;
position: absolute;
right: 15px;
margin-top: 324px;
cursor: none;
}
#popupwikione {
background: #fff;
color:#000;
display:none;
padding:20px;
position:relative;
z-index: 99999999;
}
.b-close {
cursor:pointer;
position:absolute;
left:7px;
top: 8px;
}
4 - در جست و جوی قالب ها header رو جست و جو کنید ، کل کد هاش رو پاک کرده و کد های زیر رو جایگزینشون کنید :
کد:
<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">
<vb:if condition="$stylevar['titleimage']"><div><a name="top" href="{vb:link forumhome}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div></vb:if>
<div id="toplinks" class="toplinks">
<vb:if condition="$show['member']">
<ul class="isuser">
<li><a href="login.php?{vb:raw session.sessionurl}do=logout&logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li>
<vb:if condition="$show['registerbutton']">
<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
</vb:if>
<li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase user_control_panel}</a></li>
<li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
<vb:if condition="$notifications_total">
<li class="popupmenu notifications" id="notifications">
<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
<ul class="popupbody popuphover">
{vb:raw notifications_menubits}
</ul>
</li>
<vb:else />
<li class="popupmenu nonotifications" id="nonotifications">
<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
<ul class="popupbody popuphover">
<li>{vb:rawphrase no_new_messages}</li>
<vb:if condition="$show['pmmainlink']"><li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li></vb:if>
</ul>
</li>
</vb:if>
<li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
<vb:if condition="$vboptions['enablefacebookconnect']">
{vb:raw facebook_header}
</vb:if>
</ul>
{vb:raw template_hook.header_userinfo}
<vb:comment><p>{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}</p></vb:comment>
<vb:else />
<button id="wikivbloginbutton">ورود اعضا</button>
<div id="popupwikione">
<a class="b-close"><img src="http://upload.wikivb.ir/images/raqgrnep9ojchr765ng.png" width="26px" height="26px" alt="بستن" /><a/>
<ul class="nouser">
<vb:if condition="$show['registerbutton']">
<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
</vb:if>
<li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a></li>
<li>
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>
<form id="navbar_loginform" action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
<fieldset id="logindetails" class="logindetails">
<div>
<div>
<input type="text" class="textbox<vb:if condition="!$username"> default-value</vb:if>" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" />
<input type="password" class="textbox" tabindex="102" name="vb_login_password" id="navbar_password" size="10" />
<input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="10" value="{vb:rawphrase password}" style="display:none;" />
<input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
</div>
</div>
</fieldset>
<div id="remember" class="remember">
<label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> {vb:rawphrase remember_me}</label>
</div>
<input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
</form>
<script type="text/javascript">
YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
vB_XHTML_Ready.subscribe(function()
{
//
YAHOO.util.Event.on('navbar_username', "focus", navbar_username_focus);
YAHOO.util.Event.on('navbar_username', "blur", navbar_username_blur);
YAHOO.util.Event.on('navbar_password_hint', "focus", navbar_password_hint);
YAHOO.util.Event.on('navbar_password', "blur", navbar_password);
});
function navbar_username_focus(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>')
{
//
textbox.value='';
textbox.style.color='{vb:stylevar input_color}';
}
}
function navbar_username_blur(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '')
{
//
textbox.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>';
textbox.style.color='{vb:stylevar shade_color}';
}
}
function navbar_password_hint(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "none");
YAHOO.util.Dom.setStyle('navbar_password', "display", "inline");
YAHOO.util.Dom.get('navbar_password').focus();
}
function navbar_password(e)
{
//
var textbox = YAHOO.util.Event.getTarget(e);
if (textbox.value == '')
{
YAHOO.util.Dom.setStyle('navbar_password_hint', "display", "inline");
YAHOO.util.Dom.setStyle('navbar_password', "display", "none");
}
}
</script>
</li>
<vb:if condition="$vboptions['enablefacebookconnect']">
{vb:raw facebook_header}
</vb:if>
</ul>
</div>
</vb:if>
</div>
<div class="ad_global_header">
{vb:raw ad_location.global_header1}
{vb:raw ad_location.global_header2}
</div>
<hr />
</div>
حالا برید استایلتون رو رفرش کنید و لذت ببرید
نکته 1 : برای تغییر مسیر فایل های
jquery.bpopup.min.js و jquery.min.js اونها رو داخل پوشه مورد نظرتون که
میشه پوشه استایل قرار بدید بعدش مسیرشون رو از دو خط زیر که داخل
headinclude_bottom قرار دادیم تغییر بدید :
کد:
<script src="images/jquery.min.js"></script>
<script src="images/jquery.bpopup.min.js"></script>
نکته 2 : برای ویرایش باکس پاپ
فقط کافیه کد های اضافه شده به additional.css رو طبق نیازتون ویرایش کنید ،
بقیه فرم لاگین مثل همیشه با همون کلاس های سابق باقی موندن که کد هاشون
مثل همیشه داخل vbulletin-chrome.css هست .
اگر قدم به قدم انجام بدید هیچ مشکلی پیش نمیاد پس نگران نباشید
امیدوارم از این به بعد شاهد استایل هایی با این قابلیت باشیم
