تسجيل الدخول مثل تويتر بتقنيةcss
السلام عليكم ورحمة الله وبركاته بسم الله الرحمن الرحيم مسائـكـم / صباحـكـم سعادهـ وفرح يارب كيفكم اعضاء حزن العشاق عساكم بخير اليوم حبيت نشوف جديدتطويرالمنتدى ندخل قالب 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 وجعل الصور داخل مجلد الصور للستايل لكي تكون النتيجه في كل استايل نصممه لا اضافه نضعها بعد تركيب الستايل |
الساعة الآن 05:56 AM |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. TranZ By
Almuhajir
هذا الموقع يتسخدم منتجات Weblanca.com
new notificatio by 9adq_ala7sas
منتديات حزن العشاق