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

أحبتى أعضاء وزوار مجتمع تقنى
وكما عودناكم بدعم المنتديات العربية و منتديات الزين فورو
أقدم لكم طريقة تغيير شكل اﻻحصائيات لمنتديات الزين فورو
لتجعل موقع أكثر أحترافية وروعة
رقم الإصدار :
2.0 - 2.1 - 2.2
اوﻻً نقوم بتعطيل اﻻحصائيات في الشريط الجانبي ومن ثم نقوم بتفعيلها
اسفل المنتدى مثل الصورة التالية:

l-1.jpg

أولا نذهب لتاب المظهر - القوالب -
widget_forum_statistics

نستبدل محتواه

HTML:
<div class="block"{{ widget_data($widget) }}>
    <div class="block-container xa_stat">
        <!-- <h3 class="block-minorHeader">{$title}</h3> -->
        <div class="block-body block-row">
            <dl class="pairs pairs--justified">
                <xf:fa icon="fa fa-clipboard" />
                <dt>{{ phrase('threads') }}</dt>
                <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>

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


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


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


l-2.jpg

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

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

أعلى أسفل