shqawe
ربي أشرح لي صدري
بسم الله الرحمن الرحيم
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،
اقدم لكم اليوم طريقة تغيير شكل اﻻحصائيات مثل استايل حبر نت المقدم من اخونا @Alrajabane واللي تم طلب طريقتها كثيرا ً لذا احببت ان اقدم لكم الطريقة عسى ان ينفع الله بها
بسم الله نبدأ:
اوﻻً نقوم بتعطيل اﻻحصائيات في الشريط الجانبي ومن ثم نقوم بتفعيلها اسفل المنتدى مثل الصورة التالية:
ثم بعد ذلك نقوم بفتح قالب
ونستبدل القالب بهذا القالب
ومن ثم نضيف اكواد ال css التالية الى قالب extra
طبعا تم الاعتماد على متغيرات الوان اﻻستايل في بعض امكان الكود ولك الحرية في تغيير اﻻلوان حسب الوان استايلك
اتمنى ان اكون وفقت في الطريقة واي سؤال حاضرين للغالين
احترامي وتقديري
اخوكم
شقاوي
الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم
اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،
اقدم لكم اليوم طريقة تغيير شكل اﻻحصائيات مثل استايل حبر نت المقدم من اخونا @Alrajabane واللي تم طلب طريقتها كثيرا ً لذا احببت ان اقدم لكم الطريقة عسى ان ينفع الله بها
بسم الله نبدأ:
اوﻻً نقوم بتعطيل اﻻحصائيات في الشريط الجانبي ومن ثم نقوم بتفعيلها اسفل المنتدى مثل الصورة التالية:
ثم بعد ذلك نقوم بفتح قالب
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;
}
}
}
}طبعا تم الاعتماد على متغيرات الوان اﻻستايل في بعض امكان الكود ولك الحرية في تغيير اﻻلوان حسب الوان استايلك
اتمنى ان اكون وفقت في الطريقة واي سؤال حاضرين للغالين
احترامي وتقديري
اخوكم
شقاوي
