• أعضاء وزوار معهد زين العربية، نود أن نعلمكم أن المعهد سيشهد في الفترة القادمة الكثير من التغيرات سواءا على المستوى الاداري او مستوى الاقسام، لذا نرجو منكم التعاون، وأي ملاحظات او استفسارات يرجى التواصل معنا عبر قسم الشكاوي و الإقتراحات و الطلبات ونشكركم على حسن تفهمكم وتعاونكم ،مع خالص الشكر والتقدير والاحترام من إدارة زين العربية.

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

shqawe

ربي أشرح لي صدري
27 يونيو 2019
3,164
23
2,072
113
K.S.A
بسم الله الرحمن الرحيم

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

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

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

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

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

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>

ومن ثم نضيف اكواد ال css التالية الى قالب 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

طبعا تم الاعتماد على متغيرات الوان اﻻستايل في بعض امكان الكود ولك الحرية في تغيير اﻻلوان حسب الوان استايلك

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

احترامي وتقديري
اخوكم
شقاوي
 

إحصائيات المنتدى

المواضيع
1,446
المشاركات
16,603
الأعضاء
1,022
آخر عضو مسجل
naseh
أعلى