أسرار التكنولوجيا

شاطر
استعرض الموضوع السابقاذهب الى الأسفلاستعرض الموضوع التالي
avatar
المديرة
عدد المساهمات : 73
سمعة العضو /ة : 1
تاريخ التسجيل : 23/06/2015
العمر : 17
الموقع : فلسطين
معاينة صفحة البيانات الشخصي للعضو

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

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


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

الأن لنبدأ لطريقة تركيب الكود
:
اولا : أحذفوا إي كود سابق للبيانات الشخصية سواء في اكواد الجافاسكربت أو اكواد 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:

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



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



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

في مربع البحث



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

سيظهر لنا هذا الكود


الكود:
   <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
       <!-- div class="online2"></div-->
       <dl>
          <dt>
             {postrow.displayed.POSTER_AVATAR}
             <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
          </dt>
          <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
          <dd><br /></dd>
          <dd>
             <!-- 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}
          </dd>
          <dd><br /></dd>
          <dd>
             {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
          </dd>
       </dl>
    </div>

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


الكود:
   <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
                          <div class="post"><span class="name"></span></div>
    <!-- div class="online2"></div-->
    <span class="postdetails poster-profile"><dl>
       <dt>

      
          {postrow.displayed.POSTER_AVATAR}
          <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
       </dt>
       <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>

      
                         <dd> <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}
       </dd></dl></span><dl>
       <br />
       <dd>
          {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
       </dd>

    </dl>
             </div>

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

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


 


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

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



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



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

في مربع البحث



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

سيظهر لنا هذا الكود
[/color]
[/color]
الكود:
   <dl class="postprofile-details postdetails">
                      <dt>
                         {postrow.displayed.POSTER_AVATAR}<br />
                         {postrow.displayed.POSTER_NAME}
                      </dt>
                      <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
                      <dd><br /></dd>
                      <dd>
                         <!-- 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}
                      </dd>
                   </dl>


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


الكود:

    <div class="post"><span class="name"></span></div><span class="postdetails poster-profile">
                   <dl class="postprofile-details postdetails">
                      <dt>
                         {postrow.displayed.POSTER_AVATAR}<br />
                         {postrow.displayed.POSTER_NAME}
                      </dt>
                      <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
                      
                      <dd><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}
                      </dd>
                   </dl></span>


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

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


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

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



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



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

في مربع البحث



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

سيظهر لنا هذا الكود


[/color][/color]
[/color][/color]
الكود:
   <div class="postbody"{postrow.displayed.THANK_BGCOLOR}>
       <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}
             <!-- 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>




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



الكود:

    <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 ونضغط بحث

سيظهر لنا هذا الكود

[/color][/color]
الكود:

    <!-- 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>



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

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

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





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

my signature
[th][/th]



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