اضافات في لوحة تسجيل الدخول css داعم موضوع عمر العاني

http://www.dzbatna.com/images/icons/icon26.gif ط§ط¶ط§ظپط§طھ ظپظٹ ظ„ظˆط*ط© طھط³ط¬ظٹظ„ ط§ظ„ط¯ط®ظˆظ„ css ط¯ط§ط¹ظ… ظ…ظˆط¶ظˆط¹ ط¹ظ…ط± ط§ظ„ط¹ط§ظ†ظٹ

---

بسسسم الله الرحمن الرحيم http://www.dzbatna.com/images/smilies/shiny01.gif

السسلام عليكم ورحمة الله وبركاته
اخباركم يا حلوين عسااكم بخير
ان شاء الله دايما تكونو بخير
ومعهدنا الكريم ان شاء الله
دائما من تطور الى تطور



طبعا مين فينا ما يعرف هذ1 الموضوع
طريقة عمل لوحة دخول الاعضاء للجيل الثالث VBULLETIN G3 css





كلنا نعرفهـ وكلنا نعتمد على هذا الموضوع وجزى الله الف خير اخونا العاني ما قصر في طرحه هذا الموضوع
شفت اكثر من استفسار عن طريقة اضافة خصائص جديده في لوحة تسجيل الدخول للأعضاء
طبعا بعد تسجيل الدخول فقلت ليش ما احاول واسوي والحمد لله توصلت لنتيجه حلوة http://www.dzbatna.com/images/smilies/nosweat.gif
وتابعو هذا الدرس مفصل وان شاء الله راح تستفيدون منه بس التركيز اهم شي تكفون http://www.dzbatna.com/images/smilies/strongly.gif
نتيجه للدرس مفصل قبل البدء
[IMG]http://www.dzbatna.com/attachments/692602d1367363711-ظ…طھط*ط±ظƒط©.gif[/IMG]






الإضافات هي :-


لوحة تحكم العضو

الرسآئل الخاصة بي

آصدقــائي في المنتدى forum

الرئيسيهــ

الــبومآآتي

بروفآآيلي

الخرووووج

^^
^



طبعا الأشياء المذكورة هذي موجوده تلقائيا في المنتدى forum اللهم انت راح تسوي اختصار بـ وضع صور
لـ اعضائك عشان تسهل عليهم المهمة وتريح لهم راسهم http://www.dzbatna.com/images/smilies/shiny01.gif

طيب الحين شفنا الإضافات وكل شيء




الحين نأتي لـ طريقة التركيب install ..
الطريقة سهلة جدا انت بس ركززز وفتح عيونك

طيب الحين انت بعد ما صممت لوحة الدخول وطبقت درس مفصل عمر العاني بالحرف << بالحرف هاا
في كود code راح نضعه في الهيدر header او في المكان الي ركبت فيه الكود code الي حطه عمر العاني
الـ خاص بـ تسجيل الدخول لاحظ الكود code العادي حق تسجيل الدخول وليس كود code CsS

طيب ندخل قالب template الهيدر header او القالب template اللذي وضعنا في الكود code الخاص بـ عمر العاني لـ تسجيل الدخول


ونبحث عن


رمز PHP:

<div><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]phrase>div>


نستبدله بـ


رمز PHP:

<p class="esm"><a class="eee" href="usercp.php" title="الخرووووج" onclick="return log_out('هل أنت متأكد برغبتك في الخروج من المنتدى forum؟')">a>p>
<p class="g1"><a class="eee" href="usercp.php" title="لوحة تحكم العضو">a>p>
<p class="g2"><a class="eee" href="private.php" title="الرسآئل الخاصة بي">a>p>
<p class="g3"><a class="eee" href="profile.php?do=buddylist" title="آصدقــائي في المنتدى forum">a>p>
<p class="g4"><a class="eee" href="index.php" title="الرئيسيهــ">a>p>
<p class="g5"><a class="eee" href="album.php" title="الــبومآآتي">a>p>
<p class="g6"><a class="eee" href="">a>p>
<p class="g7"><a class="eee" href="member.php" title="بروفآآيلي">a>p>


لاحظ انو حذفنا فقط حقت الرسائل الخاصه الي تجي تلقائي مع كود code تسجيل الدخول
و
اضفنا بداله الكود code حق الأزرار



طيب الحين ندخل على تعاريف CSS

ونضيف فيها الأتي :-


رمز PHP:

