[XN2.2] تغيير شكل اﻻحصائيات مثل استايل حبر نت (1 مشاهد)

[الغزال الذهبي]

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

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

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

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

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

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

​

ثم بعد ذلك نقوم بفتح قالب 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;
            }
        }
    }
}

النتيجة:

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

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

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

المصدر:

لو سمحت، تسجيل الدخول أو تسجيل لعرض محتوى عناوين URL!

 

[أم طه]

جزاك الله خيرا @الغزال الذهبي بارك الله فيك​

 

[الغزال الذهبي]

تســــلم يــا غــــــ ــــالي الله يعــطيك
العــــــــــــافية​

 

[أيمن الجزائري]

جزاك الله خيرا ​

 

[أميمة ويام]

بارك الله فيك​