كود لون البيانات الشخصية خاص للذكر وخاص للأنثى + لوني المفضل

اذهب الى الأسفل

كود لون البيانات الشخصية خاص للذكر وخاص للأنثى + لوني المفضل Empty كود لون البيانات الشخصية خاص للذكر وخاص للأنثى + لوني المفضل

مُساهمة من طرف نوار2000 الإثنين 28 يونيو 2021 - 4:36

السلام عليكم ورحمة الله وبركاته
كود لون البيانات الشخصية خاص للذكر وخاص للأنثى + لوني المفضل
صور
كود لون البيانات الشخصية خاص للذكر وخاص للأنثى + لوني المفضل Ocia_a18كود لون البيانات الشخصية خاص للذكر وخاص للأنثى + لوني المفضل Ocia_a17
لازم تتبع الخطوات يالشكل الصحيح حتى يعمل الكود جيدا
اول شيء احذفو اي كود سابق يخص البيانات الشخصية حتى لا يحصل ارتباك مع الكود الجديد

ثاني شيء اذهب الى لوحة الادارة > الأعضاء & المجموعات > البيانات الشخصية
واضغط تعديل الجنس :manage: وضع الاختيارات كما في الصورة
كود لون البيانات الشخصية خاص للذكر وخاص للأنثى + لوني المفضل Ocia_a12
كود لون البيانات الشخصية خاص للذكر وخاص للأنثى + لوني المفضل Ociaa_10

الان نأتي للاكواد
النسخه الثانيه
اضغط هنا للنسخه الثانيه:


بالنسبه للنسخه الثانيه ااذهب الى قالب المواضيع وابحث عن الكود التالي
الكود:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
 <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
 <span class="postdetails poster-profile">
 {postrow.displayed.POSTER_RANK}<br />
 {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<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}
 </span><br />
 <img src="https://2img.net/i/empty.gif" alt="" style="width:150px;height:1px" />
 </td>
احذفه وضع مكانه التالي
الكود:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                   <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
            <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
 <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
 <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><div class="namee"><strong>{postrow.displayed.POSTER_NAME}</strong></div></span>
 <span class="postdetails poster-profile">
 <div class="ranke">{postrow.displayed.POSTER_RANK}</div>
 <div class="avatare">{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}</div><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}
 </span><br />
 <img src="https://2img.net/i/empty.gif" alt="" style="width:150px;height:1px" />
                          </div>
                       </div>
                  </td>
وضع الكود التالي داخل الجفا مع اختيار المواضيع
الكود:
$(function() {
  
   //Indicate here the version of your forum.
   var version = "phpBB2";
  
   if(version.toLowerCase() == "phpbb2"){  
      $(".postprofile img[title='شفاف']").closest('.postprofile').addClass("شفاف");
      $(".postprofile img[title='ازرق']").closest('.postprofile').addClass("ازرق");
      $(".postprofile img[title='رمادي']").closest('.postprofile').addClass("رمادي");
      $(".postprofile img[title='اخضر']").closest('.postprofile').addClass("اخضر");
      $(".postprofile img[title='اصفر']").closest('.postprofile').addClass("اصفر");
      $(".postprofile img[title='بنفسجي']").closest('.postprofile').addClass("بنفسجي");
       $(".postprofile img[title='ذكر']").closest('.postprofile').addClass("ذكر");
      $(".postprofile img[title='انثى']").closest('.postprofile').addClass("انثى");
   }
});

واخيرا ضع التالي بالcss
الكود:

.ازرق {
    background: #f6f6f6!important;
    border-bottom: 16px solid #3e459c!important;
    border-left: 2px dotted #3e459c!important;
    border-radius: 3px!important;
    border-right: 2px dotted #3e459c!important;
    border-top: 16px solid #3e459c!important;
    padding: 60px 3px 3px!important;
    position: relative!important;
}
.رمادي {
    background: #f6f6f6!important;
    border-bottom: 16px solid #ee314e!important;
    border-left: 2px dotted #ee314e!important;
    border-radius: 3px!important;
    border-right: 2px dotted #ee314e!important;
    border-top: 16px solid #ee314e!important;
    padding: 60px 3px 3px!important;
    position: relative!important;
}
.اخضر {
    background: #f6f6f6!important;
    border-bottom: 16px solid #42b649!important;
    border-left: 2px dotted #42b649!important;
    border-radius: 3px!important;
    border-right: 2px dotted #42b649!important;
    border-top: 16px solid #42b649!important;
    padding: 60px 3px 3px!important;
    position: relative!important;
}
.اصفر {
    background: #f6f6f6!important;
    border-bottom: 16px solid #ede816!important;
    border-left: 2px dotted #ede816!important;
    border-radius: 3px!important;
    border-right: 2px dotted #ede816!important;
    border-top: 16px solid #ede816!important;
    padding: 60px 3px 3px!important;
    position: relative!important;
}
.بنفسجي {
    background: #f6f6f6!important;
    border-bottom: 16px solid #aa4399!important;
    border-left: 2px dotted #aa4399!important;
    border-radius: 3px!important;
    border-right: 2px dotted #aa4399!important;
    border-top: 16px solid #aa4399!important;
    padding: 60px 3px 3px!important;
    position: relative!important;
}

