×

طريقة عمل لوحة دخول الاعضاء للجيل الثالث css

السلام عليكم ورحمة الله في الفترة الاخيرة رأيت الكثير من الاعضاء في قسم ركن مشاكل الاستايلات يطلبون توزيع لوحة الدخول قلت اهو اوصل الفكرة عسى

صورة 'عمر العاني' الرمزية
قديمة 24 - 04 - 2011, 20:46
المشاركة 1
السلام عليكم ورحمة الله
في الفترة الاخيرة رأيت الكثير من الاعضاء في قسم ركن مشاكل الاستايلات يطلبون توزيع لوحة الدخول
قلت اهو اوصل الفكرة عسى ولعل انفع بيها غيري واتمنى ان لايكون الموضوع مكرر
بأختصار شديد ما راح ادخل للتفاصيل لكن اذا في حد احتاج الى تفصيل ان شاء الله يبشر خير
نقدم المثال

طريقة عمل لوحة دخول الاعضاء للجيل الثالث css



طريقة عمل لوحة دخول الاعضاء للجيل الثالث css

العبره هنا ليست في طريقة التصميم وانما بالتوزيع واهم شي في هذا التوزيع هو الامر

رمز Code:
position: absolute;
حيث ان هذا الامر عندما يكون في كود الصورة سيجعلها في طبقة فوق الصور ويمكن تحريكها لاي اتجاه من خلال
اوامر التحكم التالية
رمز Code:
top: 12px;
left: 26px;
حيث ان امر top كلما ازداد الرقم الذي بجانبه يتوجه التصميم نحو الاسفل
والامر left كلما ازدادت نسبة الرقم بجانبه يتوجه التصميم نحو اليمن

الان نبدأ بسم الله الرحمن الرحيم
قالب تسجيل الدخول جاهز ولا يحتاج للتعديل

رمز PHP:
<!-- login al3any -->
<if 
condition="$show['member']">
 <
td class="alt2" nowrap="nowrap">
 <
div id="login2">
 <
div class="wellcom">
  <
strong><phrase 1="$bbuserinfo[username]2="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[welcome_x_link_y]</phrase></strong><br />
  <
phrase 1="$pmbox[lastvisitdate]2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase>
  <if 
condition="$show['notifications']">
   <
div><span id="notifications"><a href="usercp.php$session[sessionurl_q]">$vbphrase[your_notifications]:</a> <strong>$notifications_total</strong></span></div>
   <if 
condition="$show['popups']">
    <
script type="text/javascript"vBmenu.register("notifications"); </script>
   <else />
    <script type="text/javascript" src="clientscript/vbulletin_notifications_nopopups.js?v=$vboptions[simpleversion]"></script>
    <script type="text/javascript"> vBulletin.register_control("vB_Notifications_NoPopups", "notifications");  </script>
   </if>
  <else /><if condition="$show['pmstats']">
   <div><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></div>
  </if></if>
  <if condition="$show['pmwarning']"><div><strong><phrase 1="$vbphrase[pmpercent_nav_compiled]">$vbphrase[your_pm_box_is_x_full]</phrase></strong></div></if>
 </div>
 </td>
 </div>
<else />
<div id="login">
 <td class="alt2" nowrap="nowrap" style="padding:0px"> 
  <form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
  <script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
  <table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
  <tr>
 
   <td><input type="text" class="namelogin" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>
  <td><input type="checkbox" class="remember" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" /></td>
  </tr>
  <tr>
   <td><input type="password" class="passlogin" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" tabindex="102" /></td>
  <!-- button -->
        <td><input type="image" src="login/login-button.png" class="login-button" tabindex="104" value="" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td>
 
  </tr>
  </table>
  <input type="hidden" name="s" value="$session[sessionhash]" />
  <input type="hidden" name="securitytoken" value="$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>
 </td>
</if>
</div>
<!-- / login al3any --> 
يفضل وضعه في الهيدر



ثانيا نحتاج الى تصميم لوحة الدخول وتكون بالشكل التالي انا ما اقصد الفكرة لكن المحتويات لاحظ
طريقة عمل لوحة دخول الاعضاء للجيل الثالث css
يعني فيها شريط ادخال الاسم والرقم السري وفيها زر تسجيل الدخول اوكي

