مرحبا بكل اعضاء وزوار مرسى الفي بي /ترايدنت
الكرام اهلا ومرحبا بكم في درس متواضع بلغة css
لغة العصر
اليوم اقدم فكرة مميزة جدا في تغيير مكان تسجيل الدخول بالمنتدى
قام باستخدامها في استايلة الرمضاني الاخ المميزقناص جوبا والان نطرح لكم كيف تم عملها
لنبدأ ع البركة
الان لعبة الاكواد المفضلة لدي
استعد الان نقوم بالتعديل وكتابة الاكواد الخاصة وتعديل الناف بار .
نبدا اول قم بتغيير اسماء الصور كما بالشكل
نرجع للكود اللى اخدناه من النافبار في الفرونت بيج تيجي لصفحة التعليمات البرمجية
اللى هو بهذا الشكل
<
استبدل هذ القالب بهذا الكود المعدل
ليصبح الشكل النهائي للكود
خيارات css
الان في خيارات cssالاضافية اضف هذي الاكواد
تذكر انني اعمل ع الاستايل الافتراضي
عشان مسار الصور
بالصور
لتصبح النتيجة النهائية كالاتي
وان شاء الله تكون مميزة واعجبتكم
اخواني شوف الصور
وفي النهاية ارجو ان اكون قد وفقت في الشرح
فان اصبت فتوفيق من الله
وان اخفقت فمن نفسى والشيطان
والسلام عليكم ورحمة الله
شكر و اهدء خاص للاخوة
css/خادم الاسلام /قناص جوبا/فيروس خائف
الكرام اهلا ومرحبا بكم في درس متواضع بلغة css
لغة العصر
اليوم اقدم فكرة مميزة جدا في تغيير مكان تسجيل الدخول بالمنتدى
قام باستخدامها في استايلة الرمضاني الاخ المميزقناص جوبا والان نطرح لكم كيف تم عملها
لنبدأ ع البركة
1- قم باستخدام برنامج الفوتوشوب في تصميم شكل كالاتي وهو شكل بسيط كل حسب مايريد
طبعا الشكل تم تصميمة طبقا للاستايل الافتراضي
تابع معي
طبعا الشكل تم تصميمة طبقا للاستايل الافتراضي
تابع معي
2-صمم شكل مربع دخول كالاتي
وليكونا اثنين كهذا الشكل
3-صمم زر مكتو ب علية دخول الاعضاء او تسجيل او كما تريد وهذا مثال
وكل هذي اشكال بسيطة يمكن لمصصم ما تعديلها حسب استايلة او حسب ان يتم
والان دخلنا لللجد ركز معايا وهات دماغك وتعال معايا
دلوقتي هنعدل عكود الدخول في الناف بار
اول خطوة ادخل لوحة التحكم وهات الناف بار وتعال تابع الصورة
ودا الشكل العام للناف بار في الفرونت
قم بنسخ من اول الجزء المحدد في الصورة
اومن اول هذا الكود في السطر 22
لغاية السطر 68
او الكود
الموضح بالصورة
ليصبح بالشكل الاتي
وليكونا اثنين كهذا الشكل
3-صمم زر مكتو ب علية دخول الاعضاء او تسجيل او كما تريد وهذا مثال
وكل هذي اشكال بسيطة يمكن لمصصم ما تعديلها حسب استايلة او حسب ان يتم
والان دخلنا لللجد ركز معايا وهات دماغك وتعال معايا
دلوقتي هنعدل عكود الدخول في الناف بار
اول خطوة ادخل لوحة التحكم وهات الناف بار وتعال تابع الصورة
ودا الشكل العام للناف بار في الفرونت
قم بنسخ من اول الجزء المحدد في الصورة
اومن اول هذا الكود في السطر 22
رمز PHP:
<if condition="$show['member']">
او الكود
رمز PHP:
<!-- / login form -->
</td>
</if>
ليصبح بالشكل الاتي
الان لعبة الاكواد المفضلة لدي
استعد الان نقوم بالتعديل وكتابة الاكواد الخاصة وتعديل الناف بار .
نبدا اول قم بتغيير اسماء الصور كما بالشكل
نرجع للكود اللى اخدناه من النافبار في الفرونت بيج تيجي لصفحة التعليمات البرمجية
اللى هو بهذا الشكل
<
رمز PHP:
if condition="$show['member']">
<td class="alt2" nowrap="nowrap">
<div class="smallfont">
<strong><phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[welcome_x_link_y]</phrase></strong><br />
<phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase>
<if condition="$show['notifications']">
<div><span id="notifications"><a href="usercp.php$session[sessionurl_q]">$vbphrase[your_notifications]:</a> <strong>$notifications_total</strong></span></div>
<if condition="$show['popups']">
<script type="text/javascript"> vBmenu.register("notifications"); </script> <else />
<script type="text/javascript" src="clientscript/vbulletin_notifications_nopopups.js?v=$vboptions[simpleversion]"></script>
<script type="text/javascript"> vBulletin.register_control("vB_Notifications_NoPopups", "notifications"); </script>
</if>
<else /><if condition="$show['pmstats']">
<div><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></div>
</if></if>
<if condition="$show['pmwarning']"><div><strong><phrase 1="$vbphrase[pmpercent_nav_compiled]">$vbphrase[your_pm_box_is_x_full]</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[nopasswordempty])">
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
<tr>
<td class="smallfont" style="white-space: nowrap;"><label for="navbar_username">$vbphrase[username]</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[username]" onfocus="if (this.value == '$vbphrase[username]') 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[remember_me]</label></td>
</tr>
<tr>
<td class="smallfont"><label for="navbar_password">$vbphrase[password]</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[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td>
</tr>
</table>
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<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>
رمز PHP:
<if condition="$show['member']">
<div class="login">
<div class="log">
<div class="smallfont">
<strong><phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[welcome_x_link_y]</phrase></strong><br />
<phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase>
<if condition="$show['notifications']">
<div><span id="notifications"><a href="usercp.php$session[sessionurl_q]">$vbphrase[your_notifications]:</a> <strong>$notifications_total</strong></span></div>
<if condition="$show['popups']">
<script type="text/javascript"> vBmenu.register("notifications"); </script> <else />
<script type="text/javascript" src="clientscript/vbulletin_notifications_nopopups.js?v=$vboptions[simpleversion]"></script>
<script type="text/javascript"> vBulletin.register_control("vB_Notifications_NoPopups", "notifications"); </script>
</if>
<else /><if condition="$show['pmstats']">
<div><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></div>
</if></if>
<if condition="$show['pmwarning']"><div><strong><phrase 1="$vbphrase[pmpercent_nav_compiled]">$vbphrase[your_pm_box_is_x_full]</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[nopasswordempty])">
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
<table cellpadding="0" cellspacing="$stylevar[formspacer]" 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[username]" onfocus="if (this.value == '$vbphrase[username]') 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[enter_username_to_login_or_register]" 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[sessionhash]" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<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>
قم بنسخ الكود الى قالب الهيدر انسخة في اول الهيدر
والان ركز معايا حتة جد
فاكر الصور اللى قولتلك انسخها في مجلد الصور في في مجلد استايلك
دلوقتي وقت اكواد css
عشان تظهر بالشكل المطلوب
تابع معايا هنقوم بكام خطوة للتجهيز اولا
تابع الصور
افتح متغيرات الاستايل
وتابع
والان ركز معايا حتة جد
فاكر الصور اللى قولتلك انسخها في مجلد الصور في في مجلد استايلك
دلوقتي وقت اكواد 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/خادم الاسلام /قناص جوبا/فيروس خائف
Comments
Post a Comment