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

محروم.كوم · #1 07-04-2010, 03:50 AM

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

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

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

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

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

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

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

كود PHP:

/* 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[type=text], #signin_menu input[type=password] {
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 */

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

افتح القالب "header"

ابحث عن:

كود PHP:

{vb:rawphrase log_out}

{vb:rawphrase register}

{vb:rawphrase control_panel}
{vb:rawphrase your_profile}

{vb:rawphrase your_notifications}: {vb:raw notifications_total}

{vb:raw notifications_menubits}

{vb:rawphrase your_notifications}

{vb:rawphrase no_new_messages}
{vb:rawphrase inbox}

{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}

{vb:raw template_hook.header_userinfo}
{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}

{vb:rawphrase register}

{vb:rawphrase help}

{vb:rawphrase remember_me}

</ul>

واستبدلها ب

كود PHP:

{vb:rawphrase log_out}

{vb:rawphrase register}

{vb:rawphrase control_panel}
{vb:rawphrase your_profile}

{vb:rawphrase your_notifications}: {vb:raw notifications_total}

{vb:raw notifications_menubits}

{vb:rawphrase your_notifications}

{vb:rawphrase no_new_messages}
{vb:rawphrase inbox}

{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}

{vb:raw template_hook.header_userinfo}
{vb:rawphrase last_visited_x_at_y, {vb:raw pmbox.lastvisitdate}, {vb:raw pmbox.lastvisittime}}

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

افتح القالب "navbar"

ابحث عن:

كود PHP:

اضف بعدها:

كود PHP:

لديك حساب؟ الدخول التسجيل

اسم المستخدم

</p>

كلمه السر

تذكرني?
</p>
نسيت كلمه السر? </p>
نسيت اسم المستخدم? </p>

</div>
وانتهينا</div></div></div>
الصور المرفقة
الملفات المرفقة Custom Login.zip&rlm; (29.8 كيلوبايت) __DEFINE_LIKE_SHARE__