كود تعاريف css الخاص بالصورة يحتاج للتعديل حسب ما تحب وهو مشروح بالتفصيل
رمز Code:
#login{
background: url(login/login1.png) no-repeat;/*مسار الصورة*/
width:238px;/*عرض الصورة بنسبة بكسل*/
height: 132px;/*ارتفاع الصورة بسبة بكسل*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
top: 40px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 133px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
الان نحتاج لتصميم صورة شفافة لكي تعوض عن مكان اسم العضو والباسوورد بالشكل التالي لكن شفافة
طريقة عمل لوحة دخول الاعضاء للجيل الثالث css
هذه الصورة سوف تستخدم لادخال معلومات اسم العضو والباسوورد
تعاريف css الخاصة بمنطقة ادخال الاسم
رمز Code:
.namelogin{
background: url(login/name-pass.png) no-repeat;/*مسار الصورة*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
top: 12px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 26px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
width:143px;/*عرض الصورة بنسبة بكسل*/
height: 15px;/*ارتفاع الصورة بسبة بكسل*/
border: 0px;/*الحواف تفضل ان تكون صفر*/
}
نفس الصورة سوف نستخدمها لمنطقة ادخال الباسوورد راح تلاحظ من تعاريف css الفرق بسيط جدا وهو
فقط امر top تكون قيمته اكثر من حيث العدد لكي يكون الباسوورد تحت الاسم لو حاب يكون الباسوورد بجانب الاسم
يكون امر top متساوي لكن امر left بالنسبة لادخال الاسم يكون قيمته اكثر والباسوورد اقل
تعاريف css الخاصة بشريط ادخال الباسوورد
رمز Code:
.passlogin{
background: url(login/name-pass.png) no-repeat;/*مسار الصورة*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
top: 36px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 26px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
width:143px;/*عرض الصورة بنسبة بكسل*/
height: 15px;/*ارتفاع الصورة بسبة بكسل*/
border: 0px;/*الحواف تفضل ان تكون صفر*/
}
الان نأتي الى علامة تذكرني التعاريف الخاصة بيها
رمز Code:
.remember{/*علامة تذكرني*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
top: 97px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 0px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
width:15px;/*عرض يفضل عدم التلاعب به*/
height: 15px;/*ارتفاع يفضل عدم التلاعب به*/
}
الان تبقى زر الدخول وهنا نصمم صورة شفافة تعوض الزر
التعاريف الخاصة بيها
رمز Code:
.login-button{/*هذه الصورة لاتحتوي على مسار مسارها داخل القالب*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
top: 76px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 26px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
width:57px;/*عرض الصورة بنسبة بكسل*/
height: 22px;/*ارتفاع الصورة بسبة بكسل*/
}
مسار هذه الصور لايكون في التعاريف وانما في القالب الي ارفقته في البداية ابحث عن
رمز PHP:
<!-- button --> 
اسفلها تجد كود فيه هذا
رمز PHP:
login/login-button.png 
هذا مسار الصورة
الان اكملنا تسجيل الدخول لكن بعد ما ندخل
نحتاج الى صورة نفس الاولى لكن مفرغة
طريقة عمل لوحة دخول الاعضاء للجيل الثالث css
التعاريف الخاصة بيها

رمز Code:
#login2{
background: url(login/login2.png) no-repeat;/*مسار الصورة*/
width:238px;/*عرض الصورة بنسبة بكسل*/
height: 132px;/*ارتفاع الصورة بسبة بكسل*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
top: 40px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 133px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
تبقى الان شي واحد وهو الكتابة التي تضهر اهلا وسهلا بك فلان اخر زيارة كانت في تاريخ........ الخ
هذه التعاريف الخاصه فيها اذا اردت تحريكها او ما شابه
رمز Code:
.wellcom{/*هذا الامر يختص بكلام الترحيب والرسائل الخاصة يضهر بعد الدخول*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
width:200px;/*عرض الصورة بنسبة بكسل*/
top: 10px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 30px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
الى هنا انتهى العمل على لوحة الدخول اتمنى ان اكون قد قدمت ما ينفع
ملاحظة ممكن ان نصمم صورة مفرغة ونجعل صور التعويض(الشفافة ) الى صور فعلية لكني رأيت الى ان من خلال
تصميم لوحة كامله ممكن التنويع من خلال وضع ايقونات او صور تجميليله او روابط اخرى
اتمنى لكم التوفيق
المشاهدات 25761 | التعليقات 161
قديمة 24 - 04 - 2011, 22:49
المشاركة 2
halla2
:: عضو نشيط ::
تاريخ الإنضمام: 21 - 01 - 2010
رقم العضوية : 77292
المشاركات: 585
افتراضي
شرح مميز جدا ماشاء الله
مشكورين عزيزي على الدرس
و ماهو الكود اللي نحدفه من النافبار عزيزي
الكود الصحيح لأنه في مواضيع بها اخطاء
قديمة 24 - 04 - 2011, 23:33
المشاركة 3
صورة 'عمر العاني' الرمزية
عمر العاني
:: عضو نشيط ::
تاريخ الإنضمام: 05 - 03 - 2009
رقم العضوية : 65729
الدولة : عاصمة الرشيد
العمر: 31
المشاركات: 4,026
420
افتراضي
هذا الكود اخي

