منتدى استراحات زايد

منتدى استراحات زايد (http://vb.ma7room.com/index.php)
-   منتدى أخبار المواقع والمنتديات العربية والأجنبية (http://vb.ma7room.com/forumdisplay.php?f=183)
-   -   (درس) شرح تغيير مكان تسجيل الدخول والرسائل الخاصة بشكل مميز بلغة css (http://vb.ma7room.com/showthread.php?t=485550)

محروم.كوم 08-19-2010 05:30 PM

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

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

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

الكرام
اهلا ومرحبا بكم في درس متواضع بلغة css
لغة العصر

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

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

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

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

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

تابع معي

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


وليكونا اثنين كهذا الشكل
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

<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>


الساعة الآن 04:36 AM

Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.5.2 TranZ By Almuhajir


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227