منتديات تقنيات
يسعدنا تسجيلكم بالمنتدى اهلا بكم


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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

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

مُساهمة من طرف BAZOKA Libya في 11/10/16, 10:01 pm





  • [الموضوع] : اللون المفضل في بيانات العضو
  • [الوصف] : اضافة اللون المفضل في بيانات العضو لتظهر بياناته في المواضيع باللون الدي اختاره
  • [الإصدار] : 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>


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


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



BAZOKA Libya
عضو نشيط


الجنس : ذكر
عدد المساهمات : 57
التقييم : 30
تاريخ الميلاد : 14/01/1996
تاريخ التسجيل : 07/10/2016
العمر : 20
الموقع : ليبيا
العمل/الترفيه : Developper & Coder
المزاج : الحمد لله
اوسمتي : :1:0:0

معاينة صفحة البيانات الشخصي للعضو http://www.techno-livya.ga/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف JAR7 في 16/10/16, 08:29 am

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



JAR7
مؤسس المنتدى


الجنس : انثى
عدد المساهمات : 2200
التقييم : 290
تاريخ التسجيل : 05/01/2016
اوسمتي : :10:10:10

معاينة صفحة البيانات الشخصي للعضو http://www.t3qnyiat.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف BAZOKA Libya في 16/10/16, 06:52 pm

شكرا لك اختي جوري على المرور العطر 



BAZOKA Libya
عضو نشيط


الجنس : ذكر
عدد المساهمات : 57
التقييم : 30
تاريخ الميلاد : 14/01/1996
تاريخ التسجيل : 07/10/2016
العمر : 20
الموقع : ليبيا
العمل/الترفيه : Developper & Coder
المزاج : الحمد لله
اوسمتي : :1:0:0

معاينة صفحة البيانات الشخصي للعضو http://www.techno-livya.ga/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

إنشاء حساب أو تسجيل الدخول لتستطيع الرد

تحتاج إلى أن يكون عضوا لتستطيع الرد.

انشئ حساب

يمكنك الانضمام لمنتديات تقنيات فعملية التسجيل سهله !


انشاء حساب جديد

تسجيل الدخول

اذا كنت مسجل معنا فيمكنك الدخول بالضغط هنا


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى