شرح تغير شكل الاحصائيات كما في منتدى حبر نت

[codeNET]

تغير شكل الاحصائيات وجعلها بشكل جميل وانيق ، كما موجود في منتدى حبر نت .

اوﻻً نقوم بتعطيل اﻻحصائيات في الشريط الجانبي ومن ثم نقوم بتفعيلها اسفل المنتدى مثل الصورة التالية:


ثم بعد ذلك نقوم بفتح قالب widget_forum_statistics

ونستبدل القالب بهذا القالب

  <dd>{$forumStatistics.threads|number}</dd>
            </dl>

            <dl class="pairs pairs--justified">
                <xf:fa icon="fa fa-comments" />
                <dt>{{ phrase('messages') }}</dt>
                <dd>{$forumStatistics.messages|number}</dd>
            </dl>

            <dl class="pairs pairs--justified">
                <xf:fa icon="fa fa-users" />
                <dt>{{ phrase('members') }}</dt>
                <dd>{$forumStatistics.users|number}</dd>
            </dl>

            <dl class="pairs pairs--justified">
                <xf:fa icon="fa fa-user" />
                <dt>{{ phrase('latest_member') }}</dt>
                <dd><xf:username user="{$forumStatistics.latestUser}" /></dd>
            </dl>
        </div>
    </div>
</div>

او هناك طريقة جديدة :
تدخل على لوحة تحكم >> المظهر >> القطع >> اضافة قطع >> تختار قالب html وتضيف هذا الكود السابق .

ومن ثم نضيف اكواد ال css التالية الى قالب extra

.xa_stat{
    background: transparent;
    border: 0;
    
    .block-body{
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        
        .pairs{
            display: block;
            float: right;
            width: 23%;
            text-align: center;
            margin: 40px 1% 0;
            background-color: #fff;
            border-radius: 4px;
            position: relative;
            overflow: visible;
            padding: 50px 0 0;
            -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.05);
            -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.05);
            box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.05);
            transition: all 0.3s linear;
            -moz-transition: all 0.3s linear;
            -webkit-transition: all 0.3s linear;
            text-decoration: none !important;
            
            &:hover{
                -webkit-transform: translateY(-10px);
                -ms-transform: translateY(-10px);
                transform: translateY(-10px);
            }
            
            i{
                display: block;
                color: @xf-linkColor;
                width: 60px;
                height: 60px;
                line-height: 60px;
                background-color: #fff;
                border-radius: 50%;
                margin: 0 auto 14px;
                margin-left: auto;
                font-size: 26px;
                position: absolute;
                top: -30px;
                left: 50%;
                margin-left: -30px;
                border: 3px solid #ECECEC;
            }
            
            dt, dd{
                float: none;
                display: block;
                text-align: center;
            }
            
            dt{
                margin-bottom: 5px;
            }
            dd{
                background: @xf-contentHighlightBg;
                border-top: @xf-borderSize solid @xf-linkColor;
                font-size: 24px;
            }
        }
    }
}

 

[masrysat.com]

بارك الله فيك

 

[BoElias]

سلمت ما قصرت