![]() |
(درس) شرح تغيير مكان تسجيل الدخول والرسائل الخاصة بشكل مميز بلغة css http://arkbmana.info/up/upfiles/zs557218.gif مرحبا بكل اعضاء وزوار مرسى الفي بي /ترايدنت /لينكات الكرام اهلا ومرحبا بكم في درس متواضع بلغة css لغة العصر اليوم اقدم فكرة مميزة جدا في تغيير مكان تسجيل الدخول بالمنتدى قام باستخدامها في استايلة الرمضاني الاخ المميزقناص جوبا والان نطرح لكم كيف تم عملها لنبدأ ع البركة 1- قم باستخدام برنامج الفوتوشوب في تصميم شكل كالاتي وهو شكل بسيط كل حسب مايريد <font face="Comic Sans MS"><font size="6"><font color="purple"><font size="4">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://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 الان لعبة الاكواد المفضلة لدي استعد الان نقوم بالتعديل وكتابة الاكواد الخاصة وتعديل الناف بار . نبدا اول قم بتغيير اسماء الصور كما بالشكل 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> |
الساعة الآن 04:36 AM |
Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.5.2 TranZ By
Almuhajir