اللون المفضل في البيانات الشخصية والمساهمات مثل منتديات الفي بي

  افضل المواضيع1




  • [الموضوع] : اللون المفضل في بيانات العضو
  • [الوصف] : اضافة اللون المفضل في بيانات العضو لتظهر بياناته في المواضيع باللون الدي اختاره
  • [الإصدار] : v2 - 27.01.2016
  • [النسخة] : الكود يعمل على جميع نسخ احلى منتدى
  • [المصمم] : الكود من تصميم وبرمجة هياء محمد




معلومات عن الكود 

يدعم اظافة اكثر من 500 لون 
يعمل على جميع النسخ 
اظافة المزيد من شكل البيانات
يمكن التحكم واظافة المزيد من الاشكال يدويا لمن لدية خبرة في css

مثال



نبدأ في تركيب الكود وارجوا ان تتبع الخطوات بشكل حرفي لأن اهمال إي خطوة يمنع الكود من العمل بشكل صحيح

طريقة التركيب 

بسم الله نبدأ 

اولا : أحذفوا إي كود سابق للبيانات الشخصية سواء في اكواد الجافاسكربت أو اكواد css
خطوة مهمة حتى يعمل الكود بشكل سليم 

ثانيا : من لوحة الادارة نتابع الصور



نضيف خيار جديد بالظغط على 

الخطوة هذي مهمة جدا جدا جدا ركزوا تمام عليها 



لاتظغطوا سجل انزلوا في الاسفل يوجد خيارات 



وإليكم جدول الألوان إي لون لايوجد في الجدول لاتستطيعون تركيبة 
اضغط هنا للذهاب إلى جدول الألوان
لكم الحرية في اختيار الألوان 



بعد وضع الألوان المرغوبة نظغط سجل 
ونتابع التركيب



الان نأتي للخطوة التي لاتقل اخمية عن غيرها 
لو تجاهلتم هذه الخطوة سوف تحدث مشاكل في تركيب الكود الرجاء تنفيذ الخطوة هذه 

نقوم بالتعديل على جميع الخيارات ( ما عدا الخيار الي اظفناه لونك المفضل )



ونظع لها لون 



ثم نغير الااعدادات الفارق 



ونتابع باقي خطوات التركيب 





نتأكد ان الجافاسكربت مفعله لدينا










الكود : قم مشكورا بوضع رد ليظهر لك الكود   



ملاحظة : في السطر الثاني من الكود
الكود:
<div class="colorsW">AA</div>

يوجد AA تشير إلى ظهور أسماء الالوان بهذا الشكل Alice blue في البيانات
عند تغيره إلى BB سوف تظهر اسماء الالوان هكذا #f0f8ff


باقي اخر خطوة في التركيب 
نتابع الشرح 









اختاروا الشكل الذي يناسبكم 



الكود

الكود:
[center]/*---------- www.haya-m.net -----------*/ [/center]
/*الشكل العام للبروفايل*/


[center]  border-style: solid;[/center]
.stylep .profile , .no-color .profile{

[center]  padding: 3px 3px 2px 3px;[/center]
  border-width: 0px 0px 1px 0px;
  font: 12px Tahoma;

[center]  border: 1px solid ;  }[/center]
  text-align: right;}
