ویژه آموزش زیبا سازی جعبه/بلوک آمار انجمن (طرح جدید)

[XF Father]

با سلام


ابتدا وارد صفحه ی مدیرکل شوید و سپس مسیر زیر را طی کنید.

1. شکل و ظاهر
2. استایل ها و الگوها
3. الگوها

[HIDESHOWTOGROUPS=4,3,6,5,7]
سپس الگوی widget_forum_statistics را پیدا کنید و تمام کدهاش رو حذف کنید و کد زیر را درون آن قرار دهید.

<xf:css src="istatistik.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>

..

سپس دوباره مسیر زیر را طی کنید.

1. شکل و ظاهر
2. استایل ها و الگوها
3. الگوها

اما ایندفعه باید خودتون یه الگوی جدیدی بسازید . برای اینکار دکمه‌ی افزودن الگو که در بالا-چپ قرار داده رو کلیک کنید.
خب ، اسم الگوی جدید رو istatistik.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;
}}

محل نمایش ابزارک آمار انجمن رو هم لیست‌تالارها:پایین انتخاب کنید.
[/HIDESHOWTOGROUPS]

نتیجه :


سپاس

 

[creed]

با سلام


ابتدا وارد صفحه ی مدیرکل شوید و سپس مسیر زیر را طی کنید.

1. شکل و ظاهر
2. استایل ها و الگوها
3. الگوها

[Hidden content]

نتیجه :
مشاهده فایل‌پیوست 4785

سپاس

داخل istatistik.less همون کدی که بالا گذاشتید رو باید بذاریم؟
انجام میدم بهم ریخته نمایش میده

 

[XF Father]

داخل istatistik.less همون کدی که بالا گذاشتید رو باید بذاریم؟
انجام میدم بهم ریخته نمایش میده

بله.
لابد یه جای کارتون ایراد داشته ، لطفاً موارد آموزش رو دوباره انجام بدید.

 

[creed]

بله.
لابد یه جای کارتون ایراد داشته ، لطفاً موارد آموزش رو دوباره انجام بدید.

به این شکل در میاد
محل نمایش ابزارک آمار انجمن رو هم لیست‌تالارها:پایین انتخاب کنید.
اینکارم کردم همینجور مونده عکسشو پیوست کردم

 

[XF Father]

به این شکل در میاد
محل نمایش ابزارک آمار انجمن رو هم لیست‌تالارها:پایین انتخاب کنید.
اینکارم کردم همینجور مونده عکسشو پیوست کردم

آموزش ویرایش شد.
لطفاً دوباره بررسی کنید.

اصلاحیه : داخل istatistik.less کد دومی رو قرار بدین.

 

[Dariush]

به این شکل در میاد
محل نمایش ابزارک آمار انجمن رو هم لیست‌تالارها:پایین انتخاب کنید.
اینکارم کردم همینجور مونده عکسشو پیوست کردم

اگر مشکلتون رفع نشد
کد زیر را در extra.lessکپی کنید.


[HIDESHOWTOGROUPS=4,3,6,5,7]

.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;
}}

[/HIDESHOWTOGROUPS]