رمز PHP:
<if condition="$show['member']">
    <
td class="alt2" nowrap="nowrap">
    <
div class="smallfont">
        <
strong><phrase 1="$bbuserinfo[username]2="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[welcome_x_link_y]</phrase></strong><br />
        <
phrase 1="$pmbox[lastvisitdate]2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase>

        <if 
condition="$show['notifications']">
            <
div><span id="notifications"><a href="usercp.php$session[sessionurl_q]">$vbphrase[your_notifications]:</a> <strong>$notifications_total</strong></span></div>
            <if 
condition="$show['popups']">
                <
script type="text/javascript"vBmenu.register("notifications"); </script>
            <else />
                <script type="text/javascript" src="clientscript/vbulletin_notifications_nopopups.js?v=$vboptions[simpleversion]"></script>
                <script type="text/javascript"> vBulletin.register_control("vB_Notifications_NoPopups", "notifications");  </script>
            </if>
        <else /><if condition="$show['pmstats']">
            <div><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></div>
        </if></if>

        <if condition="$show['pmwarning']"><div><strong><phrase 1="$vbphrase[pmpercent_nav_compiled]">$vbphrase[your_pm_box_is_x_full]</phrase></strong></div></if>
    </div>
    </td>
<else />
    <td class="alt2" nowrap="nowrap" style="padding:0px">
        <!-- login form -->
        <form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
        <script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
        <table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
        <tr>
            <td class="smallfont" style="white-space: nowrap;"><label for="navbar_username">$vbphrase[username]</label></td>
            <td><input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>
            <td class="smallfont" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />$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" name="vb_login_password" id="navbar_password" size="10" tabindex="102" /></td>
            <td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td>
        </tr>
        </table>
        <input type="hidden" name="s" value="$session[sessionhash]" />
        <input type="hidden" name="securitytoken" value="$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>
        <!-- / login form -->
    </td>
</if> 
وهو بالضبط من السطر 22 الى 68 اذا كان القالب لا يحتوي على تعديل
اتمنالك التوفيق
وشكرا لمرورك اخي العزيز
الوسم, TT5TT.com و haeaty.com معجبون بهذا .
قديمة 25 - 04 - 2011, 02:17
المشاركة 4
fantasy-des
Guest
المشاركات: n/a
افتراضي
عمر هادي

ابدعت بطرحك المميز


ومشكور ع هالدرس
قديمة 25 - 04 - 2011, 13:34
المشاركة 5
صورة 'عمر العاني' الرمزية
عمر العاني
:: عضو نشيط ::
تاريخ الإنضمام: 05 - 03 - 2009
رقم العضوية : 65729
الدولة : عاصمة الرشيد
العمر: 31
المشاركات: 4,026
420
افتراضي
عمر هادي

ابدعت بطرحك المميز


ومشكور ع هالدرس
شكرا لمرورك اخي العزيز واتمنالك التوفيق
قديمة 25 - 04 - 2011, 15:11
المشاركة 6
mr.arabyun
.:: عضو متألق ::.
تاريخ الإنضمام: 15 - 11 - 2010
رقم العضوية : 86977
الدولة : السعودية
المشاركات: 5,619
77
افتراضي
الصراحه مبدع ربي يجزاك الف الف خير واصل تميزك بارك الله فيك



قديمة 25 - 04 - 2011, 15:21
المشاركة 7
صورة 'عمر العاني' الرمزية
عمر العاني
:: عضو نشيط ::
تاريخ الإنضمام: 05 - 03 - 2009
رقم العضوية : 65729
الدولة : عاصمة الرشيد
العمر: 31
المشاركات: 4,026
420
افتراضي
شكرا لمرورك اخي مستر اربيون وانت الي مبدع والله من خلال ما تقدم

