تسجيل الدخول

مشاهدة النسخة كاملة : تغيير نمط شكل "الدخول/ والتسجيل" لشكل تويتر



loulou ange
10-30-2013, بتوقيت غرينيتش 10:32 PM
http://www.dzbatna.com/images/icons/iconrote.gif طھط؛ظٹظٹط± ظ†ظ…ط· ط´ظƒظ„ "ط§ظ„ط¯ط®ظˆظ„/ ظˆط§ظ„طھط³ط¬ظٹظ„" ظ„ط´ظƒظ„ طھظˆظٹطھط± (http://www.dzbatna.com/t1607012/)




السلام عليكم ورحمه الله
تغير شكل الدخول العادي الى شكل تويتر
والطريقه تنفع لمنتديات vb 4.0.0 وما فوق
التعديل على 3 قوالب

http://www.dzbatna.com/attachments/497560d1278196664-log2.png

وبمجرد الضغط تفتح لتظهر

http://www.dzbatna.com/attachments/497559d1278196646-log.png


اولا نرفع المجلد login الى مجلد المنتدى forum الرئيسي


________ ________
/////////\ الخطوه 2 /////////\


والان التعديل على القوالب

القالب template الاول "additional.css"

نضيف في نهايته


رمز PHP:

<code style="white-space:nowrap"> <code>




/* 3arab-net.com Custom Login */
#container {
float:left;
margin:0 auto;
position: relative;
}

a img {
border-width:0;
}
#topnav {
padding:10px 0px 12px;
font-size:11px;
line-height:23px;
text-align:left;
}
#topnav a.signin {
background:#0d3156;
padding:4px 6px 6px;
text-decoration:none;
font-weight:bold;
color:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
*background:transparent url("./login/images/signin-nav-bg-ie.png") no-repeat 0 0;
*padding:4px 12px 6px;
}
#topnav a.signin:hover {
background:#15579b;
*background:transparent url("./login/images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
*padding:4px 12px 6px;
}
#topnav a.signin, #topnav a.signin:hover {
*background-position:0 3px!important;
}

a.signin {
position:relative;
margin-right:3px;
}

a.signin span {
background-image:url("./login/images/toggle_down_light.png");
background-repeat:no-repeat;
background-position:100% 50%;
padding:4px 0 6px 16px;
}

#topnav a.register {
background:#0d3156;
padding:4px 6px 6px;
text-decoration:none;
font-weight:bold;
color:#fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
*background:transparent url("./login/images/signin-nav-bg-ie.png") no-repeat 0 0;
*padding:4px 12px 6px;
}
#topnav a.register:hover {
background:#15579b;
*background:transparent url("./login/images/signin-nav-bg-hover-ie.png") no-repeat 0 0;
*padding:4px 12px 6px;
}
#topnav a.register, #topnav a.register:hover {
*background-position:0 3px!important;
}

a.register {
position:relative;
margin-right:0px;
}

a.register span {
background-image:url("./login/images/register_light.png");
background-repeat:no-repeat;
background-position:100% 50%;
padding:4px 0 6px 16px;
}



#topnav a.menu-open {
background:#0d3156!important;
color:#fff!important;
outline:none;
}
#small_signup {
display:inline;
float:none;
line-height:23px;
margin:25px 0 0;
width:170px;
}
a.signin.menu-open span {
background-image:url("./login/images/toggle_up_light.png");
color:#fff;
}

#signin_menu {
-moz-border-radius-topright:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
display:none;
/* background-color:#0d3156; */
background:url(login/images/login_back.png) #0d3156 repeat-x;
position:absolute;
width:210px;
z-index:100;
border:1px transparent;
text-align:right;
padding:12px;
top: 24.5px;
left: 0px;
margin-top:5px;
margin-left: 0px;
*margin-left: -1px;
color:#fff;
font-size:11px;
}

#signin_menu input&#91;type=text&#93;, #signin_menu input&#91;type=password&#93; {
display:block;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border:1px solid #0d3156;
background:url(login/images/field_back.png) repeat-x;
font-size:13px;
margin:0 0 5px;
padding:5px;
width:203px;
}
#signin_menu p {
margin:0;
}
#signin_menu a {
color:#fff;
}
#signin_menu label {
font-weight:normal;
}
#signin_menu p.remember {
padding:10px 0;
}
#signin_menu p.forgot, #signin_menu p.complete {
clear:both;
margin:5px 0;
}
#signin_menu p a {
color:#fff!important;
}
#signin_menu p a:hover {
text-decoration:underline;
}

