Мануал Новый профиль в боковой панели

Статус
В этой теме нельзя размещать новые ответы.
#Rips

#Rips

Специалист
Автор: Ciko


1.Перейти Админ-Панель-Внешний вид-Ваш стиль-Список форумов-boardIndexTemplate найти:

PHP: 
<foreach loop="side_blocks:$side_blocks as $block">
{$block}
</foreach>
2. Под ним вставить:

PHP: 
<if test="$this->memberData['member_id'] ">
<div class='ipsSideBlock'><div class='_sbcollapsable'>
	<div class="mobilebg">
		<input type="checkbox" id="tm" />
		<ul class="sidenav">
			<li><a href='{parse url="showuser={$this->memberData['member_id']}" seotitle="{$this->memberData['members_seo_name']}" template="showuser" base="public"}' title='{$this->lang->words['your_profile']}'><i class="fa fa-child"></i><b>{$this->lang->words['my_profile']}</b></a></li>
			<li><a href="{parse url="app=core&module=usercp" base="public"}" title="{$this->lang->words['cp_tool_tip']}"><i class="fa fa-cog"></i><b>{$this->lang->words['your_cp']}</b></a></li>
			<li><a href="{parse url="app=core&module=search&do=user_activity&mid={$this->memberData['member_id']}" base="public"}" title="{$this->lang->words['my_content_link']}"><i class="fa fa-comments"></i><b>{$this->lang->words['my_content_link']}</b></a></li>
			<li><if test="userLikeLink:|:count( IPSLib::getEnabledApplications('like') )">
<a href='{parse url="app=core&module=search&do=followed" base="public"}' title='{$this->lang->words['your_likes']}'><i class="fa fa-cog"></i><b>{$this->lang->words['your_likes']}</b></a></if></li>
			<li><if test="nobbyNoMates:|:$this->settings['friends_enabled'] && $this->memberData['g_can_add_friends']"><a href='{parse url="app=members&module=profile&section=friends&do=list" base="public"}' title="{$this->lang->words['manage_friends']}" class='manage_friends'><i class="fa fa-user-plus"></i><b>{$this->lang->words['manage_friends']}</b></a></if></li>
			<li><a href='{parse url="app=core&module=usercp&tab=core&area=ignoredusers" base="public"}' title="{$this->lang->words['manage_ignored_users']}" class='manage_enemies'><i class="fa fa-user-times"></i><b>{$this->lang->words['manage_ignored_users']}</b></a></li>
			<li><if test="pmLink:|:$this->memberData['members_disable_pm'] != 2 && $this->memberData['g_use_pm']"><a href="{parse url="app=members&module=messaging" base="public"}"><i class="fa fa-envelope"></i><b>{$this->lang->words['user_dd_go_pm']}</b></a></if></li>
                        <li><a href="{parse url="app=core&module=global&section=login&do=logout&k={$this->member->form_hash}" base="public"}" title='{$this->lang->words['log_out']}'><i class="fa fa-power-off"></i><b>{$this->lang->words['log_out']}</b></a></li>
		</ul>
		<section>
<div class="customBackground"></div>
<PHP>
$this->memberData['customization'] = @unserialize($this->memberData['pp_customization']);
</PHP>
<style type="text/css">
<if test="hasBodyCustomization:|:$this->memberData['customization']['bg_color'] OR $this->memberData['customization']['_bgUrl']">
.customBackground{
<if test="hasBackgroundColor:|:$this->memberData['customization']['bg_color']">
		background-color: #{$this->memberData['customization']['bg_color']} !important;
	</if>
	<if test="hasBackgroundImage:|:$this->memberData['customization']['bg_url']">
		background-image: url("{$this->settings['upload_url']}/{$this->memberData['customization']['bg_url']}?nc={$this->memberData['pp_profile_update']}") !important;
		<if test="backgroundIsFixed:|:! $this->memberData['customization']['bg_tile']">
			background-position: 50% 50%;
			background-repeat: no-repeat;
			-webkit-background-size: 100% 100%;
			-moz-background-size: 100% 100%;
			background-size: cover;
		<else />
			background-position: 50% 50%;
			background-repeat: repeat;
		</if>
	</if>
height: 500px;
left:0;
width: 268px !important;
position: relative;
}
</if>
</style>

			<label for="tm"><img src='{$this->memberData['pp_small_photo']}'  alt="{parse expression="sprintf($this->lang->words['users_photo'],$this->memberData['members_display_name'])"}" class='ipsUserPhoto1 ipsUserPhoto_mediumbg' style="width: 110px; height: 110px;
margin: -5px 5px 5px -5px;border-radius: 100%;border: 2px solid white;" /></label>


