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

محروم.كوم · #1 08-19-2010, 05:30 PM

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

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

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

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

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

تابع معي

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

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

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

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

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

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

قم بنسخ من اول الجزء المحدد في الصورة

اومن اول هذا الكود في السطر 22
كود PHP:

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

الموضح بالصورة

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

<font face="Comic Sans MS"><font size="6"><font color="purple"><font size="4">
الان لعبة الاكواد المفضلة لدي
استعد الان نقوم بالتعديل وكتابة الاكواد الخاصة وتعديل الناف بار .
نبدا اول قم بتغيير اسماء الصور كما بالشكل

نرجع للكود اللى اخدناه من النافبار في الفرونت بيج تيجي لصفحة التعليمات البرمجية
<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>ليصبح الشكل النهائي للكود

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

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

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

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

تابع الصور
افتح متغيرات الاستايل
وتابع

خيارات css

الان في خيارات 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;

بالصور

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

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

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

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

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

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