المساعد الشخصي الرقمي

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



admin
10-30-2013, بتوقيت غرينيتش 09:48 PM
http://www.dzbatna.com/images/icons/icon26.gif (ط¯ط±ط³) ط´ط±ط* طھط؛ظٹظٹط± ظ…ظƒط§ظ† طھط³ط¬ظٹظ„ ط§ظ„ط¯ط®ظˆظ„ ظˆط§ظ„ط±ط³ط§ط¦ظ„ ط§ظ„ط®ط§طµط© ط¨ط´ظƒظ„ ظ…ظ…ظٹط² ط¨ظ„ط؛ط© css (http://www.dzbatna.com/t1647404/)





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

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

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

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


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


http://img299.imageshack.us/img299/4114/3fk6is84urxx.jpg

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

تابع معي


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


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

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

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

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

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


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

<code style="white-space:nowrap"> <code> <if condition="$show&#91;'member'&#93;">
</code> </code>

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

<code style="white-space:nowrap"> <code> <!-- / login form -->
</td>



</if>
</code> </code>

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


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

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





الان لعبة الاكواد المفضلة لدي
استعد الان نقوم بالتعديل وكتابة الاكواد الخاصة وتعديل الناف بار .
نبدا اول قم بتغيير اسماء الصور كما بالشكل
http://img709.imageshack.us/img709/1883/222qg.jpg


نرجع للكود code اللى اخدناه من النافبار في الفرونت بيج تيجي لصفحة التعليمات البرمجية
اللى هو بهذا الشكل
< رمز PHP:

<code style="white-space:nowrap"> <code> if condition="$show&#91;'member'&#93;">
<td class="alt2" nowrap="nowrap">
<div class="smallfont">
<strong><phrase 1="$bbuserinfo&#91;username&#93;" 2="member.php?$session&#91;sessionurl&#93;u=$bbuserinfo&#91;useri d&#93;">$vbphrase&#91;welcome_x_link_y&#93;</phrase></strong><br />
<phrase 1="$pmbox&#91;lastvisitdate&#93;" 2="$pmbox&#91;lastvisittime&#93;">$vbphrase&#91;last_visited_x_at_y&#93;</phrase>

<if condition="$show&#91;'notifications'&#93;">
<div><span id="notifications"><a href="usercp.php$session&#91;sessionurl_q&#93;">$vbphrase&#91;your_notifications&#93;:</a> <strong>$notifications_total</strong></span></div>
<if condition="$show&#91;'popups'&#93;">
<script type="text/javascript"> في بي vBmenu.register("notifications"); </script>
<else />
<script type="text/javascript" src="clientscript/vbulletin_notifications_nopopups.js?v=$vboptions&#91;s impleversion&#93;"></script>
<script type="text/javascript"> فيبويلتن في بي vBulletin.register_control("في بي vB_Notifications_NoPopups", "notifications"); </script>
</if>
<else /><if condition="$show&#91;'pmstats'&#93;">
<div><phrase 1="$vbphrase&#91;unread_x_nav_compiled&#93;" 2="$vbphrase&#91;total_x_nav_compiled&#93;" 3="$session&#91;sessionurl_q&#93;">$vbphrase&#91;private_messages_nav&#93;</phrase></div>
</if></if>

<if condition="$show&#91;'pmwarning'&#93;"><div><strong><phrase 1="$vbphrase&#91;pmpercent_nav_compiled&#93;">$vbphrase&#91;your_pm_box_is_x_full&#93;</phrase></strong></div></if>
</div>
</td>
<else />
<td class="alt2" nowrap="nowrap" style="padding:0px">
<!-- login form -->
<form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show&#91;nopasswordempty&#93;)">
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions&#91;simpleversion&#93;"></script>
<table cellpadding="0" cellspacing="$stylevar&#91;formspacer&#93;" border="0">
<tr>
<td class="smallfont" style="white-space: nowrap;"><label for="navbar_username">$vbphrase&#91;username&#93;</label></td>
<td><input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase&#91;username&#93;" onfocus="if (this.value == '$vbphrase&#91;username&#93;') this.value = '';" /></td>
<td class="smallfont" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />$vbphrase&#91;remember_me&#93;</label></td>
</tr>
<tr>
<td class="smallfont"><label for="navbar_password">$vbphrase&#91;password&#93;</label></td>
<td><input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" tabindex="102" /></td>
<td><input type="submit" class="button" value="$vbphrase&#91;log_in&#93;" tabindex="104" title="$vbphrase&#91;enter_username_to_login_or_register&#93;" accesskey="s" /></td>
</tr>
</table>
<input type="hidden" name="s" value="$session&#91;sessionhash&#93;" />
<input type="hidden" name="securitytoken" value="$bbuserinfo&#91;securitytoken&#93;" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
</form>
<!-- / login form -->
</td>
</if>
</code> </code>

