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

أحبتى أعضاء وزوار مجتمع تقنى
وكما عودناكم بدعم المنتديات العربية و منتديات الزين فورو
أقدم لكم إستايل
رقم الإصدار :
2.0 - 2.1 - 2.2

بسم الله نبدأ الشرح
ندخل عل تاب المظهر - القوالب - widget_forum_statistics

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

HTML:
<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

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


Tqny1
صورة تطبيق الشرح

Tqny2

شكرا على متابعتكم

فى أمان الله أحبتى
الكاتب
Eng.Salah
المشاهدات
494
الإصدار الأول
آخر تحديث
تقييم
0.00 نجوم 0 تقييمات

منتجات أخرى من Eng.Salah

أعلى أسفل