ήsέť άήsάќ
27-03-2010, 12:48 مساءً
http://www.arabcine.com/up/images/gtr8ybiwdwk8os59no.gif
قالب register المطور بتقنية css
السلام عليكم ، اليوم جايب لكم شرح تغيير شكل قالب register عند تسجيل عضو جديد بتقنية Css
فكما تعلمون تقنية css تعطي جمالية لصفحاتك http://www.support-ar.com/vb/images/smilies/nosweat.gif فكلما استخدمنا أكواد css بدلا الصور كلما زادة سرعة تصفح الموقع أو المنتدى
لا أطيل عليكم ، الآن لنرى شكل قالب [ register ] بعد التعديل
http://www.arabcine.com/up/images/dod639knite1vyaqlsbe.jpg
معلومات القالب :
فقد قمت بالغاء الخصائص الاضافية : التوقيت و احالة الدعوة رغم أن هذه الخاصية لا يستعملها إلا %1 من الأعصاء الجدد، فاقتصرت فقط على الحقول المهمة : كـ الاسم + البريد الالكتروني و التحقق منه + كلمة المرور و التحقق منها + كود الاسئلة العشوائية .http://www.support-ar.com/vb/images/smilies/busted_red.gif
و الآن نأتي إلى الشرح :
من لوحة تحكم المدير - البحث في القوالب - نضع في نص البحث كلمة register ونختار الستايل المراد التعديل عليه
بعد البحث تجده في قوالب التسجيل
افتح القالب مع اخد نسخة احتياطية للقالب الرئيسي http://www.support-ar.com/vb/images/smilies/bye1.gif
استبدله بهذا القالب المعدل
$stylevar[htmldoctype][/
<html xmlns="XHTML namespace" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
$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 - <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">$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>
[B]الخطوة الثانية :
من خيارات الستايل - نحدد الستايل المراد التعديل عليه و نختار من القائمة [[B] Css رئيسي ] - انزل إلى تحت في مربع [ تعاريف CSS الإضافية/Additional CSS Definition ] + [ التحصص في هذا الستايل ] ليشمل فقط الستايل المحدد http://www.support-ar.com/vb/images/smilies/nosweat.gif
ضع هذا الكود في آخر السطر
/* ***** 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 ] بلون آخر من اختياره http://www.support-ar.com/vb/images/smilies/icon30.gif
قالب register المطور بتقنية css
السلام عليكم ، اليوم جايب لكم شرح تغيير شكل قالب register عند تسجيل عضو جديد بتقنية Css
فكما تعلمون تقنية css تعطي جمالية لصفحاتك http://www.support-ar.com/vb/images/smilies/nosweat.gif فكلما استخدمنا أكواد css بدلا الصور كلما زادة سرعة تصفح الموقع أو المنتدى
لا أطيل عليكم ، الآن لنرى شكل قالب [ register ] بعد التعديل
http://www.arabcine.com/up/images/dod639knite1vyaqlsbe.jpg
معلومات القالب :
فقد قمت بالغاء الخصائص الاضافية : التوقيت و احالة الدعوة رغم أن هذه الخاصية لا يستعملها إلا %1 من الأعصاء الجدد، فاقتصرت فقط على الحقول المهمة : كـ الاسم + البريد الالكتروني و التحقق منه + كلمة المرور و التحقق منها + كود الاسئلة العشوائية .http://www.support-ar.com/vb/images/smilies/busted_red.gif
و الآن نأتي إلى الشرح :
من لوحة تحكم المدير - البحث في القوالب - نضع في نص البحث كلمة register ونختار الستايل المراد التعديل عليه
بعد البحث تجده في قوالب التسجيل
افتح القالب مع اخد نسخة احتياطية للقالب الرئيسي http://www.support-ar.com/vb/images/smilies/bye1.gif
استبدله بهذا القالب المعدل
$stylevar[htmldoctype][/
<html xmlns="XHTML namespace" dir="$stylevar[textdirection]" lang="$stylevar[languagecode]">
<head>
$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 - <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">$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>
[B]الخطوة الثانية :
من خيارات الستايل - نحدد الستايل المراد التعديل عليه و نختار من القائمة [[B] Css رئيسي ] - انزل إلى تحت في مربع [ تعاريف CSS الإضافية/Additional CSS Definition ] + [ التحصص في هذا الستايل ] ليشمل فقط الستايل المحدد http://www.support-ar.com/vb/images/smilies/nosweat.gif
ضع هذا الكود في آخر السطر
/* ***** 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 ] بلون آخر من اختياره http://www.support-ar.com/vb/images/smilies/icon30.gif