شبكة همس الشوق - عرض مشاركة واحدة

#1 21 - 10 - 2023, 01:48 PM

قالب تغيير شكل التسجيل بشكل روعهـ

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

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

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

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

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

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

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

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

كود:



$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[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" >&nbsp; $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>

الخطوة الثانية :
من خيارات الستايل - نحدد الستايل المراد التعديل عليه و نختار من القائمة [ 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 ] المطور

و ان شاءالله يعجبكم

جميع الحقوق محفوظة

THE SN!PER
TRAIDNT

الموضوع الأصلي :‎ قالب تغيير شكل التسجيل بشكل روعه || الكاتب : || المصدر : شبكة همس الشوق