اضافة النجوم الى الموضوع بشكل تلقائي Hitskin_logo Hitskin.com

هذه مُجرَّد مُعاينة لتصميم تم اختياره من موقع Hitskin.com
تنصيب التصميم في منتداكالرجوع الى صفحة بيانات التصميم

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

اضافة النجوم الى الموضوع بشكل تلقائي

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

اضافة النجوم الى الموضوع بشكل تلقائي Empty اضافة النجوم الى الموضوع بشكل تلقائي

مُساهمة من طرف كونان2000 السبت 12 فبراير 2022 - 10:04

السلام عليكم ورحمة الله وبركاته
اللهم صل وسلم وبارك على محمد وعلى اله وصحبه اجمعين
-------------------



اضافة النجوم الى الموضوع بشكل تلقائي
اضافة النجوم الى الموضوع بشكل تلقائي Animat12
يزداد عدد النجوم تلقائيًا مع زيادة عدد الأعضاء المشاركين



طريقة التركيب 
التومبيلات والقوالب > قالب viewtopic_body


ابحث عن الكود التالي
الكود:
{POSTERS_LIST}

احذفه وضع مكانه التالي
الكود:
<div class="stars">
  {POSTERS_LIST}<br />
<div class="star">{POSTER_MORE_MODAL}</div></div>
                
                  
    <style>
 .star {
    font-size: 0;
}    
 .poster-list {
      float: none;
    margin-bottom: 0px;
    padding: 0px 0;
}
.poster-more-item {
  display: inline-block;
}
i.poster-modal-close.material-icons {
    display: none;
}
 .poster-more-modal {
      padding: 5px;
      display: inline-block!important;
}
.poster-list .poster .poster-more-list {
    right: 45px;
    max-height: 204px;
    width: 400%;
}
  .poster-list .poster .poster-more-list div:not(:last-child) {
    margin-bottom: 6px;
    display: block;
}    
    </style>        


ثم ضع التالي في الcss
الكود:

div.poster-more-list > div:nth-child(10) > span,
div.poster-more-list > div:nth-child(11) > span,
div.poster-more-list > div:nth-child(12) > span,
div.poster-more-list > div:nth-child(2) > span,
div.poster-more-list > div:nth-child(3) > span,
div.poster-more-list > div:nth-child(4) > span,
div.poster-more-list > div:nth-child(5) > span,
div.poster-more-list > div:nth-child(6) > span,
div.poster-more-list > div:nth-child(7) > span,
div.poster-more-list > div:nth-child(8) > span,
div.poster-more-list > div:nth-child(9) > span {
    background: url(https://i.servimg.com/u/f20/16/85/77/67/stars-10.png);
    background-size: 100% 100%;
    display: inline-block;
    padding: 35px 25px 30px;
}
-------------------------------------

ملاحظة. ..
هذا التعديل يعمل على جميع إصدارات المنتدى ،

لن يتم احتساب كاتب الموضوع.

واذا رأيت سبع نجوم في اعلى الموضوع .. هذا يعني ان عدد الاعضاء المشتركين سبعة

العدد يتوقف عند 11 نجمة.
يمكنك تغير صورة النجمه الى اي صورة اخرى من الcss

وكذلك إذا كنت ترغب في زيادة عدد النجوم ، فيجب عليك إضافة سطر جديد إلى ورقة الCSS وتغيير الرقم
الكود:
div.poster-more-list> div: nth-child (13)> span
كما في الصورة
اضافة النجوم الى الموضوع بشكل تلقائي Ocia_a16

وفقكم الله
---------------------

تمت كتابة  الأكواد والشرح بواسطة كونان2000
وشكرا للعضو العراقي الطائي الذي بسببه جاءتني هذه الفكرة الجميلة
كونان2000
كونان2000
احلى نائب
احلى نائب

ذكر
عدد المساهمات : 1778
معدل النشاط : 3694
السُمعة : 332

https://anime.forumperso.com/

abigan و Mr Google يعجبهم هذا الموضوع

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

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

- مواضيع مماثلة

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