#signin_submit {
-moz-border-radius:4px;
-webkit-border-radius:4px;
background-color:#0d3156;
border:1px solid #fff;
color:#fff;
text-shadow:0 -1px 0 #39d;
padding:4px 10px 5px;
font-size:11px;
margin:0 0 0 5px;
font-weight:bold;
}
#signin_submit::-moz-focus-inner {
padding:0;
border:0;
}
#signin_submit:hover, #signin_submit:focus {
background-position:0 -5px;
cursor:pointer;
}
/* 3arab-net.com Custom Login */
</code> </code>


________ ________
/////////\ الخطوه 3 /////////\

افتح القالب template &quot;header&quot;

ابحث عن:

رمز PHP:

<code style="white-space:nowrap"> <code>

<div id="toplinks" class="toplinks">
<vb:if condition="$show&#91;'member'&#93;">
<ul class="isuser">
<li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;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&#91;'registerbutton'&#93;">
<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 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>
<li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>
</ul>
</li>
</vb:if>
<li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
</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 />
<ul class="nouser">
<vb:if condition="$show&#91;'registerbutton'&#93;">
<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 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 default-value" 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>" onfocus="if (this.value == '<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'){this.value=''; this.style.color='black';}" onblur="if (this.value == '') {this.value='<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>'; this.style.color='#828282';}"/>
<input type="password" class="textbox default-value" tabindex="102" name="vb_login_password" id="navbar_password" size="10" onfocus="this.style.color='black';" />
<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>
</li>
</ul>
</vb:if>
</div>
</code> </code>


واستبدلها ب

رمز PHP:

<code style="white-space:nowrap"> <code>


<div id="toplinks" class="toplinks">
<vb:if condition="$show&#91;'member'&#93;">
<ul class="isuser">
<li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;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&#91;'registerbutton'&#93;">
<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 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>
<li><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></li>
</ul>
</li>
</vb:if>
<li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
</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:if>
</div>
</code> </code>


________ ________
/////////\ الخطوه 4 /////////\

افتح القالب template &quot;navbar&quot;

ابحث عن:


رمز PHP:

<code style="white-space:nowrap"> <code>
<div class="body_wrapper">
</code> </code>

اضف بعدها:

رمز PHP:

<code style="white-space:nowrap"> <code>


<!-- 3arab-net.com Custom Login -->
<vb:if condition="$show&#91;'guest'&#93;">
<script src="login/javascripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {

$(".signin").click(function(e) {
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
});

$("fieldset#signin_menu").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
if($(e.target).parent("a.signin").length==0) {
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});

});
</script>

<script type="text/javascript" src="clientscript/vbulletin_md5.js?v={vb:raw vboptions.simpleversion}"></script>

<div id="container">
<div id="topnav" class="topnav"> لديك حساب؟ <a href="login" class="signin"><span>الدخول</span></a> <a href="./register.php" class="register"><span>التسجيل</span></a> </div>
<fieldset id="signin_menu">
<form method="post" id="signin" action="login.php?{vb:raw session.sessionurl}do=login" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
<label for="username">اسم المستخدم</label>

<input id="navbar_username" type="text" value="" tabindex="101" accesskey="u" name="vb_login_username" />

</p>
<p>
<label for="password">كلمه السر</label>

<input id="navbar_password" type="password" value="" tabindex="102" accesskey="u" name="vb_login_password" />

</p>
<p class="remember">
<input type="submit" id="signin_submit" value="دخول" tabindex="104" title="دخول" accesskey="s" />
<input id="cb_cookieuser_navbar" type="checkbox" accesskey="c" tabindex="103" value="1" name="cookieuser" checked="checked"/>
<label for="cb_cookieuser_navbar">تذكرني?</label>
</p>
<p class="forgot"> <a href="./login.php?do=lostpw">نسيت كلمه السر?</a> </p>
<p class="forgot-username"> <A title="وتشمل البريد الإلكتروني الخاص بك في رسالة دعم."
href="./sendmessage.php">نسيت اسم المستخدم?</A> </p>

<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>
</fieldset>
</div>
</vb:if>
<!-- 3arab-net.com Custom Login -->
</code> </code>


وانتهينا








ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif Custom Login.zip (http://www.traidnt.net/vb/attachments/497561d1278196663-custom-login.zip) (29.8 كيلوبايت, عدد مرات المشاهدة 130 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©

استعمل مربع البحث في الاسفل لمزيد من المواضيع


سريع للبحث عن مواضيع في المنتدى