.شفاف hr {
    border: 2px solid #ddd!important;
}
.ازرق hr {
    border: 2px solid #3e459c!important;
}
.رمادي hr {
    border: 2px solid #ee314e!important;
}
.اخضر hr {
    border: 2px solid #42b649!important;
}
.اصفر hr {
    border: 2px solid #ede816!important;
}
.بنفسجي hr {
    border: 2px solid #aa4399!important;
}

.avatare {
    text-align: center;
}
.ranke, .namee {
    text-align: center;
}



.postprofile .label {
    float: right;
    text-align: left;
    margin-left: 3px;
    margin-right: -3px;
    width: 50%;
}




div.post .postprofile:after {
  content:".";
  font-size:0;
  background:#2E3133;
  border-bottom:4px solid #868686;
  height:20px;
  position:absolute;
  top:0px;
  left:0;
  right:0;
  z-index:1;
}
 
div.post.online .postprofile:after { border-color:#84C754 }
 

div.post .postprofile:before {
  content:url('https://i.servimg.com/u/f21/19/33/86/51/offlin10.png');
  position:absolute;
  top:3px;
  text-align: center;
  left:0;
  right:0;
  z-index:2;
}


div.post.online .postprofile:before {
  content:url('https://i.servimg.com/u/f21/19/33/86/51/online10.png');
}
.ذكر {
    background: #f6f6f6;
    border-bottom: 16px solid #2196f3;
    border-left: 2px dotted #2196f3;
    border-radius: 3px;
    border-right: 2px dotted #2196f3;
    border-top: 16px solid #2196f3;
    padding: 60px 3px 3px!important;
    position: relative;
}
 .ذكر hr {
    border: 1px solid #2196f3;
}
.انثى hr {
    border: 1px solid #e91e63;
}
.انثى {
background: #f6f6f6;
    border-bottom: 16px solid #e91e63;
    border-left: 2px dotted #e91e63;
    border-radius: 3px;
    border-right: 3px dotted #e91e63;
    border-top: 16px solid #e91e63;
    padding: 60px 3px 3px!important;
    position: relative;
}


النسخه الثالثه ومودرن
اضغط هنا للنسخة الثالثه و مودرن:

بالنسبه للنسخه الثالثه ونسخة مودرن
كل اللي عليك تضع الكود التالي بالجفا مع اختيار المواضيع
الكود:
$(function() {
  
   //Indicate here the version of your forum.
   var version = "phpBB3";
  
   if(version.toLowerCase() == "phpbb3"){  
      $(".postprofile img[title='شفاف']").closest('.postprofile').addClass("شفاف");
      $(".postprofile img[title='ازرق']").closest('.postprofile').addClass("ازرق");
      $(".postprofile img[title='رمادي']").closest('.postprofile').addClass("رمادي");
      $(".postprofile img[title='اخضر']").closest('.postprofile').addClass("اخضر");
      $(".postprofile img[title='اصفر']").closest('.postprofile').addClass("اصفر");
      $(".postprofile img[title='بنفسجي']").closest('.postprofile').addClass("بنفسجي");
       $(".postprofile img[title='ذكر']").closest('.postprofile').addClass("ذكر");
      $(".postprofile img[title='انثى']").closest('.postprofile').addClass("انثى");
   }
});
وتضع التالي بالcss
الكود:

.ازرق {
    background: #f6f6f6!important;
    border-bottom: 16px solid #3e459c!important;
    border-left: 2px dotted #3e459c!important;
    border-radius: 3px!important;
    border-right: 2px dotted #3e459c!important;
    border-top: 16px solid #3e459c!important;
    padding: 60px 3px 3px!important;
    position: relative!important;
}
.رمادي {
    background: #f6f6f6!important;
    border-bottom: 16px solid #a0a09a!important;
    border-left: 2px dotted #a0a09a!important;
    border-radius: 3px!important;
    border-right: 2px dotted #a0a09a!important;
    border-top: 16px solid #a0a09a!important;
    padding: 60px 3px 3px!important;
    position: relative!important;
}
.اخضر {
    background: #f6f6f6!important;
    border-bottom: 16px solid #42b649!important;
    border-left: 2px dotted #42b649!important;
    border-radius: 3px!important;
    border-right: 2px dotted #42b649!important;
    border-top: 16px solid #42b649!important;
    padding: 60px 3px 3px!important;
    position: relative!important;
}
.اصفر {
    background: #f6f6f6!important;
    border-bottom: 16px solid #ede816!important;
    border-left: 2px dotted #ede816!important;
    border-radius: 3px!important;
    border-right: 2px dotted #ede816!important;
    border-top: 16px solid #ede816!important;
    padding: 60px 3px 3px!important;
    position: relative!important;
}
.بنفسجي {
    background: #f6f6f6!important;
    border-bottom: 16px solid #aa4399!important;
    border-left: 2px dotted #aa4399!important;
    border-radius: 3px!important;
    border-right: 2px dotted #aa4399!important;
    border-top: 16px solid #aa4399!important;
    padding: 60px 3px 3px!important;
    position: relative!important;
}

.شفاف hr {
    border: 2px solid #ddd!important;
}
.ازرق hr {
    border: 2px solid #3e459c!important;
}
.رمادي hr {
    border: 2px solid #a0a09a!important;
}
.اخضر hr {
    border: 2px solid #42b649!important;
}
.اصفر hr {
    border: 2px solid #ede816!important;
}
.بنفسجي hr {
    border: 2px solid #aa4399!important;
}

.postprofile {
    text-align: center;
}
.postprofile dd {
    text-align: right;
}


.postprofile .label {
    float: right;
    text-align: left;
    margin-left: 3px;
    margin-right: -3px;
    width: 50%;
}




div.post .postprofile:after {
  content:".";
  font-size:0;
  background:#2E3133;
  border-bottom:4px solid #868686;
  height:20px;
  position:absolute;
  top:0px;
  left:0;
  right:0;
  z-index:1;
}
 
div.post.online .postprofile:after { border-color:#84C754 }
 

div.post .postprofile:before {
  content:url('https://i.servimg.com/u/f21/19/33/86/51/offlin10.png');
  position:absolute;
  top:3px;
  text-align: center;
  left:0;
  right:0;
  z-index:2;
}


div.post.online .postprofile:before {
  content:url('https://i.servimg.com/u/f21/19/33/86/51/online10.png');
}
.ذكر {
    background: #f6f6f6;
    border-bottom: 16px solid #2196f3;
    border-left: 2px dotted #2196f3;
    border-radius: 3px;
    border-right: 2px dotted #2196f3;
    border-top: 16px solid #2196f3;
    padding: 60px 3px 3px!important;
    position: relative;
}
 .ذكر hr {
    border: 1px solid #2196f3;
}
.انثى hr {
    border: 1px solid #e91e63;
}
.انثى {
background: #f6f6f6;
    border-bottom: 16px solid #e91e63;
    border-left: 2px dotted #e91e63;
    border-radius: 3px;
    border-right: 3px dotted #e91e63;
    border-top: 16px solid #e91e63;
    padding: 60px 3px 3px!important;
    position: relative;
}
هكذا خلصنا من المؤنث والمذكر والحمدلله
+
اذا كان مدير المنتدى لا يريد فقط لون للمؤنث والمذكر
بل يريد ان يترك للاعضاء حرية اختيار اللون الذي يفضلونه
عليه اضافة الى ماسبق خيار جديد من لوحة الادارة,
اذهب الى لوحة الادارة > الأعضاء & المجموعات > البيانات الشخصية
ثم انشىء حقل خاص جديد بالضغط على هذا الزر  :plus:
ثم ضع الاختيارات كما في الصور
كود لون البيانات الشخصية خاص للذكر وخاص للأنثى + لوني المفضل Ocia_a13
كود لون البيانات الشخصية خاص للذكر وخاص للأنثى + لوني المفضل Ociaa_11
هذه الصور من عندي (اذا تحبون صممو صور من عندكم افضل منها)
والكلمات التي لازم تضعونها بالحقول
شفاف:كود لون البيانات الشخصية خاص للذكر وخاص للأنثى + لوني المفضل Oc777a10
ازرق:كود لون البيانات الشخصية خاص للذكر وخاص للأنثى + لوني المفضل Ocia-a10
رمادي:كود لون البيانات الشخصية خاص للذكر وخاص للأنثى + لوني المفضل Ocia-a15
اخضر:كود لون البيانات الشخصية خاص للذكر وخاص للأنثى + لوني المفضل Ocia-a13
اصفر:كود لون البيانات الشخصية خاص للذكر وخاص للأنثى + لوني المفضل Ocia-a12
بنفسجي:كود لون البيانات الشخصية خاص للذكر وخاص للأنثى + لوني المفضل Ocia-a14
------
انا عملت شكل البيانات من عندي والوان من عندي
وانتم تقدرو تختار شكل البيانات على ذوقكم
وكذلك اللوان من عندكم كما تريدون

وفقكم الله
نوار2000
نوار2000
 
 

أخرى / أرفض التصريح
عدد المساهمات : 149
معدل النشاط : 293
السُمعة : 15

https://i.servimg.com/u/f71/17/12/81/11/ocia_a10.png

MostWanted و Msisra يعجبهم هذا الموضوع

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

الرجوع الى أعلى الصفحة


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