.::|>آموزش استایل دهی به برنامه General Statistics<|::.

[Arash.Ranjbar 11]

سلام دوستان.

اگه تا حالا برنامه General Statistics رو نصب کرده باشین میدونین که ظاهر چندان خوبی نداره ولی با این آموزش میتونین یه استایل خوب بهش بدین.

خب برای شروع وارد مسیر زیر بشید.

ادمین - شخصی سازی - پوسته ها - ویرایش پوسته مورد نظر - تب قالب - جستوجوی عبارت 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>

در فابل costum.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;
}

 

امیدوارم خوشتون بیاد