Перейти к содержанию

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

SanyaSamp

Автор SanyaSamp
в Корзина

 Поделиться

Рекомендуемые сообщения

SanyaSamp Ментор

SanyaSamp

Опубликовано
Опубликовано

Скоро выйдет первая версия моего стиля (Пока еще сырая версия).  А пока я расскажу как сделать такую вот 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

Ссылка на комментарий
Поделиться на другие сайты
SanyaSamp Ментор

SanyaSamp

Опубликовано
  • Автор
Опубликовано

Меня просили рипнуть, я рипнул. Кому то нравиться, кому то нет

Ссылка на комментарий
Поделиться на другие сайты
KitsuneSolar Опытный

KitsuneSolar

Опубликовано
Опубликовано

Согласен в Женькой.

Имхо, уродство.

Ссылка на комментарий
Поделиться на другие сайты
Respected Солдат мафии

Respected

Опубликовано
Опубликовано

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

Ссылка на комментарий
Поделиться на другие сайты
 Поделиться
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...