منتدى استراحات زايد - (درس) شرح تغيير مكان تسجيل الدخول والرسائل الخاصة بشكل مميز بلغة css

http://arkbmana.info/up/upfiles/zs557218.gif

مرحبا بكل اعضاء وزوار مرسى الفي بي /ترايدنت /لينكات

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

لنبدأ ع البركة

1- قم باستخدام برنامج الفوتوشوب في تصميم شكل كالاتي وهو شكل بسيط كل حسب مايريد

http://img299.imageshack.us/img299/4...k6is84urxx.jpg

طبعا الشكل تم تصميمة طبقا للاستايل الافتراضي

تابع معي

2-صمم شكل مربع دخول كالاتي

http://img826.imageshack.us/img826/5177/69649870.jpg

http://img826.imageshack.us/img826/5177/69649870.jpg

وليكونا اثنين كهذا الشكل
3-صمم زر مكتو ب علية دخول الاعضاء او تسجيل او كما تريد وهذا مثال

http://img29.imageshack.us/img29/9215/44059808.jpg

وكل هذي اشكال بسيطة يمكن لمصصم ما تعديلها حسب استايلة او حسب ان يتم

والان دخلنا لللجد ركز معايا وهات دماغك وتعال معايا
دلوقتي هنعدل عكود الدخول في الناف بار

اول خطوة ادخل لوحة التحكم وهات الناف بار وتعال تابع الصورة

ودا الشكل العام للناف بار في الفرونت

http://img713.imageshack.us/img713/8264/84437510.jpg

قم بنسخ من اول الجزء المحدد في الصورة
http://img839.imageshack.us/img839/2262/53271051.jpg
اومن اول هذا الكود في السطر 22
كود PHP:

لغاية السطر 68
او الكود
كود PHP:

الموضح بالصورة
http://img843.imageshack.us/img843/7808/74166621.jpg

ليصبح بالشكل الاتي

http://img839.imageshack.us/img839/4008/75467151.jpg

<font face="Comic Sans MS"><font size="6"><font color="purple"><font size="4">
الان لعبة الاكواد المفضلة لدي
استعد الان نقوم بالتعديل وكتابة الاكواد الخاصة وتعديل الناف بار .
نبدا اول قم بتغيير اسماء الصور كما بالشكل
http://img709.imageshack.us/img709/1883/222qg.jpg

نرجع للكود اللى اخدناه من النافبار في الفرونت بيج تيجي لصفحة التعليمات البرمجية
<font color="Black">اللى هو بهذا الشكل

$vbphrase[username]

$vbphrase[remember_me]

$vbphrase[password]

</span>

استبدل هذ القالب بهذا الكود المعدل
كود PHP:

$vbphrase[welcome_x_link_y]
$vbphrase[last_visited_x_at_y]

$vbphrase[your_notifications]: $notifications_total

vBmenu.register("notifications");

$vbphrase[private_messages_nav]

$vbphrase[your_pm_box_is_x_full]

</div>
</div>

</div> </div></div>ليصبح الشكل النهائي للكود
http://img203.imageshack.us/img203/4342/38423827.jpg

قم بنسخ الكود الى قالب الهيدر انسخة في اول الهيدر

والان ركز معايا حتة جد
فاكر الصور اللى قولتلك انسخها في مجلد الصور في في مجلد استايلك

دلوقتي وقت اكواد css
عشان تظهر بالشكل المطلوب

تابع معايا هنقوم بكام خطوة للتجهيز اولا

تابع الصور
افتح متغيرات الاستايل
وتابع
http://img812.imageshack.us/img812/2525/93850105.jpg

خيارات css
http://img266.imageshack.us/img266/6695/61443456.jpg

الان في خيارات cssالاضافية اضف هذي الاكواد

تذكر انني اعمل ع الاستايل الافتراضي

عشان مسار الصور
كود PHP:

.login {
background:url(images/login.jpg) no-repeat;
float:right;
height:221px;
position:absolute;
right:0;
width:176px;
margin-top:210px;
z-index:9999;
}
.logo {
float:right;
left:auto;
right:0px;
position:absolute;
}
.log {
position:absolute;
top:102px;
right:1px;
color:#FFF;
margin-right:3px;
padding-right:1px;
padding-left:10px;
}
.bginput1 {
background:url(images/bginput.jpg) no-repeat top center;
height:37px;
width:157px;
font:12px Tahoma, Geneva, sans-serif;
text-align:center;
color:#6a5d44;
border:none;
}
.bginput2 {
background:url(images/bginput.jpg) no-repeat top center;
height:37px;
width:157px;
font:12px Tahoma, Geneva, sans-serif;
text-align:center;
color:#6a5d44;
border:none;
}
.button_l {
background:url(images/button.jpg) no-repeat top center;
height:34px;
width:102px;
border:none;
cursor:pointer;
}
.smallfont {
font:12px tahoma;

بالصور
http://img704.imageshack.us/img704/8...8201001242.jpg

لتصبح النتيجة النهائية كالاتي
وان شاء الله تكون مميزة واعجبتكم

اخواني شوف الصور

http://img208.imageshack.us/img208/8...8201001242.jpg

http://img714.imageshack.us/img714/7...8201001481.jpg

وفي النهاية ارجو ان اكون قد وفقت في الشرح
فان اصبت فتوفيق من الله
وان اخفقت فمن نفسى والشيطان

والسلام عليكم ورحمة الله

شكرواهدء خاص للاخوة
css/خادم الاسلام /قناص جوبا/فيروس خائف

</div></div></div>