Jump to content

Красивая userInfoPane [RIP and modification by SanyaSamp]

SanyaSamp
SanyaSamp
in Корзина

Featured Replies

Posted
comment_62293

Скоро выйдет первая версия моего стиля (Пока еще сырая версия).  А пока я расскажу как сделать такую вот userInfoPane

Внимание!!! РИПАЛ И Модифицировал данную userInfoPane я!!!!

 

post-16225-0-15152200-1398851125_thumb.p

 

Что бы сделать такую userInfoPane, идем в АЦ - Внешний вид - Ваш шаблон - userInfoPane

И все все все заменяем на 

<div itemscope="" itemtype="__schema.org/Person" class="user_details">
<span class="hide" itemprop="name">{$author['members_display_name']}</span>
<ul class="basic_info">
<p class="desc member_title"><span style="color:#454545;font-weight:bold">{$author['member_title']}</span></p>
<if test="avatar:|:$author['member_id']">
			<li class='avatar'>
				<if test="canSeeProfiles:|:$this->memberData['g_is_supmod'] OR ( $this->memberData['g_mem_info'] && ! IPSMember::isInactive( $author ) )">
				<a itemprop="url" href="{parse url="showuser={$author['member_id']}" template="showuser" seotitle="{$author['members_seo_name']}" base="public"}" title="{$this->lang->words['view_profile']}: {$author['members_display_name']}" class='ipsUserPhotoLink'>
				</if>
				<if test="hasVariable:|:$this->settings['member_topic_avatar_max']">	
					<img itemprop="image" src='{$author['pp_main_photo']}' class='ipsUserPhoto ipsUserPhoto_variable' />
				<else />
					<img itemprop="image" src='{$author['pp_thumb_photo']}' class='ipsUserPhoto ipsUserPhoto_large' />
				</if>
				<if test="canSeeProfiles2:|:$this->memberData['g_is_supmod'] OR ( $this->memberData['g_mem_info'] && ! IPSMember::isInactive( $author ) )">
				</a>
				</if>
			</li>
		<else />
			<li class='avatar'>
				<img itemprop="image" src='{$author['pp_thumb_photo']}' class='ipsUserPhoto ipsUserPhoto_large' />
			</li>
		</if>

<li class='group_title'>
			{$author['_group_formatted']}
		</li>
		<if test="rankimage:|:$author['member_rank_img']">
			<li class='group_icon'>
			<if test="rankimageimage:|:$author['member_rank_img_i'] == 'img'">
				<img src='{$author['member_rank_img']}' alt='' />
			<else />
				{$author['member_rank_img']}
			</if>
			</li>
		</if>