<div class='wa_repbg reputation_wa'>
							<if test="ourReputation:|:$this->settings['reputation_enabled'] && $this->settings['reputation_show_profile']">
								<if test="RepPositive:|:$this->memberData['pp_reputation_points'] > 0">
									<div class='reputation_wa positive' data-tooltip="{parse expression="sprintf( $this->lang->words['rep_description'], $this->memberData['members_display_name'], $this->memberData['pp_reputation_points'])"}">
								</if>
								<if test="RepNegative:|:$this->memberData['pp_reputation_points'] < 0">
									<div class='reputation_wa negative' data-tooltip="{parse expression="sprintf( $this->lang->words['rep_description'], $this->memberData['members_display_name'], $this->memberData['pp_reputation_points'])"}">
								</if>
								<if test="RepZero:|:$this->memberData['pp_reputation_points'] == 0">
									<div class='reputation_wa zero' data-tooltip="{parse expression="sprintf( $this->lang->words['rep_description'], $this->memberData['members_display_name'], $this->memberData['pp_reputation_points'])"}">
								</if>
										<span class='number'>{$this->memberData['pp_reputation_points']}</span>
										<if test="RepText:|:$this->memberData['author_reputation'] && $this->memberData['author_reputation']['text']">
											<span class='title'>{$this->memberData['author_reputation']['text']}</span>
										</if>
										<if test="RepImage:|:$this->memberData['author_reputation'] && $this->memberData['author_reputation']['image']">
											<span class='image'><img src='{$this->memberData['author_reputation']['image']}' alt='{$this->lang->words['m_reputation']}' /></span>
										</if>
									</div>
								
								<br />
							</if></div>
<div class="wa_userinfo_silence">
<if test="$this->memberData['field_3']">
  <a href="{$this->memberData['field_3']}" target="_blank" class="ipsButton_secondary ipsType_smaller"><img src="{style_images_url}/profile_website.png" style="width:20px;"></a>
<else />
<a style="opacity:0.2" target="_blank" class="ipsButton_secondary ipsType_smaller"><img style="width:20px;" src="{style_images_url}/profile_website.png"></a>
</if>
<if test="$this->memberData['field_10']">
  <a href=skype:{$this->memberData['field_10']}?call target="_blank" class="ipsButton_secondary ipsType_smaller"><img style="width:20px;" src="{style_images_url}/profile_skype.png"></a>
<else />
<a  style="opacity:0.2" target="_blank" class="ipsButton_secondary ipsType_smaller"><img style="width:20px;" src="{style_images_url}/profile_skype.png"></a>
</if>
<if test="$this->memberData['field_15']">
<a href="{$this->memberData['field_15']}" target="_blank" class="ipsButton_secondary ipsType_smaller"><img style="width:20px;" src="{style_images_url}/profile_vk.png"></a>
<else />
<a style="opacity:0.2" target="_blank" class="ipsButton_secondary ipsType_smaller"><img style="width:20px;" src="{style_images_url}/profile_vk.png"></a>
</if>
<if test="$this->memberData['field_14']">
<a href="{$this->memberData['field_14']}" target="_blank" class="ipsButton_secondary ipsType_smaller"><img style="width:20px;" src="{style_images_url}/profile_facebook.png"></a>
<else />
<a style="opacity:0.2" target="_blank" class="ipsButton_secondary ipsType_smaller"><img style="width:20px;" src="{style_images_url}/profile_facebook.png"></a>
</if>
  </div>
<div class='wastats'>
<if test="canUpdateStatus:|:$this->registry->getClass('memberStatus')->canCreate( $this->memberData ) && !($this->settings['board_offline'] && !$this->memberData['g_access_offline'])">
									<form id='statusForm' action='{$this->settings['base_url']}app=members&module=profile&section=status&do=new&k={$this->member->form_hash}&id={$this->memberData['member_id']}' method='post'>
										<input type='text' id='statusUpdateGlobal' name='content' class='input_text' style='width: 62%' placeholder='Статус ...'/>
										<input type='submit' id='statusSubmitGlobal' class='wa_ipsButton_secondary' value='{$this->lang->words['global_update_status']}' />
										<if test="update:|:(IPSLib::twitter_enabled() OR IPSLib::fbc_enabled() ) AND ( $this->memberData['fb_uid'] OR $this->memberData['twitter_id'] )">
											  
											<if test="updateTwitter:|:IPSLib::twitter_enabled() AND ( $this->memberData['twitter_id'] )"><input type='checkbox' id='su_TwitterGlobal' value='1' name='su_Twitter' /> <label for='su_TwitterGlobal' class='desc ipsType_smaller'>{$this->lang->words['su_cb_twitter']}</label></if>  
											<if test="updateFacebook:|:IPSLib::fbc_enabled() AND ( $this->memberData['fb_uid'] )"> <input type='checkbox' id='su_FacebookGlobal' value='1' name='su_Facebook' /> <label for='su_FacebookGlobal' class='desc ipsType_smaller'>{$this->lang->words['su_cb_facebook']}</label></if>
										</if>
										<br />
										<hr />
									</form>
								</if></div>
		</section>
	</div>
