الموضوع
:
تسجيل الدخول مثل تويتر بتقنيةcss
عرض مشاركة واحدة
مــــلــــوكـــه
07-07-2013 ~ 04:21 PM
تسجيل الدخول مثل تويتر بتقنيةcss
ãÔÇÑßÉ ÑÞã
1
تاريخ التسجيل :
May 2012
ÚÏÏ ãÔÇÑßÇÊí : 98,035
معدل تقييم المستوى :
111
السلام عليكم ورحمة الله وبركاته
بسم الله الرحمن الرحيم
مسائـكـم / صباحـكـم سعادهـ وفرح يارب
كيفكم اعضاء حزن العشاق
عساكم بخير
اليوم حبيت نشوف جديدتطويرالمنتدى
ندخل قالب navbar للستايل المراد التعديل عليه
ثم نبحث عن
كود PHP
<!--
login form
-->
<
form action
=
"login.php?do=login"
method
=
"post"
onsubmit
=
"md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])"
>
<******
type
=
"****/**********"
src
=
"client******/vbulletin_md5.js?v=$vboptions[simpleversion]"
><
/******>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
<tr>
<td class="smallfont" style="white-space: nowrap;"><label for="navbar_user****">$vbphrase[user****]</label></td>
<td><input type="****" class="bginput" style="font-size: 11px" ****="vb_login_user****" id="navbar_user****" size="10" accesskey="u" tabin***="101" value="$vbphrase[user****]" **********if (this.value == '$vbphrase[user****]') this.value = '';" /></td>
<td class="smallfont" nowrap="nowrap"><label for="cb_ieuser_navbar">
<input type="checkbox" ****="ieuser" value="1" tabin***="103" id="cb_ieuser_navbar" accesskey="c" checked />$vbphrase[remember_me]</label></td>
</tr>
<tr>
<td class="smallfont"><label for="navbar_password">$vbphrase[password]</label></td>
<td><input type="password" class="bginput" style="font-size: 11px" ****="vb_login_password" id="navbar_password" size="10" tabin***="102" /></td>
<td><input type="submit" class="button" value="$vbphrase[log_in]" tabin***="104" title="$vbphrase[enter_user****_to_login_or_register]" accesskey="s" /></td>
</tr>
</table>
<input type="hidden" ****="s" value="$session[sessionhash]" />
<input type="hidden" ****="securitytoken" value="$bbuserinfo[securitytoken]" />
<input type="hidden" ****="do" value="login" />
<input type="hidden" ****="vb_login_md5password" />
<input type="hidden" ****="vb_login_md5password_utf" />
</form>
<!-- / login form -->
نحذف ما بين الكودين
كود PHP
<!-- /
login form
-->
نضع هذا الكود بدل الي حذفناه
كود PHP
<if
condition
=
"$show['guest']"
>
<******
src
=
"login/**********s/jquery.js"
type
=
"****/**********"
><
/******>
<****** type="****/
**********
">
$(********).ready(function() {
$("
.
signin
").click(function(e) {
e.preventDefault();
$("
fieldset
#signin_menu").toggle();
$(
".signin"
).
toggleClass
(
"menu-open"
);
});
$(
"fieldset#signin_menu"
).
mouseup
(function() {
return
false
});
$(********).
mouseup
(function(
e
) {
if($(
e
.
target
).
parent
(
"a.signin"
).
length
==
0
) {
$(
".signin"
).
removeClass
(
"menu-open"
);
$(
"fieldset#signin_menu"
).
hide
();
}
});
});
<
/******>
<****** type="****/
**********
" src="
client
******/
vbulletin_md5
.
js
?
v
=
$vboptions
[
simpleversion
]
"></******>
<div id="
container
">
<div id="
topnav
" class="
topnav
"> هل لديك حساب <a href="
login
.
php
" 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
?
$session
[
sessionurl
]do=
login
" onsubmit="
md5hash
(
vb_login_password
,
vb_login_md5password
,
vb_login_md5password_utf
, {
vb
:
raw show
.
nopasswordempty
})
">
<label for="
user
****
">الاسم</label>
<input id="
navbar_user
****
" type="
****
" value="" tabin***="
101
" accesskey="
u
" ****="
vb_login_user
****
" />
</p>
<p>
<label for="
password
">الرقم السري</label>
<input id="
navbar_password
" type="
password
" value="" tabin***="
102
" accesskey="
u
" ****="
vb_login_password
" />
</p>
<p class="
remember
">
<input type="
submit
" id="
signin_submit
" value="
دخول
" tabin***="
104
" title="
Login
" accesskey="
s
" />
<input id="
cb_ieuser_navbar
" type="
checkbox
" accesskey="
c
" tabin***="
103
" value="
1
" ****="
ieuser
" checked="
checked
"/>
<label for="
cb_ieuser_navbar
">تذكرني ؟</label>
</p>
<p class="
forgot
"> <a href="
./
login
.
php
?do=
lostpw
">نسيت الرقم السري ؟</a> </p>
<p class="
forgot
-
user
****
"> <A title="
لا تنسى ان تضع بريدك في الرسالة
.
"
href="
./
sendmessage
.
php
">نسيت اسم العضوية ؟</A> </p>
<input type="
hidden
" ****="
s
" value="
$session
[
sessionhash
]
" />
<input type="
hidden
" ****="
securitytoken
" value="
$bbuserinfo
[
securitytoken
]
" />
<input type="
hidden
" ****="
do
" value="
login
" />
<input type="
hidden
" ****="
vb_login_md5password
" />
<input type="
hidden
" ****="
vb_login_md5password_utf
" />
</form>
</fieldset>
</div>
</if>
نضع الاكواد التاليه
ضع في اخر تعاريف CSS الإضافية/Additional CSS Definitions
كود PHP
/* ***** login ***** */
#container {
float
:
right
;
margin
:
0 auto
;
position
:
relative
;
}
a img
{
border
-*****:
0
;
}
#topnav {
padding
:
10px 0px 12px
;
font
-
size
:
11px
;
line
-******:
23px
;
****-
align
:
right
;
}
#topnav a.signin {
background
:
#ED8522;
padding
:
4px 6px 6px
;
****-
decoration
:
none
;
font
-
weight
:
bold
;
color
:
#fff;
-***
kit
-
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
:
#F59A41;
*
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 span
{
background
-
image
:
url
(
"./login/images/toggle_down_light.png"
);
background
-
repeat
:
no
-
repeat
;
padding
:
4px 16px 6px 0
;
}
#topnav a.register {
background
:
#ED8522;
padding
:
4px 6px 6px
;
****-
decoration
:
none
;
font
-
weight
:
bold
;
color
:
#fff;
-***
kit
-
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
:
#F59A41;
*
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 span
{
background
-
repeat
:
no
-
repeat
;
background
-
position
:
100
%
50
%;
padding
:
4px 16px 6px 0
;
}
#topnav a.menu-open {
background
:
#ED8522!important;
color
:
#fff!important;
outline
:
none
;
}
#small_signup {
display
:
inline
;
float
:
none
;
line
-******:
23px
;
margin
:
25px 0 0
;
*****:
170px
;
}
a
.
signin
.
menu
-
open span
{
background
-
image
:
url
(
"./login/images/toggle_up_light.png"
);
color
:
#fff;
}
#signin_menu {
-
moz
-
border
-
radius
-
topleft
:
5px
;
-
moz
-
border
-
radius
-
bottomleft
:
5px
;
-
moz
-
border
-
radius
-
bottomright
:
5px
;
-***
kit
-
border
-
top
-
left
-
radius
:
5px
;
-***
kit
-
border
-
bottom
-
left
-
radius
:
5px
;
-***
kit
-
border
-
bottom
-
right
-
radius
:
5px
;
display
:
none
;
/* background-color:#ED8522; */
background
:
url
(
login
/
images
/
login_back
.
png
)
#ED8522 repeat-x;
position
:
absolute
;
*****:
210px
;
z
-
in
***:
100
;
border
:
1px transparent
;
****-
align
:
left
;
padding
:
12px
;
top
:
24.5px
;
right
:
0px
;
margin
-
top
:
5px
;
margin
-
right
:
0px
;
*
margin
-
right
: -
1px
;
color
:
#fff;
font
-
size
:
11px
;
}
#signin_menu input[type=****], #signin_menu input[type=password] {
display
:
block
;
-
moz
-
border
-
radius
:
4px
;
-***
kit
-
border
-
radius
:
4px
;
border
:
1px solid
#ED8522;
background
:
url
(
login
/
images
/
field_back
.
png
)
repeat
-
x
;
font
-
size
:
13px
;
margin
:
0 0 5px
;
padding
:
5px
;
*****:
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 {
****-
decoration
:
underline
;
}
#signin_submit {
-
moz
-
border
-
radius
:
4px
;
-***
kit
-
border
-
radius
:
4px
;
background
-
color
:
#ED8522;
border
:
1px solid
#fff;
color
:
#fff;
****-
shadow
:
0
-
1px 0
#39d;
padding
:
4px 10px 5px
;
font
-
size
:
11px
;
margin
:
0 5px 0 0
;
font
-
weight
:
bold
;
}
#signin_submit::-moz-focus-inner {
padding
:
0
;
border
:
0
;
}
#signin_submit:hover, #signin_submit:focus {
background
-
position
:
0
-
5px
;
cursor
:
pointer
;
}
/* ***** login ***** */
بعد ذلك نقوم برفع الملف المرفق الى مجلد منتداك الرئيسي
ليكون بهذا الشكل
vb/login
اضافتي على الموضوع: يمكنك التعديل على مسارات الصور في
اكواد css وجعل الصور داخل مجلد الصور للستايل لكي تكون النتيجه
في كل استايل نصممه لا اضافه نضعها بعد تركيب الستايل
مــــلــــوكـــه
مشاهدة ملفه الشخصي
إرسال رسالة خاصة إلى مــــلــــوكـــه
البحث عن كل مشاركات مــــلــــوكـــه