.pcolors{
  padding: 0px; 
.f {display: none; }

[center]/*لون البروفايل للذين لم يختاروا لونهم المفضل*/[/center]
.c-colors{color:  transparent;}
.profileback{text-align: center;}

.colorsh-no , .colorsf-no{

[center]  color: #2b2b2b;}[/center]
  background:#2b2b2b;}
no-color , .no-color .profile , .profile-{ 
  border-color: #2b2b2b;     
/*خصائص اخرى*/

[center]  content: "لوني المفضل :"; }[/center]
.colorsh:after , .colorsh-no:after {
  content: " بيانات اضافيه "; }
.colorsf:before , .colorsf-no:before{

[center]  text-align: center;}[/center]
.colorsh , .colorsf , .colorsh-no , .colorsf-no{
  padding: 1px;
  color: #fff;

[center]  font: 11px Tahoma;[/center]





الكود

الكود:
[center]/*---------- www.haya-m.net -----------*/ [/center]
/*الشكل العام للبروفايل*/


[center]  font: 11px Tahoma;[/center]
.stylep .profile , .no-color .profile{
  text-align: right;

[center]  border-bottom: 0px solid ;[/center]
  padding: 2px 2px;
  margin: 2px 0px;
  border-top: 0px solid ;

[center]  padding: 2px;  [/center]
  border-right: 3px solid ;
  border-left: 3px solid ;}
.pcolors{
  border: 1px solid ;  }

[center]/*لون البروفايل للذين لم يختاروا لونهم المفضل*/[/center]
.f {display: none; }
.c-colors{color:  transparent;}
.profileback{text-align: center;}


[center]  border-color: #2b2b2b;      [/center]
.colorsh-no , .colorsf-no{
  background:#2b2b2b;}
no-color , .no-color .profile , .profile-{ 
  color: #2b2b2b;}

[center].colorsf:before , .colorsf-no:before{[/center]
/*خصائص اخرى*/
.colorsh:after , .colorsh-no:after {
  content: " بيانات اضافيه [ + ] "; }
  content: "لوني المفضل :"; }

[center]  text-align: center;}[/center]
.colorsh , .colorsf , .colorsh-no , .colorsf-no{
  color: #fff;

[center]  font: 11px Tahoma;[/center]


اشكال أخرى 



كود الشكل اليمين

الكود:
[center]/*---------- www.haya-m.net -----------*/ [/center]
/*الشكل العام للبروفايل*/


[center]  background: none repeat scroll 0 0 #FFF;[/center]
.stylep .profile , .no-color .profile{

[center]  border-right: 6px solid ;[/center]
  border-bottom-left-radius: 8px;
  border-left: 1px solid ;

[center]  border-width: 1px 6px 1px 1px;[/center]
  border-style: solid;
  border-top-right-radius: 8px;
  font: 11px Tahoma;

[center]  padding: 0px;  [/center]
  margin: 5px 0;
  padding: 3px 5px;
  text-align: right;}
.pcolors{

[center]{display: none; }[/center]
  border: 0px solid ;  }
.f , .colorsh , .colorsf , .colorsh-no , .colorsf-no

[center]/*لون البروفايل للذين لم يختاروا لونهم المفضل*/[/center]
.c-colors{color:  transparent;}
.profileback{text-align: center;}



[center]  color: #2b2b2b;}[/center]
no-color , .no-color .profile , .profile-{ 

[center]  border-color: #2b2b2b;      [/center]


كود الشكل الوسط

الكود:
[center]/*---------- www.haya-m.net -----------*/ [/center]
/*الشكل العام للبروفايل*/


[center]  background: none repeat scroll 0 0 #FFF;[/center]
.stylep .profile , .no-color .profile{
  border-left: 4px solid ;

[center]  border-width: 1px 4px 1px 4px;[/center]
  border-right: 4px solid ;
  border-style: solid;
  font: 11px Tahoma;
  margin: 5px 0;

[center]  border: 0px solid ;  }[/center]
  padding: 3px 5px;
  text-align: right;}
.pcolors{
  padding: 0px; 

[center].profileback{text-align: center;}[/center]
.f , .colorsh , .colorsf , .colorsh-no , .colorsf-no
{display: none; }
.c-colors{color:  transparent;}


[center]  border-color: #2b2b2b;      [/center]
/*لون البروفايل للذين لم يختاروا لونهم المفضل*/

no-color , .no-color .profile , .profile-{ 

[center]  color: #2b2b2b;}[/center]


كود الشكل اليسار

الكود:
[center]/*---------- www.haya-m.net -----------*/ [/center]
/*الشكل العام للبروفايل*/


[center]  background: none repeat scroll 0 0 #FFF;[/center]
.stylep .profile , .no-color .profile{

[center]  font-family: "tahoma";[/center]
  border-bottom: 1px dotted #CCCCCC;
  border-right: 3px solid ;

[center]  padding: 2px;[/center]
  font-size: 11px;
  letter-spacing: 0;
  margin: 1px 1px 3px;

[center]  border: 0px solid ;  }[/center]
  vertical-align: middle;
  text-align: right;}
.pcolors{
  padding: 0px; 

[center].c-colors{color:  transparent;}[/center]
.f , .colorsh , .colorsf , .colorsh-no , .colorsf-no
{display: none; }
.profileback{text-align: center;}


[center]  color: #2b2b2b;}[/center]
/*لون البروفايل للذين لم يختاروا لونهم المفضل*/

no-color , .no-color .profile , .profile-{ 

[center]  border-color: #2b2b2b;      [/center]



انتهينا الآن من تركيب الكود لمن لديهم نسخة المنتدى phpbb2 
لمن نسخة منتداهم غير phpbb2 يكملوا الشرح في الاسفل 






الخطوة الأخيرة للنسحة phpbb3::

من لوحة الأدارة نذهب إلى 



ننزل أخر الصفحة 



نظغط تعديل  على قالب viewtopic_body

في مربع البحث 



نضع هذه الجملة في صندوق البحث BEGIN profile_field ونضغط بحث

سيظهر لنا هذا الكود 
الكود:
[center]<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">[/center]
<!-- div class="online2"></div-->
<dl>
<dt>

[center]<br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>[/center]
{postrow.displayed.POSTER_AVATAR}
</dt>

[center]<dd><br /></dd>[/center]
<dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
<dd>
<!-- BEGIN profile_field -->

[center]{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}[/center]
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</dd>
<dd><br /></dd>
<dd>

[center]</div>[/center]
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
</dd>

[center]</dl>[/center]


نحدفه ونستبدله بهاذا الكود
الكود:
[center]<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">[/center]
[center]                                <div class="post"><span class="name"></span></div>[/center]
<!-- div class="online2"></div-->
<span class="postdetails poster-profile"><dl>

[center]<br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>[/center]
<dt>


{postrow.displayed.POSTER_AVATAR}
</dt>

[center]                                <dd> <br /><br />[/center]
<dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>


<!-- BEGIN profile_field -->

[center]{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}[/center]
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</dd></dl></span><dl>
<br />
<dd>

[center]</div>[/center]
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
</dd>


[center]</dl>[/center]


ثم نسجل التعديلات وننشر القالب بالظغط على 

والحمدلله انتهينا 



الخطوة الأخيرة للنسحة Invision::

من لوحة الأدارة نذهب إلى 



ننزل أخر الصفحة 



نظغط تعديل  على قالب viewtopic_body

في مربع البحث 



نضع هذه الجملة في صندوق البحث BEGIN profile_field ونضغط بحث

سيظهر لنا هذا الكود 
الكود:
[center]<dl class="postprofile-details postdetails">[/center]
 <dt>

[center] {postrow.displayed.POSTER_NAME}[/center]
 {postrow.displayed.POSTER_AVATAR}<br />

[center] <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>[/center]
 </dt>
 <dd><br /></dd>
 <dd>

[center] {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}[/center]
 <!-- BEGIN profile_field -->
 <!-- END profile_field -->

[center] </dl>[/center]
 {postrow.displayed.POSTER_RPG}

[center] </dd>[/center]


نحذفه ونستبدله بهاذا الكود

الكود:
[center]<div class="post"><span class="name"></span></div><span class="postdetails poster-profile">[/center]
 <dl class="postprofile-details postdetails">
 <dt>

[center] <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>[/center]
 {postrow.displayed.POSTER_AVATAR}<br />
 {postrow.displayed.POSTER_NAME}
 </dt>
 

[center] {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}[/center]
 <dd><br /><br />
 <!-- BEGIN profile_field -->
 <!-- END profile_field -->

[center] </dl></span>[/center]
 {postrow.displayed.POSTER_RPG}

[center] </dd>[/center]

ثم نسجل التعديلات وننشر القالب بالظغط على 

والحمدلله انتهينا 


من لوحة الأدارة نذهب إلى 


ننزل أخر الصفحة 


نظغط تعديل  على قالب viewtopic_body

في مربع البحث 


نضع هذه الجملة في صندوق البحث BEGIN profile_field ونضغط بحث

سيظهر لنا هذا الكود 
الكود:
[center]<div class="postbody"{postrow.displayed.THANK_BGCOLOR}>[/center]
<div class="user">
<div class="user-ident">

[center]<h4 class="username">{postrow.displayed.POSTER_NAME}</h4>[/center]
<div class="user-basic-info">
{postrow.displayed.POSTER_AVATAR}<br />

[center]<div class="user-info">[/center]
{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
</div>
</div>
{postrow.displayed.ONLINE_IMG}

[center]{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}[/center]
<!-- BEGIN profile_field -->
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</div>

[center]</div>[/center]


نحذفه ونستبدله بهاذا الكود
الكود:
<div class="postbody"{postrow.displayed.THANK_BGCOLOR}>
                                      <div class="post">  <span class="name"></span></div><span class="postdetails poster-profile">
 <div class="user">
 <div class="user-ident">
 <h4 class="username">{postrow.displayed.POSTER_NAME}</h4>
 <div class="user-basic-info">
 {postrow.displayed.POSTER_AVATAR}<br />
 {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
 </div>
 </div>
 <div class="user-info">
 {postrow.displayed.ONLINE_IMG}<br /><br />
 <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
 {postrow.displayed.POSTER_RPG}
 </div>
 </div></span>


ثم نسجل التعديلات وننشر القالب بالظغط على 
والحمدلله انتهينا 



لمن قاموا بالتعديل على التومبيلات في نسخة phpbb2::
هذا الشرح لمن قاموا بالتعديل على التومبيلات في قالب viewtopic_body 
إذا عمل الكود معك بعد القيام بـ الخطوات السابقة فلا داعي لتطبيق هذه الخطوة 
اما إذا لم يعمل معك الكود يرجى اتباع هذه الخطوات 

من لوحة الأدارة نذهب إلى 


ننزل أخر الصفحة 


نظغط تعديل  على قالب viewtopic_body

في مربع البحث 


نضع هذه الجملة في صندوق البحث BEGIN profile_field ونضغط بحث

سيظهر لنا هذا الكود 
الكود:
<!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->

نحذفه ونستبدله بهاذا الكود
الكود:
 <span class="postdetails poster-profile"><br /><br />
                                <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
                                  </span>


ثم نسجل التعديلات وننشر القالب بالظغط على 
والحمدلله انتهينا 


واخير مبروك عليكم التركيب والكود 
وبأمكان العضو تغير لونه المفضل من بياناته الشخصية 


  افضل المواضيع2
نقل مميز يعطيك العافية على عطائك وفقك الله منور


m13
  افضل المواضيع3
شكرا لك اختي جوري على المرور العطر 


  افضل المواضيع4
الكود هذا كنت ابحث عنه ،
ششكرا
لكم كثيررا ،
المنتدى اكثر من راائع ^^
  افضل المواضيع5
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة 
إنـجاز أكثر رائــــــع 
لكن أرجو منكَ عدم التوقف عند هذا الحد 
مـنتظرين ابداعتــــــك 
دمتـ ودام تألقـك 
تحياتــي
لاتستطيع الرد على المواضيع في هذا المنتدى