استبدل هذ القالب template بهذا الكود code المعدل
رمز PHP:

<code style="white-space:nowrap"> <code> <if condition="$show&#91;'member'&#93;">
<div class="login">
<div class="log">
<div class="smallfont">
<strong><phrase 1="$bbuserinfo&#91;username&#93;" 2="member.php?$session&#91;sessionurl&#93;u=$bbuserinfo&#91;useri d&#93;">$vbphrase&#91;welcome_x_link_y&#93;</phrase></strong><br />
<phrase 1="$pmbox&#91;lastvisitdate&#93;" 2="$pmbox&#91;lastvisittime&#93;">$vbphrase&#91;last_visited_x_at_y&#93;</phrase>

<if condition="$show&#91;'notifications'&#93;">
<div><span id="notifications"><a href="usercp.php$session&#91;sessionurl_q&#93;">$vbphrase&#91;your_notifications&#93;:</a> <strong>$notifications_total</strong></span></div>
<if condition="$show&#91;'popups'&#93;">
<script type="text/javascript"> في بي vBmenu.register("notifications"); </script>
<else />
<script type="text/javascript" src="clientscript/vbulletin_notifications_nopopups.js?v=$vboptions&#91;s impleversion&#93;"></script>
<script type="text/javascript"> فيبويلتن في بي vBulletin.register_control("في بي vB_Notifications_NoPopups", "notifications"); </script>
</if>
<else /><if condition="$show&#91;'pmstats'&#93;">
<div><phrase 1="$vbphrase&#91;unread_x_nav_compiled&#93;" 2="$vbphrase&#91;total_x_nav_compiled&#93;" 3="$session&#91;sessionurl_q&#93;">$vbphrase&#91;private_messages_nav&#93;</phrase></div>
</if></if>

<if condition="$show&#91;'pmwarning'&#93;"><div><strong><phrase 1="$vbphrase&#91;pmpercent_nav_compiled&#93;">$vbphrase&#91;your_pm_box_is_x_full&#93;</phrase></strong></div></if>
</div>
</div>
</div>

<else />

<div class="login">
<div class="log">
<!-- login form -->
<form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show&#91;nopasswordempty&#93;)">
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions&#91;simpleversion&#93;"></script>
<table cellpadding="0" cellspacing="$stylevar&#91;formspacer&#93;" border="0">
<tr>
<td><input type="text" class="bginput1" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase&#91;username&#93;" onfocus="if (this.value == '$vbphrase&#91;username&#93;') this.value = '';" /></td>
</tr>
<tr>
<td><input type="password" class="bginput2" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" tabindex="102" /></td>
</tr>
<tr>
<td class="smallfont" nowrap="nowrap">
<input style="vertical-align:middle;" type="submit" class="button_l" value="" tabindex="104" title="$vbphrase&#91;enter_username_to_login_or_register&#93;" accesskey="s" />
<input style="vertical-align:middle;" type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" /></td>
</tr>
</table>
<input type="hidden" name="s" value="$session&#91;sessionhash&#93;" />
<input type="hidden" name="securitytoken" value="$bbuserinfo&#91;securitytoken&#93;" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
</form>
<!-- / login form -->

</div>
</div>

</if>
</code> </code>

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


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

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

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

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

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



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


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

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

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

<code style="white-space:nowrap"> <code> .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;
</code> </code>



بالصور
http://img704.imageshack.us/img704/8531/screenshot1908201401242.jpg



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

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


http://img208.imageshack.us/img208/8531/screenshot1908201401242.jpg

http://img714.imageshack.us/img714/7060/screenshot1908201401481.jpg

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

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

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









ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)



https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©

استعمل مربع البحث في الاسفل لمزيد من المواضيع


سريع للبحث عن مواضيع في المنتدى