[ВИДЕО] Как да добавим корица на профила

NecheB

Registered
В този урок ще Ви покажа как лесно може да добавите корица на профила подобна като във фейсбук. Следвайте стъпките във видеото и описанието!

https://www.youtube.com/watch?v=REtpEXBX_go

Стъпка №1
Стъпки в Админ панела:
  • Отваряте админ панела на форума;
  • Избирате "Потребители и групи";
  • След това избирате Допълнителни полета;
  • Следвайте стъпките за създаване на допълнителното поле.
    • Идентификация на полето: phpbb_cover
    • Покажи в контролния панел на потребителите: ДА
    • Име на полето [BG]: Корица на профила
    • Име на полето [EN]: Profil Cover
    • Дължина: 50
    • Минимум позволени знаци в полето: 5
    • Максимум позволени знаци в полето: 200

UUu1ppM.png

miJ06EA.png

XBxDzNQ.png

yJsGsCm.png


Стъпка №2
Файлове които ще редактираме:
  • root/style/your_style/theme/common.css
  • root/style/your_style/template/memberlist_view.html

В root/style/your_style/theme/common.css най-отдолу добавяте:
Код:
/* PHPBB-BG COVER EDITION */
@media (max-width: 700px) {
	.cover-de-perfil-imagem {
		height: auto;
	}
}


@media (min-width: 700px) {
	.cover-settings {
		height: 310px;
	}
}

@media (max-width: 700px) {
	.hide-mobile {
		display: none;
	}
}


.cover-settings {
  width: 100%;
  overflow: hidden;
  position: relative;
    background-position: center top;
}

.cover-possition {
	color: #fff;
	padding: 25px;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: 80px;
	box-sizing: border-box;
	flex-direction: row;
	flex: 0;
	flex-wrap: nowrap; }

.cover-avatar {
	top: 15px;
	left: 10px;
	width: 130px;
	height: 130px;
	overflow:hidden;
	margin-right:19px;
	float: left; 
	border-radius: 100%;
	border:2px solid #FFF;
	}
	

.cover-avatar img {
	width: 130px;
	height: auto;
}

#online {
	color: #228B22;
	font-size: 10px;
	vertical-align: middle;
	margin-right: 6px;
}

#offline {
	color: #BF0000;
	font-size: 10px;
	vertical-align: middle;
	margin-right: 6px;
}

.cover-nick {
	background-color: rgba(0,0,0,.3);
	padding: 7px 10px;
	text-shadow: 0px 0px 4px rgba(0,0,0,0.5);
	width: auto;}

.cover-user {
	color: #fff;

}
	
/* Cover settins END */

След това в root/style/your_style/template/memberlist_view.html намирате:
Код:
<div class="panel bg1 online">
	<div class="inner">

	
		<dl class="left-box">
			<dt class="profile-avatar">{AVATAR_IMG}</dt>
			
			<dd style="text-align: center;">{RANK_TITLE}</dd>
			<dd style="text-align: center;">{RANK_IMG}</dd>
			
		</dl>
	

	<dl class="left-box details profile-details">
		<dt>{L_USERNAME}{L_COLON}</dt>
		<dd>
			<span style="color: {USER_COLOR}; font-weight: bold;"><span>{USERNAME}</span>
			 [ <a href="{U_EDIT_SELF}">{L_EDIT_PROFILE}</a> ]
			 [ <a href="{U_USER_ADMIN}">{L_USER_ADMIN}</a> ]
			 [ <a href="{U_USER_BAN}">{L_USER_BAN}</a> ]
			 [ <a href="{U_SWITCH_PERMISSIONS}">{L_USE_PERMISSIONS}</a> ]
		</dd>
		
			
			<dt>{L_RANK}{L_COLON}</dt> <dd>{RANK_TITLE}</dd>
			<dt> {L_RANK}{L_COLON}</dt> <dd>{RANK_IMG}</dd>
			
		
		<dt>{L_USER_IS_INACTIVE}{L_COLON}</dt> <dd>{USER_INACTIVE_REASON}</dd>
		<dt>{L_AGE}{L_COLON}</dt> <dd>{AGE}</dd>
		<dt>{L_USERGROUPS}{L_COLON}</dt> <dd><select name="g">{S_GROUP_OPTIONS}</select> <input type="submit" name="submit" value="{L_GO}" class="button2" /></dd>
		
		
			
				<dt>{custom_fields.PROFILE_FIELD_NAME}{L_COLON}</dt> <dd>{custom_fields.PROFILE_FIELD_VALUE}</dd>
			
		
		
		
		
			
				<dt> </dt> <dd class="zebra"><a href="{U_REMOVE_FRIEND}" data-ajax="zebra"><strong>{L_REMOVE_FRIEND}</strong></a></dd>
			
				<dt> </dt> <dd class="zebra"><a href="{U_REMOVE_FOE}" data-ajax="zebra"><strong>{L_REMOVE_FOE}</strong></a></dd>
			
				
					<dt> </dt> <dd class="zebra"><a href="{U_ADD_FRIEND}" data-ajax="zebra"><strong>{L_ADD_FRIEND}</strong></a></dd>
				
				
					<dt> </dt> <dd class="zebra"><a href="{U_ADD_FOE}" data-ajax="zebra"><strong>{L_ADD_FOE}</strong></a></dd>
				
			
		
		
	</dl>

	</div>
