هيلبرنت | Helpernt - [ شرح ] : كود جديد لعمل إحصائيات Xenforo مثل موقع تقنى للزين فورو

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

أحبتى الكرام زوار وأعضاء هيلبر نت
كما وعدناكم بكل جديد وحصرى
وبمناسبة أفتتاح مجموعة تقنى أهديكم كود الإحصائيات الجديد الخاص بموقعى

وظيفة الكود

تعديل شكل الإحصائيات ونقلها تحت المنتديات لجعل مظهر موقعك جذاب ومتوافق مع كل أجهزة الموبايل وشاشات العرض وكل المتصفحات

صورة بعد التطبيق

https://i.imgur.com/jdHZEjo.jpg
مثال مباشر
تقنى
https://tqny.vip

الطريقة كالأتى

من لوحة التحكم
تاب المظهر تم البحث فى القوالب تم نكتب

widget_forum_statistics

نستبدل كل ما بداخله بالكود التالى

كود:

<xf:css src="tqny.less" />

<div class="ist-anaalan"{{ widget_data($widget) }}>

<div class="ist-kutu">

<div class="ist-ic ist-ic-bosluk">

<div class="ist-detay">

<div class="fa-icon fa-renk1"><i class="fad fa-comment-lines"></i></div>

<p class="sayi">{$forumStatistics.threads|number}</p>

<span class="ist-bilgi">{{ phrase('threads') }}</span>

</div>

</div>

<div class="ist-ic ist-ic-bosluk">

<div class="ist-detay">

<div class="fa-icon fa-renk2"><i class="fad fa-comments"></i></div>

<p class="sayi">{$forumStatistics.messages|number}</p>

<span class="ist-bilgi">{{ phrase('messages') }}</span>

</div>

</div>

<div class="ist-ic ist-ic-bosluk">

<div class="ist-detay">

<div class="fa-icon fa-renk3"><i class="fad fa-users"></i></div>

<p class="sayi">{$forumStatistics.users|number}</p>

<span class="ist-bilgi">{{ phrase('members') }}</span>

</div>

</div>

<div class="ist-ic ist-ic-bosluk">

<div class="ist-detay">

<div class="fa-icon fa-renk4"><i class="fad fa-users-medical"></i></div>

<p><xf:username user="{$forumStatistics.latestUser}" /></p>

<span class="ist-bilgi">{{ phrase('latest_member') }}</span>

</div>

</div>

</div>

</div>

ثم نقوم بإضافة قالب جديد أسمه tqny.less

تم نضع الكود التالى

كود:

.ist-anaalan {

margin-top: 20px;

}

.ist-kutu {

display: flex;

flex-wrap: wrap;

margin-top: 10px;

margin-bottom: 10px;

}

.ist-ic {

flex:25%;

}

.ist-detay {

background-color: #dedede;

box-shadow: 0px 5px 10px -4px rgba(0,0,0,0.29);

padding: 5px 20px 5px 5px;

text-align: center;

border-radius: 50px;

}

.fa-renk1 {

background-color: #22a720;

color: #c9c9c9;

}

.fa-renk2 {

background-color: #204492;

color: #c9c9c9;

}

.fa-renk3 {

background-color: #a2b509;

color: #c9c9c9;

}

.fa-renk4 {

background-color: #f2930d;

color: #c9c9c9;

}

.fa-icon {

font-size: 30px;

width: 50px;

height: 50px;

float: left;

line-height: 50px;

border-radius: 50px;

}

.ist-detay p {

color: #272727;

font-weight: 600;

font-size: 20px;

text-align: right;

padding: 0;

margin: 0;

}

.ist-anaalan .ist-kutu .ist-detay span {

color: #a02828;

text-align: right;

display: block;

}

@media (min-width: 900px){

.ist-anaalan .ist-kutu .ist-ic-bosluk:first-of-type,

.ist-anaalan .ist-kutu .ist-ic-bosluk:nth-child(2),

.ist-anaalan .ist-kutu .ist-ic-bosluk:nth-child(3)

{padding-right: 5px;}}

@media (max-width: 900px){

.ist-anaalan .ist-kutu .ist-ic-bosluk:first-of-type,

.ist-anaalan .ist-kutu

.ist-ic-bosluk:nth-child(3) {

padding-right: 5px;

}}

@media (max-width: 900px){

.ist-anaalan .ist-kutu .ist-ic {

flex: 0 0 50%;

max-width: 50%;

margin-bottom: 30px;

}}

ثم حفظ القالب ومبروك عليك الشكل الجديد
ولكن لا ننسى إضافة قطعة عن طريق
لوحة التحكم - المظهر - القطع من داخلها - إضافة قطعة
معرف القطعة
إحصائيات المنتدى
مفتاح القطعة
Footer_tqny
العنوان
Footer tqny
عرض في المواضع
قائمة المنتدى: أسفل المنتديات
الترتيب
1

كما بالصورة التالية للتوضيح

https://i.imgur.com/Hdq5Ozn.jpg

فى أمان الله أحبتى الكرام

المصدر : https://tqny.vip/store/22/