.esm{
background: url(images/twitterstyel/3s.PNG) no-repeat;/*تسجيل الخروج*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
width:46px;/*عرض الصورة بنسبة بكسل*/
height: 46px;/*ارتفاع الصورة بسبة بكسل*/
top: 165px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 80px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
.esm:hover{
background: url(images/twitterstyel/33s.PNG) no-repeat;/*تسجيل الخروج*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
width:46px;/*عرض الصورة بنسبة بكسل*/
height: 46px;/*ارتفاع الصورة بسبة بكسل*/
top: 165px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 80px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
.g1{
background: url(images/twitterstyel/logen/g1.png) no-repeat;/*لوحة تحكم*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
width:22px;/*عرض الصورة بنسبة بكسل*/
height: 23px;/*ارتفاع الصورة بسبة بكسل*/
top: 100px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 140px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
.g1:hover{
background: url(images/twitterstyel/logen/g11.png) no-repeat;/*لوحة تحكم*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
width:22px;/*عرض الصورة بنسبة بكسل*/
height: 23px;/*ارتفاع الصورة بسبة بكسل*/
top: 100px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 140px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
.g2{
background: url(images/twitterstyel/logen/g2.png) no-repeat;/*الرسائل الخاصة*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
width:28px;/*عرض الصورة بنسبة بكسل*/
height: 24px;/*ارتفاع الصورة بسبة بكسل*/
top: 98px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 110px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
.g2:hover{
background: url(images/twitterstyel/logen/g22.png) no-repeat;/*الرسائل الخاصة*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
width:28px;/*عرض الصورة بنسبة بكسل*/
height: 24px;/*ارتفاع الصورة بسبة بكسل*/
top: 98px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 110px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
.g3{
background: url(images/twitterstyel/logen/g3.png) no-repeat;/*الاصدقاء*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
width:24px;/*عرض الصورة بنسبة بكسل*/
height: 24px;/*ارتفاع الصورة بسبة بكسل*/
top: 102px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 79px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
.g3:hover{
background: url(images/twitterstyel/logen/g33.png) no-repeat;/*الاصدقاء*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
width:24px;/*عرض الصورة بنسبة بكسل*/
height: 24px;/*ارتفاع الصورة بسبة بكسل*/
top: 102px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 79px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
.g4{
background: url(images/twitterstyel/logen/g4.png) no-repeat;/*البداية*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
width:27px;/*عرض الصورة بنسبة بكسل*/
height: 27px;/*ارتفاع الصورة بسبة بكسل*/
top: 97px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 47px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
.g4:hover{
background: url(images/twitterstyel/logen/g44.png) no-repeat;/*البداية*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
width:27px;/*عرض الصورة بنسبة بكسل*/
height: 27px;/*ارتفاع الصورة بسبة بكسل*/
top: 97px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 47px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
.g5{
background: url(images/twitterstyel/logen/g5.png) no-repeat;/*البوم*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
width:26px;/*عرض الصورة بنسبة بكسل*/
height: 20px;/*ارتفاع الصورة بسبة بكسل*/
top: 130px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 110px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
.g5:hover{
background: url(images/twitterstyel/logen/g55.png) no-repeat;/*البوم*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
width:26px;/*عرض الصورة بنسبة بكسل*/
height: 20px;/*ارتفاع الصورة بسبة بكسل*/
top: 130px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 110px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
.g6{
background: url(images/twitterstyel/logen/g6.png) no-repeat;/*فارغ*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
width:26px;/*عرض الصورة بنسبة بكسل*/
height: 26px;/*ارتفاع الصورة بسبة بكسل*/
top: 130px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 75px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
.g6:hover{
background: url(images/twitterstyel/logen/g66.png) no-repeat;/*فارغ*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
width:26px;/*عرض الصورة بنسبة بكسل*/
height: 26px;/*ارتفاع الصورة بسبة بكسل*/
top: 130px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 75px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
.g7{
background: url(images/twitterstyel/logen/g7.png) no-repeat;/*فارغ*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
width:26px;/*عرض الصورة بنسبة بكسل*/
height: 26px;/*ارتفاع الصورة بسبة بكسل*/
top: 130px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/
left: 48px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
.g7:hover{
background: url(images/twitterstyel/logen/g77.png) no-repeat;/*فارغ*/
position: absolute;/*امر وضع الصورة في طبقة فوق الصور*/
width:26px;/*عرض الصورة بنسبة بكسل*/
height: 26px;/*ارتفاع الصورة بسبة بكسل*/
top: 130px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو الاسفل*/



left: 48px;/*امر تحريك الصورةكلما زادت نسبة الرقم توجه الصورة نحو اليمين*/
}
a.eee{
height:46px;
width:46px;
display:block;
position:absolute;
}


طبعا كله واضح باللغه العربيه ما يحتاج توضيح ومع كذا راح اوضح بعض الأشياء البسيطة
ركز هذي الحاجات الي راح تغيرها انت عشان تناسب تصميمك ..





راح اشرح طريقة خاصية واحده لكي يتبين لك وانت عدل على باقي الخواص بموجب هذا الشرح طريقة ..
مثلا خيار .g1{ هو خيار الصورة
و خيار g11{ هو خيار الهوفر للصورة بعد مرور الماوس عليها يعني




أن شاء الله الدرس مفصل يكون واضح للجميع
وأي استفسار انا جاهز ان شاء الله ..




وتحياتي لكم جميعا

تم ارفاق صور الدرس مفصل
+
صور الأيقونات هديه لكم


طبعا يمكنك تصميم غيرها على حسب ما يناسبك .

ألعاب الأندرويد مجانا و حصريا

https://fbcdn-sphotos-d-a.akamaihd.n...93518507_n.png
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©