كود جافا و css للون المفضل في البيانات الشخصية .

السلام عليكم ورحمة الله وبركاته
كيف حالكم ؟؟؟
ان شاء الله بخير ...
اليوم حطيت اول كود في هذه العطلة وهو :
اللون المفضل في البيانات الشخصية .
نبدأ أولا بالمعاينة


هذه الصورة تحوي ثلاث أشكال مختلفة

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

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





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

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


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



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



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



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

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



ونضع لها لون



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



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





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









الكود :

الكود:


    var copyright ="www.haya-m.net - Haya @ Rights Reserved";
    $(document).ready(function() {$('title').before('<div class="colorsW">AA</div>');});
    var enkripsi="'1Aqapkrv'02qpa'1F'00jvvrq'1C--fn,fpmr`mzwqgpamlvglv,amo-w-46505614-J-hq-rpmdkng/amnmpq/lgu/dkng,hq'00'02v{rg'1F'00vgzv-hctcqapkrv'00'1G'1A-qapkrv'1G"; teks=""; teksasli="";var panjang;panjang=enkripsi.length;for (i=0;i<panjang;i++){ teks+=String.fromCharCode(enkripsi.charCodeAt(i)^2) }teksasli=unescape(teks);document.write(teksasli);
    /**
     * profile colors
     * http://www.haya-m.net/
     *
     * Copyright (C) 27.01.2016, Haya Mohammed (haya.123.st)
     *
     * @author Haya Mohammed
     * @version 2.0
     * @Date 27.01.2016
     */


ملاحظة : في السطر الثاني من الكود

الكود:

   <div class="colorsW">AA</div>

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


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









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



الكود

الكود:

  /*---------- www.haya-m.net -----------*/
    /*الشكل العام للبروفايل*/

    .stylep .profile , .no-color .profile{
      border-style: solid;
      border-width: 0px 0px 1px 0px;
      font: 12px Tahoma;
      padding: 3px 3px 2px 3px;
      text-align: right;}
    .pcolors{
      padding: 0px;  
      border: 1px solid ;  }
    .f {display: none; }
    .c-colors{color:  transparent;}
    .profileback{text-align: center;}

    /*لون البروفايل للذين لم يختاروا لونهم المفضل*/
    .colorsh-no , .colorsf-no{
      background:#2b2b2b;}
    no-color , .no-color .profile , .profile-{  
      border-color: #2b2b2b;      
      color: #2b2b2b;}
    /*خصائص اخرى*/
    .colorsh:after , .colorsh-no:after {
      content: " بيانات اضافيه "; }
    .colorsf:before , .colorsf-no:before{
      content: "لوني المفضل :"; }
    .colorsh , .colorsf , .colorsh-no , .colorsf-no{
      padding: 1px;
      color: #fff;
      font: 11px Tahoma;
      text-align: center;}

الكود

الكود:

   /*---------- www.haya-m.net -----------*/
    /*الشكل العام للبروفايل*/

    .stylep .profile , .no-color .profile{
      font: 11px Tahoma;
      text-align: right;
      padding: 2px 2px;
      margin: 2px 0px;
      border-top: 0px solid ;
      border-bottom: 0px solid ;
      border-right: 3px solid ;
      border-left: 3px solid ;}
    .pcolors{
      padding: 2px;  
      border: 1px solid ;  }
    .f {display: none; }
    .c-colors{color:  transparent;}
    .profileback{text-align: center;}

    /*لون البروفايل للذين لم يختاروا لونهم المفضل*/
    .colorsh-no , .colorsf-no{
      background:#2b2b2b;}
    no-color , .no-color .profile , .profile-{  
      border-color: #2b2b2b;      
      color: #2b2b2b;}
    /*خصائص اخرى*/
    .colorsh:after , .colorsh-no:after {
      content: " بيانات اضافيه [ + ] "; }
    .colorsf:before , .colorsf-no:before{
      content: "لوني المفضل :"; }
    .colorsh , .colorsf , .colorsh-no , .colorsf-no{
      color: #fff;
      font: 11px Tahoma;
      text-align: center;}

اشكال أخرى



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

الكود:

   /*---------- www.haya-m.net -----------*/
    /*الشكل العام للبروفايل*/

    .stylep .profile , .no-color .profile{
      background: none repeat scroll 0 0 #FFF;
      border-bottom-left-radius: 8px;
      border-left: 1px solid ;
      border-right: 6px solid ;
      border-style: solid;
      border-top-right-radius: 8px;
      border-width: 1px 6px 1px 1px;
      font: 11px Tahoma;
      margin: 5px 0;
      padding: 3px 5px;
      text-align: right;}
    .pcolors{
      padding: 0px;  
      border: 0px solid ;  }
    .f , .colorsh , .colorsf , .colorsh-no , .colorsf-no
    {display: none; }
    .c-colors{color:  transparent;}
    .profileback{text-align: center;}

    /*لون البروفايل للذين لم يختاروا لونهم المفضل*/

    no-color , .no-color .profile , .profile-{  
      border-color: #2b2b2b;      
      color: #2b2b2b;}

الشكل الأوسط

الكود:

   /*---------- www.haya-m.net -----------*/
    /*الشكل العام للبروفايل*/

    .stylep .profile , .no-color .profile{
      background: none repeat scroll 0 0 #FFF;
      border-left: 4px solid ;
      border-right: 4px solid ;
      border-style: solid;
      border-width: 1px 4px 1px 4px;
      font: 11px Tahoma;
      margin: 5px 0;
      padding: 3px 5px;
      text-align: right;}
    .pcolors{
      padding: 0px;  
      border: 0px solid ;  }
    .f , .colorsh , .colorsf , .colorsh-no , .colorsf-no
    {display: none; }
    .c-colors{color:  transparent;}
    .profileback{text-align: center;}

    /*لون البروفايل للذين لم يختاروا لونهم المفضل*/

    no-color , .no-color .profile , .profile-{  
      border-color: #2b2b2b;      
      color: #2b2b2b;}

الشكل اليسار

الكود:

   /*---------- www.haya-m.net -----------*/
    /*الشكل العام للبروفايل*/

    .stylep .profile , .no-color .profile{
      background: none repeat scroll 0 0 #FFF;
      border-bottom: 1px dotted #CCCCCC;
      border-right: 3px solid ;
      font-family: "tahoma";
      font-size: 11px;
      letter-spacing: 0;
      margin: 1px 1px 3px;
      padding: 2px;
      vertical-align: middle;
      text-align: right;}
    .pcolors{
      padding: 0px;  
      border: 0px solid ;  }
    .f , .colorsh , .colorsf , .colorsh-no , .colorsf-no
    {display: none; }
    .c-colors{color:  transparent;}
    .profileback{text-align: center;}

    /*لون البروفايل للذين لم يختاروا لونهم المفضل*/

    no-color , .no-color .profile , .profile-{  
      border-color: #2b2b2b;      
      color: #2b2b2b;}

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

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

   

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

   

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

   

لمن قاموا بالتعديل على التومبيلات في نسخة phpbb2:

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




اذا حدث اي عطل راسلوني
منقول من هياء
الى اللقاء