اتمنالك التوفيق
قديمة 25 - 04 - 2011, 16:18
المشاركة 8
السيد المصرى!!
:: عضو نشيط ::
تاريخ الإنضمام: 16 - 11 - 2010
رقم العضوية : 88082
الدولة : مـــــــــــــ المنصوره ـــــــصر
المشاركات: 427
8
افتراضي
تسلم اخى عمر

شرح وافى ورائع وسلسل

تقبل تحياتى لك
أسم الموقع: شبكة مصر للتصميم والدعم الفنى
صاحب الموقع :السيد المصرى
خدمات الموقع: تصميم / دعم فنى /استضافة
بريد الموقع : [email protected]
روابط الموقع:http://www.networkmsr.com



قديمة 25 - 04 - 2011, 16:59
المشاركة 9
صورة 'عمار خولاني' الرمزية
عمار خولاني
:: عضو نشيط ::
تاريخ الإنضمام: 16 - 11 - 2010
رقم العضوية : 88817
الدولة : أرض الحرية
المشاركات: 1,040
13
افتراضي
يعطيك الف عافية
طريقة جميلة وتستاهل عنائها


اللهم اننا نشكرك ولا نكفرك ونخلع ونخترق من يهجرك اللهم إياك نعبد ولك نصلي ونسجد وإليك نسعى ونحفد، نخشى عذابك ونرجو رحمتك،ان عذابك بالكفار ملحق
قديمة 25 - 04 - 2011, 20:50
المشاركة 10
صورة 'عمر العاني' الرمزية
عمر العاني
:: عضو نشيط ::
تاريخ الإنضمام: 05 - 03 - 2009
رقم العضوية : 65729
الدولة : عاصمة الرشيد
العمر: 31
المشاركات: 4,026
420
افتراضي
تسلم اخى عمر

شرح وافى ورائع وسلسل

تقبل تحياتى لك
يا هلا اخي السيد المصري شكرا لمرورك الجميل واتمنالك التوفيق
يعطيك الف عافية
طريقة جميلة وتستاهل عنائها
هلا بالمبدع عمار كيفك اخي ان شاء الله يكون الدرس عن حسن الضن
بالتوفيق
قديمة 29 - 04 - 2011, 02:41
المشاركة 11
صدى الاماكن
:: عضو نشيط ::
تاريخ الإنضمام: 03 - 03 - 2011
رقم العضوية : 96449
الدولة : حائل
المشاركات: 1,020
افتراضي
أكثر من رائع جزاك الله خيراً
قديمة 29 - 04 - 2011, 17:12
المشاركة 12
صورة 'عمر العاني' الرمزية
عمر العاني
:: عضو نشيط ::
تاريخ الإنضمام: 05 - 03 - 2009
رقم العضوية : 65729
الدولة : عاصمة الرشيد
العمر: 31
المشاركات: 4,026
420
افتراضي
شكرا لمرورك وبارك الله فيك ويجزانا الجنة اجمعين
قديمة 30 - 04 - 2011, 02:02
المشاركة 13
ارشفة فويس
تحت المجهر
تاريخ الإنضمام: 21 - 04 - 2007
رقم العضوية : 34346
الدولة : Jeddah City
المشاركات: 2,015
11
افتراضي
بارك الله فيك
قديمة 30 - 04 - 2011, 06:34
المشاركة 14
صورة 'بارقة' الرمزية
بارقة
:: عضو فعال ::
تاريخ الإنضمام: 01 - 03 - 2011
رقم العضوية : 89028
المشاركات: 174
افتراضي
تسلم يدينك والله يعطيك العافيه
قديمة 30 - 04 - 2011, 09:05
المشاركة 15
barbaracom
:: عضو نشيط ::
تاريخ الإنضمام: 01 - 03 - 2011
رقم العضوية : 89187
المشاركات: 201
افتراضي
 
اضافة رد
 

طريقة تأطير بيانات العضو في قالب البوست ليجاسي حصريا إضافة أيقونات المواقع الاجتماعية في النافبار بدون هاكات

أدوات الموضوع ابحث في الموضوع
ابحث في الموضوع:

البحث المتقدم
طرق العرض


الساعة معتمدة بتوقيت جرينتش +3 . الساعة الآن : 12:03.
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسئولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه
التعليقات المنشورة لا تعبر عن رأي معهد ترايدنت ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)

جميع الحقوق محفوظة Traidnt 2019
  • 00966138651070
  • 00966138648289
  • 2051033691
Powered by vBulletin® Version 3.8.11 .Copyright ©2000 - 2019, Jelsoft Enterprises Ltd
SEO by vBSEO ©2011, Crawlability, Inc.