Eng.Salah
:: الأعضاء ::
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
أحبتى الكرام زوار وأعضاء مجموعة زين العربية
كما وعدناكم بكل جديد وحصرى
أهديكم كود الإحصائيات الجديد الخاص بموقعى
وظيفة الكود
تعديل شكل الإحصائيات ونقلها تحت المنتديات لجعل مظهر موقعك جذاب ومتوافق مع كل أجهزة الموبايل وشاشات العرض وكل المتصفحات
صورة بعد التطبيق
مثال مباشر
تقنى
الطريقة كالأتى
من لوحة التحكم
تاب المظهر تم البحث فى القوالب تم نكتب
widget_forum_statistics
نستبدل كل ما بداخله بالكود التالى
السلام عليكم ورحمة الله وبركاته
أحبتى الكرام زوار وأعضاء مجموعة زين العربية
كما وعدناكم بكل جديد وحصرى
أهديكم كود الإحصائيات الجديد الخاص بموقعى
وظيفة الكود
تعديل شكل الإحصائيات ونقلها تحت المنتديات لجعل مظهر موقعك جذاب ومتوافق مع كل أجهزة الموبايل وشاشات العرض وكل المتصفحات
صورة بعد التطبيق
مثال مباشر
تقنى
الطريقة كالأتى
من لوحة التحكم
تاب المظهر تم البحث فى القوالب تم نكتب
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
تم نضع الكود التالى
تم نضع الكود التالى
CSS:
.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
كما بالصورة التالية للتوضيح
وإذا أى حد من الأخوة حابب الكود الشفاف بدون ألوان الخلفية
أنا بالخدمة
فقط أطلب فى تعليق
فى أمان الله أحبتى الكرام
المصدر :
tqny.vip
Template - كود جديد لعمل الإحصائيات مثل موقع تقنى للزين فو xenforo
بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته أحبتى الكرام زوار وأعضاء مجموعة تقنى كما وعدناكم بكل جديد وحصرى وبمناسبة السنة الجديدة أهديكم كود الإحصائيات الجديد الخاص بموقعى وظيفة الكود تعديل شكل الإحصائيات ونقلها تحت المنتديات لجعل...
tqny.vip