</div>

И замествате с:

Код:
<div class="panel" style="background:#228B22;padding: 3px 3px;"><div class="panel" style="background:#BF0000;padding: 3px 3px;">
	<div class="inner">

		
<div class="cover-settings">

<div style="position: relative; background: #000 url({PROFILE_PHPBB_COVER_VALUE_RAW}); border-radius: 8px; background-size: cover; background-position: center; border-top: 1px solid #000; border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; box-shadow: 0 1px 3px #000; line-height: 16px; font-weight: 700; padding: 3px; height: 300px;"></div>

<div style="position: relative;background: #000 url({T_THEME_PATH}/images/no_cover.jpg);border-radius: 8px;background-size: cover;background-position: center;border-top: 1px solid #000;border-bottom: 1px solid #000;border-left: 1px solid #000;border-right: 1px solid #000;box-shadow: 0 1px 3px #000;line-height: 16px;font-weight: 700;padding: 3px;height: 300px;"></div>



	<div class="cover-possition"> 
		<div style="display:block" class="cover-avatar">
			
					{AVATAR_IMG}
			
					<img src="{T_THEME_PATH}/images/no_avatar.gif" />
			
		</div>
		<div style="border-radius: 4px;display: block;margin-right: 5px;margin-top: 50px;">
		<strong class="cover-nick cover-user"><i id="online" class="fa fa-circle" aria-hidden="true" title="Online"></i><i id="offline" class="fa fa-circle" aria-hidden="true" title="Offline"></i><span style="vertical-align:middle;display:inline;">{USERNAME}</span></strong>
		
		<strong class="cover-nick" style="line-height:0px;">{RANK_TITLE}</strong></br></br>
		
		
			<a href="{U_REMOVE_FRIEND}" data-ajax="zebra" class="hide-mobile button"><i class="fa fa-minus-circle"></i><span>{L_REMOVE_FRIEND}</span></a><a href="{U_REMOVE_FOE}" data-ajax="zebra" class="hide-mobile button"><i class="fa fa-minus-circle"></i><span>{L_REMOVE_FOE}</span></a><a href="{U_ADD_FRIEND}" data-ajax="zebra" class="hide-mobile button"><i class="fa fa-smile-o"></i><span>{L_ADD_FRIEND}</span></a><a href="{U_ADD_FOE}" data-ajax="zebra" class="hide-mobile button"><i class="fa fa-frown-o"></i><span>{L_ADD_FOE}</span></a>
		
		
		
			<a href="{U_EDIT_SELF}" class="hide-mobile button"><i class="fa fa-pencil-square-o" aria-hidden="true"></i><span>{L_EDIT_PROFILE}</span></a>
		
		
			<a href="{U_USER_ADMIN}" class="hide-mobile button"><i class="fa fa-pencil" aria-hidden="true"></i><span>{L_USER_ADMIN}</span></a>
		
		
			<a href="{U_USER_BAN}" class="hide-mobile button"><i class="fa fa-ban" aria-hidden="true"></i><span>{L_USER_BAN}</span></a>
		
		
			<a href="{U_SWITCH_PERMISSIONS}" class="hide-mobile button"><i class="fa fa-user" aria-hidden="true"></i><span>{L_USE_PERMISSIONS}</span></a>
		
	</div></div>
	
</div>


	</div>
</div>
Файлове които ще са ни нужни:
Слагате файла в root/styles/your_style/theme/images/
Виж файлът no_cover.rar

Стъпка №3
Резултати
UkLzO4n.png


Време е да добавим нашата корица на профила
Отивате в Потребителски панел/Личен профил и най-отдолу ще намерите прозореца "Корица на профила"
C5nku4F.png


Когато сме на линия:
7Nb2CoA.png


Когато сме извън линия
MgQviak.png


При нужда от помощ, моля свържете се с мен!
Моля поставяйте линк към оригиналната тема ако копирате урока във вашият сайт!

Източник: phpBB България
 

Горе