Jump to content
IPS Invision Community
Sign in to follow this  

Статистика форума меняем внешний вид


Description

Изменяем вид статистики плагина General Statistics

7.png.fc3a5ba5467801954fe8a4313d58b9a1.png

Сперва вам нужно скачать и установить плагин статистики 

Далее заходим в список стилей и открываем редактирование шаблонов.

  • находим шаблон: gstats (можно вставить в поле и вам сразу откроется этот шаблон).
  • заменяем всё на;
<div class="cybergstat">
 <h3 class="ipsType_reset ipsWidget_title">Статистика форума</h3> 
<div class='ipsWidget_inner'>
	{{if $orientation == 'vertical'}}
		<div class='ipsPad_half'>
			<ul class='ipsDataList'>
				<li class='ipsDataItem'>
					<div class='ipsDataItem_main ipsPos_middle'>
						<strong>{lang="total_topics"}</strong>
					</div>
					<div class='ipsDataItem_stats ipsDataItem_statsLarge'>
						<span class='ipsDataItem_stats_number'>{number="$stats['total_topics']"}</span>
					</div>
				</li>
				<li class='ipsDataItem'>
					<div class='ipsDataItem_main ipsPos_middle'>
						<strong>{lang="total_posts"}</strong>
					</div>
					<div class='ipsDataItem_stats ipsDataItem_statsLarge'>
						<span class='ipsDataItem_stats_number'>{number="$stats['total_posts']"}</span>
					</div>
				</li>
				<li class="ipsDataItem">
					<div class="ipsDataItem_main ipsPos_middle">
						<strong>{lang="stats_total_members"}</strong>
					</div>
					<div class="ipsDataItem_stats ipsDataItem_statsLarge">
						<span class="ipsDataItem_stats_number">{number="$stats['member_count']"}</span>
					</div>
				</li>
				<li class="ipsDataItem">
					<div class="ipsDataItem_main ipsPos_middle">
						<strong>{lang="stats_most_online"}</strong>
					</div>
					<div class="ipsDataItem_stats ipsDataItem_statsLarge">
						<span class="ipsDataItem_stats_number">{number="$stats['most_online']['count']"}</span><br>
						<span class="ipsType_light ipsType_small">{datetime="$stats['most_online']['time']" norelative="true"}</span>
					</div>
				</li>
			</ul>
			<hr class='ipsHr'>
			{{if $stats['last_registered']}}
				<div class='ipsClearfix ipsPad_bottom'>
					<div class='ipsPos_left ipsType_center cNewestMember'>
						{template="userPhoto" app="core" group="global" params="$stats['last_registered'], 'small'"}
					</div>
					<div class='ipsWidget_latestItem'>
						<strong class='ipsType_minorHeading'>{lang="stats_newest_member"}</strong><br>
						<span class='ipsType_normal'>{$stats['last_registered']->link()|raw}</span><br>
						<span class='ipsType_medium ipsType_light'>{lang="members_joined"} {datetime="$stats['last_registered']->joined" norelative="true"}</span>
					</div>
				</div>
			{{endif}}
		</div>
	{{else}}
  <div class="ipsGrid ipsGrid_collapsePhone">
		<div class='ipsGrid ipsGrid_collapsePhone'>

			<div class='ipsGrid_span2 ipsType_center'>
            <div class="gstatsistic">
			<span class="ipsType_light"><span class="ipsType_left leftsts">{number="$stats['total_topics']"}</span> 
             <span class="ipsType_right rightsts">{lang="total_topics"}<i class="fa fa-comment-o ists" aria-hidden="true"></i></span>
              </span>
              </div>    
              </div>               
              
			<div class='ipsGrid_span2 ipsType_center'>
            <div class="gstatsistic">
			<span class="ipsType_light"><span class="ipsType_left leftsts">{number="$stats['total_posts']"}</span> 
             <span class="ipsType_right rightsts">{lang="total_posts"}<i class="fa fa-comment-o ists" aria-hidden="true"></i></span>
              </span>
              </div>    
              </div>               
              
			<div class='ipsGrid_span2 ipsType_center'>
            <div class="gstatsistic">
			<span class="ipsType_light"><span class="ipsType_left leftsts">{number="$stats['member_count']"}</span> 
             <span class="ipsType_right rightsts">{lang="stats_total_members"}<i class="fa fa-comment-o ists" aria-hidden="true"></i></span>
              </span>
              </div>               
              </div> 
              
			<div class='ipsGrid_span2 ipsType_center'>
            <div class="gstatsistic">
			<span class="ipsType_light"><span class='ipsType_left leftsts' data-ipsTooltip title='<time data-norelative="true">{$stats['most_online']['time']}</time>'>{number="$stats['most_online']['count']"}</span> 
             <span class="ipsType_right rightsts">{lang="stats_most_online"}<i class="fa fa-comment-o ists" aria-hidden="true"></i></span>
              </span>
              </div>               
              </div> 
                        
			<div class='ipsGrid_span4 ipsType_center'>
            <div class="gstatsistic">
			<span class="ipsType_light"><span class='ipsType_left leftsts' data-ipsTooltip title='{lang="members_joined"} {datetime="$stats['last_registered']->joined" norelative="true"}'>{$stats['last_registered']->link()|raw}</span> 
             <span class="ipsType_right rightsts">{lang="stats_newest_member"}<i class="fa fa-comment-o ists" aria-hidden="true"></i></span>
              </span>
              </div>                
              </div> 
              
		</div>
  </div>
	{{endif}}
</div>
</div>
  • в custom.css вставляете;
.cybergstat {
    margin-top: 0px;
}
.gstatsistic {
    margin: 3px;
    padding: 0px;
    display: block;
    height: 40px;
    line-height: 40px;
    background: #fefefe;
    border: 1px solid #eae5e4;
}
.gstatsistic:hover {
    color: #e6e8ea;
    float: center;
}
.gstatsistic:hover .leftsts {
    background: #2f35537d;
    color: #fbfbfb;
    font-weight: bold;
    transition: all 0.4s ease;
}
.gstatsistic:hover .rightsts {
    color: #2e3135;
}

.rightsts {
    color: #2e3135;
    float: center;
    position: relative;
}

.rightsts .ists {
    display: none;
}

.leftsts {
    color: #2e3135;
    float: left;
    padding: 0 12px;
    height: 38px;
    position: relative;
    background: #f2f3f4;
    transition: all 0.4s ease;
}

На этом всё.

  • Нравится 1
  • Спасибо 1


Recommended Comments

Маленькая по сравнению с оригиналом, но выглядит симпотно, особенно анимация при наведении. Лови плюсик 

Share this comment


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...
Вверх