ط§ط¶ط§ظپط§طھ ظپظٹ ظ„ظˆط*ط© طھط³ط¬ظٹظ„ ط§ظ„ط¯ط®ظˆظ„ css ط¯ط§ط¹ظ… ظ…ظˆط¶ظˆط¹ ط¹ظ…ط± ط§ظ„ط¹ط§ظ†ظٹ
بسسسم الله الرحمن الرحيم
السسلام عليكم ورحمة الله وبركاته
اخباركم يا حلوين عسااكم بخير
ان شاء الله دايما تكونو بخير
ومعهدنا الكريم ان شاء الله
دائما من تطور الى تطور
طبعا مين فينا ما يعرف هذ1 الموضوع
طريقة عمل لوحة دخول الاعضاء للجيل الثالث VBULLETIN G3 css
كلنا نعرفهـ وكلنا نعتمد على هذا الموضوع وجزى الله الف خير اخونا العاني ما قصر في طرحه هذا الموضوع
شفت اكثر من استفسار عن طريقة اضافة خصائص جديده في لوحة تسجيل الدخول للأعضاء
طبعا بعد تسجيل الدخول فقلت ليش ما احاول واسوي والحمد لله توصلت لنتيجه حلوة
وتابعو هذا الدرس مفصل وان شاء الله راح تستفيدون منه بس التركيز اهم شي تكفون
نتيجه للدرس مفصل قبل البدء
[IMG]http://www.dzbatna.com/attachments/692602d1367363711-ظ…طھط*ط±ظƒط©.gif[/IMG]
الإضافات هي :-
لوحة تحكم العضو
الرسآئل الخاصة بي
آصدقــائي في المنتدى forum
الرئيسيهــ
الــبومآآتي
بروفآآيلي
الخرووووج
^^
^
طبعا الأشياء المذكورة هذي موجوده تلقائيا في المنتدى forum اللهم انت راح تسوي اختصار بـ وضع صور
لـ اعضائك عشان تسهل عليهم المهمة وتريح لهم راسهم
طيب الحين شفنا الإضافات وكل شيء
الحين نأتي لـ طريقة التركيب install ..
الطريقة سهلة جدا انت بس ركززز وفتح عيونك
طيب الحين انت بعد ما صممت لوحة الدخول وطبقت درس مفصل عمر العاني بالحرف << بالحرف هاا
في كود code راح نضعه في الهيدر header او في المكان الي ركبت فيه الكود code الي حطه عمر العاني
الـ خاص بـ تسجيل الدخول لاحظ الكود code العادي حق تسجيل الدخول وليس كود code CsS
طيب ندخل قالب template الهيدر header او القالب template اللذي وضعنا في الكود code الخاص بـ عمر العاني لـ تسجيل الدخول
ونبحث عن
رمز PHP:
<code style="white-space:nowrap"> <code> <div><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></div>
</code> </code>
نستبدله بـ
رمز PHP:
<code style="white-space:nowrap"> <code> <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>
لاحظ انو حذفنا فقط حقت الرسائل الخاصه الي تجي تلقائي مع كود code تسجيل الدخول
و
اضفنا بداله الكود code حق الأزرار
طيب الحين ندخل على تعاريف CSS
ونضيف فيها الأتي :-
رمز PHP:
<code style="white-space:nowrap"> <code> .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;
}
</code> </code>
طبعا كله واضح باللغه العربيه ما يحتاج توضيح ومع كذا راح اوضح بعض الأشياء البسيطة
ركز هذي الحاجات الي راح تغيرها انت عشان تناسب تصميمك ..
راح اشرح طريقة خاصية واحده لكي يتبين لك وانت عدل على باقي الخواص بموجب هذا الشرح طريقة ..
مثلا خيار .g1{ هو خيار الصورة
و خيار g11{ هو خيار الهوفر للصورة بعد مرور الماوس عليها يعني
أن شاء الله الدرس مفصل يكون واضح للجميع
وأي استفسار انا جاهز ان شاء الله ..
وتحياتي لكم جميعا
تم ارفاق صور الدرس مفصل
+
صور الأيقونات هديه لكم
طبعا يمكنك تصميم غيرها على حسب ما يناسبك .
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
رد مع اقتباس