<if test="cardRep:|:$this->settings['reputation_enabled'] && $this->settings['reputation_show_profile']">
<div class="reputation-bg" data-tooltip="Репутация: {$author['pp_reputation_points']}">
<div class="reputation-bar
<if test="$author['pp_reputation_points']==0">gray</if>
<if test="$author['pp_reputation_points']<0 && $author['pp_reputation_points']>=-15">red width20</if>
<if test="$author['pp_reputation_points']<-15 && $author['pp_reputation_points']>=-30">red width40</if>
<if test="$author['pp_reputation_points']<-30 && $author['pp_reputation_points']>=-45">red width60</if>
<if test="$author['pp_reputation_points']<-45 && $author['pp_reputation_points']>=-60">red width80</if>
<if test="$author['pp_reputation_points']<-60">red</if>
<if test="$author['pp_reputation_points']>=1 && $author['pp_reputation_points']<=10">blue width20</if>
<if test="$author['pp_reputation_points']>10 && $author['pp_reputation_points']<=20">blue width40</if>
<if test="$author['pp_reputation_points']>20 && $author['pp_reputation_points']<=30">blue width60</if>
<if test="$author['pp_reputation_points']>30 && $author['pp_reputation_points']<=40">blue width80</if>
<if test="$author['pp_reputation_points']>40 && $author['pp_reputation_points']<=50">blue</if>
<if test="$author['pp_reputation_points']>50 && $author['pp_reputation_points']<=70">green width20</if>
<if test="$author['pp_reputation_points']>70 && $author['pp_reputation_points']<=90">green width40</if>
<if test="$author['pp_reputation_points']>90 && $author['pp_reputation_points']<=110">green width60</if>
<if test="$author['pp_reputation_points']>110 && $author['pp_reputation_points']<=130">green width80</if>
<if test="$author['pp_reputation_points']>130 && $author['pp_reputation_points']<=150">green</if>
<if test="$author['pp_reputation_points']>150 && $author['pp_reputation_points']<=190">gold width20</if>
<if test="$author['pp_reputation_points']>190 && $author['pp_reputation_points']<=230">gold width40</if>
<if test="$author['pp_reputation_points']>230 && $author['pp_reputation_points']<=270">gold width60</if>
<if test="$author['pp_reputation_points']>270 && $author['pp_reputation_points']<=310">gold width80</if>
<if test="$author['pp_reputation_points']>310">gold</if>
">
{$author['pp_reputation_points']}
</div>
</div>
</if>
<div id="subplay">
<style type="text/css">.tCard{float:right;width:28%;vertical-align:middle;background:none!important;font-weight:bold;padding-top:2px;color:white;text-shadow:rgba(0,0,0,0.4) 1px 1px 1px;}.tBorder_2{width:120px;margin:0 auto;background-color:#e1833f;height:20px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;padding:1px;position:relative;}.tText_2{position:absolute;z-index:10;text-align:center;top:2px;left:1px;margin:0 auto;width:85px;font-weight:bold;color:#e1833f;text-shadow:rgba(0,0,0,0.4) 1px 1px 1px;}.progress-container_2{width:70%;height:18px;padding:1px;background:white;float:left;}.progress-container_2>div{background-color:white;background-image:url({style_images_url}/status2.png);background-repeat:no-repeat;height:18px;border-top-left-radius:3px;border-bottom-left-radius:3px;-moz-border-radius:3px 0 0 3px;-webkit-border-radius:3px 0 0 3px;}</style>

<li class="post_count desc lighter">
<img src="{style_images_url}/sms.png"> <span style="color:#000000">{parse expression="$this->registry->getClass('class_localization')->formatNumber( intval( $author['posts'] ) )"}</span> <span style="color:#000000">{$this->lang->words['m_posts']}</span>
</li>
</div></ul><if test="authorcfields:|:$author['custom_fields'] != """>
<ul class="custom_fields"><div id="subplay">
<foreach loop="customFieldsOuter:$author['custom_fields'] as $group => $data">
				<foreach loop="customFields:$author['custom_fields'][ $group ] as $field">
					<if test="$field != ''">
						<li>
							{$field}
						</li>
					</if>
				</foreach>
			</foreach>
		</ul>
	</if>
<if test="authorwarn:|:$author['show_warn']">
			
				<if test="hasWarningId:|:$options['wl_id']">
					<img src='{$this->settings['img_url']}/warn.png' class='clickable' onclick='warningPopup( this, {$options['wl_id']} )' title='{$this->lang->words['warnings_issued']}' />
				</if>
				<a class='desc lighter blend_links' href='{parse url="app=members&amp;module=profile&amp;section=warnings&amp;member={$author['member_id']}&amp;from_app={$this->request['app']}&amp;from_id1={$contentid}&amp;from_id2={$options['id2']}" base="public"}' id='warn_link_{$contentid}_{$author['member_id']}' title='{$this->lang->words['warn_view_history']}'>{parse expression="sprintf( $this->lang->words['warn_status'], $author['warn_level'] )"}</a>
			
		</if>
	</ul>
</div>

Далее идем в ipb_styles.css

И заменяем 

.member_title {
И все что тут внутри 
}

на

.member_title {
margin-bottom: 5px;
word-wrap: break-word;
background: rgb(64,133,197);
color: white;
border: 1px solid rgb(18,63,112);
font-family: segoe ui;
font-weight: bold;
}

Далее заменяем 

.group_title { 
И все что тут находится 
}

На 

.group_title {
color: #5a5a5a;
margin-top: 5px;
}

и в низ ipb_styles.css добавляем

#subplay li {
text-align: left;
margin: 2px;
background: rgb(255,255,255) url({style_images_url}/bg2.png);
border: 1px solid rgb(35,161,221);
padding: 4px 4px;
}
.reputation-bg{
background:#e4e4e4;
background:-moz-linear-gradient(top, #e4e4e4 0%, #f7f7f7 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4e4e4), color-stop(100%,#f7f7f7));
background:-webkit-linear-gradient(top, #e4e4e4 0%,#f7f7f7 100%);
background:-o-linear-gradient(top, #e4e4e4 0%,#f7f7f7 100%);
background:-ms-linear-gradient(top, #e4e4e4 0%,#f7f7f7 100%);
background:linear-gradient(to bottom, #e4e4e4 0%,#f7f7f7 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#f7f7f7',GradientType=0);
border:1px solid #e4e4e4;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px
}
.reputation-bar{
background:url('reputation_bar.png') repeat-x 0 0;
border:1px solid;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
font:12px/23px Calibri,Arial,Tahoma,sans-serif;
height:21px;
margin:1px;
text-align:center;
text-shadow:0 1px 0 rgba(255,255,255,0.3)
}
.reputation-bar.gray{background-color:#a2a2a2;border-color:#6a6a6a;color:#6b6b6b}
.reputation-bar.red{background-color:#b00000;border-color:#910000;color:#6b0000}
.reputation-bar.blue{background-color:#008cd5;border-color:#006aa1;color:#00537f}
.reputation-bar.green{background-color:#20a601;border-color:#188000;color:#177a00}
.reputation-bar.gold{background-color:#ccb200;border-color:#b49d00;color:#958200}
.reputation-bar.width20{width:20%}
.reputation-bar.width40{width:40%}
.reputation-bar.width60{width:60%}
.reputation-bar.width80{width:80%}

и в public/style_images/ваш стиль

Добавляем эти иконки

post-16225-0-22918800-1398851639.png

post-16225-0-52133000-1398851663.png

comment_62300

Указание авторства содержит больше символов, чем название темы.. Как надоел уже этот школотизм.. ппц, видимо пришло время уходить на пенсию

    •
    Go to topic listing

    Последние посетители 0

    • No registered users viewing this page.