قالب register المطور بتقنية css

iToub · 2 فبراير 2010

السلام عليكم ، اليوم جايب لكم شرح تغيير شكل قالب register عند تسجيل عضو جديد بتقنية Css

فكما تعلمون تقنية css تعطي جمالية لصفحاتك

فكلما استخدمنا أكواد css بدلا الصور كلما زادة سرعة تصفح الموقع أو المنتدى

لا أطيل عليكم ، الآن لنرى شكل قالب [ register ] بعد التعديل

معلومات القالب :
فقد قمت بالغاء الخصائص الاضافية : التوقيت و احالة الدعوة رغم أن هذه الخاصية لا يستعملها إلا %1 من الأعصاء الجدد، فاقتصرت فقط على الحقول المهمة : كـ الاسم + البريد الالكتروني و التحقق منه + كلمة المرور و التحقق منها + كود الاسئلة العشوائية .:busted_red:

و الآن نأتي إلى الشرح :

من لوحة تحكم المدير - البحث في القوالب - نضع في نص البحث كلمة register ونختار الستايل المراد التعديل عليه
بعد البحث تجده في قوالب التسجيل
افتح القالب مع اخد نسخة احتياطية للقالب الرئيسي

استبدله بهذا القالب المعدل :

كود:

[CENTER]$stylevar[htmldoctype][/
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">[/CENTER]
 
[CENTER]<head>[/CENTER]
 
[CENTER]$headinclude
<style type="text/css">
/* ***** red and green boxes for username verification used during registration ***** */
.greenbox { border: 1px solid #337733; background: #bbffbb; color: #337733; padding: 3px; }
.redbox { border:1px solid #773333; background: #ffbbbb; color: #773333; padding: 3px; }
p
{
font: bold 12pt arial;
}
</style>
<title>$vboptions[bbtitle] - <if condition="$show['coppa']">$vbphrase[coppa] </if>$vbphrase[registration]</title>
</head>
<body>
$header
<br />
<if condition="$show['coppa']">
<div>$vbphrase[until_receive_signed_form]</div>
</if>
<if condition="$show['errors']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="tcat">$vbphrase[errors_occurred_during_registration]</td>
</tr>
<tr>
<td class="alt1"><ul>$errorlist</ul></td>
</tr>
</table>
<br />
</if>
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
<script type="text/javascript">
function verify_passwords(password1, password2)
{
// do various checks, this will save people noticing mistakes on next page
if (password1.value == '' || password2.value == '')
{
alert('$vbphrase[fill_out_both_password_fields]');
return false;
}
else if (password1.value != password2.value)
{
alert('$vbphrase[entered_passwords_do_not_match]');
return false;
}
else
{
<if condition="$show['coppa']">
pass_copy = password1.value;
passconfirm_copy = password2.value;
</if>
var junk_output;
md5hash(password1, document.forms.register.password_md5, junk_output, $show[nopasswordempty]);
md5hash(password2, document.forms.register.passwordconfirm_md5, junk_output, $show[nopasswordempty]);
<if condition="$show['coppa']">
document.forms.register.password.value = pass_copy;
document.forms.register.passwordconfirm.value = passconfirm_copy;
</if>
return true;
}
return false;
}
</script>
<form action="register.php?do=addmember" name="register" method="post" onsubmit="return verify_passwords(password, passwordconfirm);">
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" />
<input type="hidden" name="do" value="addmember" />
<input type="hidden" name="url" value="$url" />
<input type="hidden" name="agree" value="$agree" />
<input type="hidden" name="password_md5" />
<input type="hidden" name="passwordconfirm_md5" />
<if condition="!$show['birthday']">
<input type="hidden" name="day" value="$day" />
<input type="hidden" name="month" value="$month" />
<input type="hidden" name="year" value="$year" />
</if>
<if condition="$show['coppa']">
<input type="hidden" name="coppauser" value="1" />
</if>
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="panelsurround" align="center">
<div class="panel">
<div style="width:$stylevar[formwidth]" align="$stylevar[left]">
<table width="100%" class="smallfont" id="table12">
<tr>
<td class="forumbit" ><div class="smallfont"><phrase 1="$vboptions[bbtitle]">$vbphrase[register_at_x]</phrase></div></td>
</tr>
</table>
<table width="100%" class="smallfont" id="table13">
<tr>
<td class="forumbit" ><div class="smallfont">
<div class="smallfont" style="margin-bottom:$stylevar[formspacer]px">
 <phrase 1="$vboptions[bbtitle]">$vbphrase[to_post_must_first_register]</phrase>
</div>
<div class="smallfont" style="margin-bottom:$stylevar[formspacer]px">
 <strong>$vbphrase[username]</strong>:<br />
 <input class="bginput" id="regusername0" type="text" name="username0" size="50" maxlength="$vboptions[maxuserlength]" value="$username" /><img src="$vboptions[cleargifurl]" id="reg_verif_image0" onclick="return toggle_collapse('dialog_box')" style="display:none;" alt="" />
 <div id="collapseobj_dialog_box0">
  <div id="reg_verif_div0" style="display:none;"></div></div>
 <script type="text/javascript" src="clientscript/vbulletin_ajax_nameverif.js?v=$vboptions[simpleversion]"></script>
 <script type="text/javascript">
 <!--
 regname_verif = new vB_AJAX_NameVerify('regname_verif', 'regusername');
 //-->
 </script>
</div>
</div></td>
</tr>
</table>
 <table width="100%" class="smallfont" id="table14">
<tr>
<td class="forumbit" width="179" ><div class="smallfont">$vbphrase[email_address]</div></td>
<td class="forumbit" width="295" >$vbphrase[email_address]:<br />
   <input type="text" class="bginput" name="email0" size="25" maxlength="50" value="$email" dir="ltr" />
  </td>
<td class="forumbit" width="267" >$vbphrase[confirm_email_address]:<br />
   <input type="text" class="bginput" name="emailconfirm0" size="25" maxlength="50" value="$emailconfirm" dir="ltr" />
  </td>
</tr>
<tr>
<td class="forumbit" width="179" >$vbphrase[password]</td>
<td class="forumbit" width="294" >$vbphrase[password]:<br />
   <input type="password" class="bginput" name="password0" size="25" maxlength="50" value="$password" />
  </td>
<td class="forumbit" width="266" >$vbphrase[confirm_password]:<br />
   <input type="password" class="bginput" name="passwordconfirm0" size="25" maxlength="50" value="$passwordconfirm" />
  </td>
</tr>
<tr>
<td class="forumbit" width="739" colspan="3" >  $human_verify
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<br />
<if condition="$show['customfields_profile']">
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="thead">$vbphrase[additional_required_information_profile]</td>
</tr>
<tr>
<td class="panelsurround" align="center">
<div class="panel">
<div style="width:$stylevar[formwidth]" align="$stylevar[left]">
$customfields_profile
<if condition="$show['birthday']">$birthdayfields</if>
</div>
</div>
</td>
</tr>
</table>
<br />
</if>
<if condition="$show['customfields_option']">
<br />
</if>
<p align="center">
<input type="submit" class="button" value="$vbphrase[complete_registration]" accesskey="s" />
<input type="reset" class="button" name="Reset" value="$vbphrase[reset_fields]" />
</p>
</form>
$footer
</body>
</html>

[/CENTER]

الخطوة الثانية :

من خيارات الستايل - نحدد الستايل المراد التعديل عليه و نختار من القائمة [ Css رئيسي ] - انزل إلى تحت في مربع [ تعاريف CSS الإضافية/Additional CSS Definition ] + [ التحصص في هذا الستايل ] ليشمل فقط الستايل المحدد

ضع هذا الكود في آخر السطر :

كود:

/* ***** Borders in forumhome By HIMO ***** */
.forumbit {
border-top: 1px solid #DBDBDB;
border-bottom: 1px solid #DBDBDB;
border-left: 1px solid #DBDBDB;
border-right: 4px solid #B6B7F7;
}

ولمن أراد تغيير اللون الأحمر ما عليه إلا تغيير الكود [ #B6B7F7 ] بلون آخر من اختياره

كلمة أخيرة :

إلى هنا نكون قد انهينا تركيب قالب [ register ] المطور و إلى درس آخر بحول الله - تحياتي

المصدر: منتدى عرب سين للأفلام

جان كوباني · 3 فبراير 2010

ألف شكر لك

iToub · 12 فبراير 2010

جان كوباني قال:
ألف شكر لك

العفو أخي نورت صفحتي

MR!HACKER · 24 فبراير 2010

الله يعطيك العافية وما قصرت يالغالي تسلم يمنأك

egyguitar.com · 18 أبريل 2010

قالب رائع بجد

MaNsEy · 8 مايو 2010

تسلم ايدك يا جميل

iToub · 26 ديسمبر 2010

العفو اخواني و مشكورين [ع] المرور

قالب register المطور بتقنية css

iToub

عضو جديد

جان كوباني

عضو جديد

iToub

عضو جديد

MR!HACKER

عضو جديد

egyguitar.com

عضو جديد

MaNsEy

عضو جديد

iToub

عضو جديد