تغيير شكل اﻻحصائيات مثل استايل حبر نت

[عبدو شنوي]

بسم الله الرحمن الرحيم

الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم

اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،

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

بسم الله نبدأ:

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


https://www.*****.com/xn/index.php?attachments/368/

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

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

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

ومن ثم نضيف اكواد ال 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;
            }
        }
    }
}

النتيجة:

https://www.*****.com/xn/index.php?attachments/369/
طبعا تم الاعتماد على متغيرات الوان اﻻستايل في بعض امكان الكود ولك الحرية في تغيير اﻻلوان حسب الوان استايلك

اتمنى ان اكون وفقت في الطريقة واي سؤال حاضرين للغالين

احترامي وتقديري

المصدر: [ XF 2.2 ] - تغيير شكل اﻻحصائيات مثل استايل حبر نت

 

[Rayq_Marrh]

الله يعطيك الف عافية ابدعت وماقصرت