</div></div></if>

(Замените field_3 , 10 , 13 , 14 , 15 с ваши)
3.Перейти Админ Панель-Внешний вид-Ваш стиль-Нажмите Добавить CSS-файла.
4. Назовите его mobilebg.


PHP: 
* {
  margin: 0;
  padding: 0;
}


.mobilebg {
  position: relative;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/*Hiding the checkbox*/
#tm {
  display: none;
}

/*Content area*/
.mobilebg section {
  background: url({style_images_url}/wa_sbg_background.png );
  width: 268px;
  height: 500px;
  position: relative;
  transition: all 0.25s;
}

.mobilebg section label {
  color: white;
  font: bold 14px  helvetica, arial, sans-serif;
  text-align: center;
  display: block;
  padding: 10px 0;
  width: 60%;
  position: absolute;
  left: 22%;
  top: 100px;
  cursor: pointer;
  text-transform: uppercase;
}

/*Nav styles*/
.sidenav {
  background: #34495E;
  width: 150px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  padding-top: 50px;
}

.sidenav li {
  list-style-type: none;
}

.sidenav a {
  color: white;
  text-decoration: none;
}

.sidenav b {
  font: bold 12px/48px  helvetica, arial, sans-serif;
  display: block;
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.4s;
}

.sidenav i {
  display: block;
  width: 50px;
  float: left;
  font-size: 16px;
  line-height: 48px;
  text-align: center;
}
.wastats{
position: absolute;
  bottom: 15px;
  padding: 5px;
}
.wa_ipsButton_secondary{
  height: 26px;
  line-height: 22px;
  font-size: 12px;
  padding: 0 10px;
  background: #2980b9;
  border-radius: 2px;
  border: none;
  color: #FFFFFF;
  display: inline-block;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
}

.wa_userinfo_silence{
text-align: center;
  position: absolute;
  bottom: 70px;
  width: 268px;
 }
.pm_button img{
width: 20px;
}

.wa_repbg{
  position: absolute;
  bottom: 130px;
  width:268px;
  text-align: center;
}
.reputation_wa{
font-weight: bold;
  height: 40px;
  line-height: 40px;
}

	.reputation_wa.positive, .members li.positive {
background: #27AE60;
border: 1px solid #0F9447;
color: #fff;
	}
	
	.reputation_wa.negative, .members li.negative {
		background: #b82929;
                color: #fff;
	}
	
	.reputation_wa.positive, .reputation.negative {
		color: #fff;
	}
	
	.reputation_wa.zero {
		background: #dedede;
		color: #6e6e6e;
	}

/*Animation controls using checkbox hack*/
/*Animate content area to the right*/
#tm:checked ~ section {
  transform: translateX(150px);
}

/*Animate links from right to left + fade in effect*/
#tm:checked ~ .sidenav b {
  opacity: 1;
  transform: translateX(0);
}

/*Adding delay to link animation - in multiples of .08s*/
/*One can use jQuery also for creating the delayed effect. But I will stick to manual CSS for this walkthrough.*/
#tm:checked ~ .sidenav li:nth-child(1) b {
  transition-delay: 0.08s;
}

#tm:checked ~ .sidenav li:nth-child(2) b {
  transition-delay: 0.16s;
}

#tm:checked ~ .sidenav li:nth-child(3) b {
  transition-delay: 0.24s;
}

#tm:checked ~ .sidenav li:nth-child(4) b {
  transition-delay: 0.32s;
}

#tm:checked ~ .sidenav li:nth-child(5) b {
  transition-delay: 0.40s;
}

#tm:checked ~ .sidenav li:nth-child(6) b {
  transition-delay: 0.48s;
}

#tm:checked ~ .sidenav li:nth-child(7) b {
  transition-delay: 0.56s;
}

#tm:checked ~ .sidenav li:nth-child(8) b {
  transition-delay: 0.64s;
}
5. Загрузить эти изображения в вашей коже ( public/style_images/ваш скин)

Скачать тут:
Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!


6. Вставьте эту ссылку в globaltemplate в перед </header>

PHP: 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
 
Последнее редактирование:
Статус
В этой теме нельзя размещать новые ответы.
Сверху Снизу