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

أحبتى أعضاء وزوار مجتمع تقنى
وكما عودناكم بدعم المنتديات العربية و منتديات الزين فورو
أقدم لكم إستايل
رقم الإصدار :
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.jpg
صورة تطبيق الشرح

tqny2.jpg

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

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

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

الوسوم
xenforo إحصائيات إضافات الزين فورو ارشفة ارشفة الزين فورو ارشفة المنتدى الزين فورو الزين فورو 2 الزين فورو العربى تطوير تطوير xenforo تطوير الزين فورو تطوير المنتديات تطوير الويب تقنى جديد جعل دعم دعم xenforo دعم الزين فورو دعم المنتديات دعم الويب كود مثل مجتمع مجتمع تقنى منتداك منتدى موقع

جميع المواضيع والمشاركات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة تقنى .. بالرغم من محاولتنا المستمرة لمنع جميع المخالفات إلا أنه ليس بوسعنا إستعراض جميع المشاركات المدرجة ولا يتحمل تقنى أي مسؤولية قانونية عن محتوى تلك المشاركات . الموقع غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء فعلى كل شخص تحمل مسئولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه. .

أعلى أسفل