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

YouTube · Мнение от **NecheB** » 31 Окт 2021, 11:30

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

Стъпка №1
Стъпки в Админ панела:

Отваряте админ панела на форума;

Избирате "Потребители и групи";

След това избирате Допълнителни полета;

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

Стъпка №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<!-- IF S_ONLINE --> online<!-- ENDIF -->">
	<div class="inner">

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

	<dl class="left-box details profile-details">
		<dt>{L_USERNAME}{L_COLON}</dt>
		<dd>
			<!-- EVENT memberlist_view_username_prepend --><!-- IF USER_COLOR --><span style="color: {USER_COLOR}; font-weight: bold;"><!-- ELSE --><span><!-- ENDIF -->{USERNAME}</span><!-- EVENT memberlist_view_username_append -->
			<!-- IF U_EDIT_SELF --> [ <a href="{U_EDIT_SELF}">{L_EDIT_PROFILE}</a> ]<!-- ENDIF -->
			<!-- IF U_USER_ADMIN --> [ <a href="{U_USER_ADMIN}">{L_USER_ADMIN}</a> ]<!-- ENDIF -->
			<!-- IF U_USER_BAN --> [ <a href="{U_USER_BAN}">{L_USER_BAN}</a> ]<!-- ENDIF -->
			<!-- IF U_SWITCH_PERMISSIONS --> [ <a href="{U_SWITCH_PERMISSIONS}">{L_USE_PERMISSIONS}</a> ]<!-- ENDIF -->
		</dd>
		<!-- IF not AVATAR_IMG -->
			<!-- EVENT memberlist_view_rank_no_avatar_before -->
			<!-- IF RANK_TITLE --><dt>{L_RANK}{L_COLON}</dt> <dd>{RANK_TITLE}</dd><!-- ENDIF -->
			<!-- IF RANK_IMG --><dt><!-- IF RANK_TITLE -->&nbsp;<!-- ELSE -->{L_RANK}{L_COLON}<!-- ENDIF --></dt> <dd>{RANK_IMG}</dd><!-- ENDIF -->
			<!-- EVENT memberlist_view_rank_no_avatar_after -->
		<!-- ENDIF -->
		<!-- IF S_USER_INACTIVE --><dt>{L_USER_IS_INACTIVE}{L_COLON}</dt> <dd>{USER_INACTIVE_REASON}</dd><!-- ENDIF -->
		<!-- IF AGE !== '' --><dt>{L_AGE}{L_COLON}</dt> <dd>{AGE}</dd><!-- ENDIF -->
		<!-- IF S_GROUP_OPTIONS --><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><!-- ENDIF -->
		<!-- EVENT memberlist_view_non_contact_custom_fields_before -->
		<!-- BEGIN custom_fields -->
			<!-- IF not custom_fields.S_PROFILE_CONTACT -->
				<dt>{custom_fields.PROFILE_FIELD_NAME}{L_COLON}</dt> <dd>{custom_fields.PROFILE_FIELD_VALUE}</dd>
			<!-- ENDIF -->
		<!-- END custom_fields -->
		<!-- EVENT memberlist_view_non_contact_custom_fields_after -->
		<!-- EVENT memberlist_view_zebra_before -->
		<!-- IF S_USER_LOGGED_IN and S_ZEBRA -->
			<!-- IF U_REMOVE_FRIEND -->
				<dt>&nbsp;</dt> <dd class="zebra"><a href="{U_REMOVE_FRIEND}" data-ajax="zebra"><strong>{L_REMOVE_FRIEND}</strong></a></dd>
			<!-- ELSEIF U_REMOVE_FOE -->
				<dt>&nbsp;</dt> <dd class="zebra"><a href="{U_REMOVE_FOE}" data-ajax="zebra"><strong>{L_REMOVE_FOE}</strong></a></dd>
			<!-- ELSE -->
				<!-- IF U_ADD_FRIEND -->
					<dt>&nbsp;</dt> <dd class="zebra"><a href="{U_ADD_FRIEND}" data-ajax="zebra"><strong>{L_ADD_FRIEND}</strong></a></dd>
				<!-- ENDIF -->
				<!-- IF U_ADD_FOE -->
					<dt>&nbsp;</dt> <dd class="zebra"><a href="{U_ADD_FOE}" data-ajax="zebra"><strong>{L_ADD_FOE}</strong></a></dd>
				<!-- ENDIF -->
			<!-- ENDIF -->
		<!-- ENDIF -->
		<!-- EVENT memberlist_view_zebra_after -->
	</dl>

	</div>
</div>

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

Код: Избери целия код

<!-- IF S_ONLINE --><div class="panel" style="background:#228B22;padding: 3px 3px;"><!-- ELSE --><div class="panel" style="background:#BF0000;padding: 3px 3px;"><!-- ENDIF -->
	<div class="inner">

		<!-- PHPBB COVER -->
<div class="cover-settings">
<!-- IF S_PROFILE_PHPBB_COVER -->
<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>
<!-- ELSE -->
<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>

<!-- ENDIF -->
<!-- Column top with avatar and information -->
	<div class="cover-possition"> 
		<div style="display:block" class="cover-avatar">
			<!-- IF AVATAR_IMG -->
					{AVATAR_IMG}
			<!-- ELSE -->
					<img src="{T_THEME_PATH}/images/no_avatar.gif" />
			<!-- ENDIF -->
		</div>
		<div style="border-radius: 4px;display: block;margin-right: 5px;margin-top: 50px;">
		<strong class="cover-nick cover-user"><!-- IF S_ONLINE --><i id="online" class="fa fa-circle" aria-hidden="true" title="Online"></i><!-- ELSE --><i id="offline" class="fa fa-circle" aria-hidden="true" title="Offline"></i><!-- ENDIF --><span style="vertical-align:middle;display:inline;">{USERNAME}</span></strong>
		
		<strong class="cover-nick" style="line-height:0px;">{RANK_TITLE}</strong></br></br>
		<!-- IF S_USER_LOGGED_IN and S_ZEBRA -->
		<!-- EVENT memberlist_view_zebra_before -->
			<!-- IF U_REMOVE_FRIEND --><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><!-- ELSEIF U_REMOVE_FOE --><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><!-- ELSE --><!-- IF U_ADD_FRIEND --><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><!-- ENDIF --><!-- IF U_ADD_FOE --><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><!-- ENDIF --><!-- ENDIF -->
		<!-- ENDIF -->
		<!-- EVENT memberlist_view_zebra_after -->
		<!-- IF U_EDIT_SELF -->
			<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>
		<!-- ENDIF -->
		<!-- IF U_USER_ADMIN -->
			<a href="{U_USER_ADMIN}" class="hide-mobile button"><i class="fa fa-pencil" aria-hidden="true"></i><span>{L_USER_ADMIN}</span></a>
		<!-- ENDIF -->
		<!-- IF U_USER_BAN -->
			<a href="{U_USER_BAN}" class="hide-mobile button"><i class="fa fa-ban" aria-hidden="true"></i><span>{L_USER_BAN}</span></a>
		<!-- ENDIF -->
		<!-- IF U_SWITCH_PERMISSIONS -->
			<a href="{U_SWITCH_PERMISSIONS}" class="hide-mobile button"><i class="fa fa-user" aria-hidden="true"></i><span>{L_USE_PERMISSIONS}</span></a>
		<!-- ENDIF -->
	</div></div>
	
</div>
<!-- PHPBB COVER END -->

	</div>
</div>

Файлове които ще са ни нужни:
Слагате файла в root/styles/your_style/theme/images/

no_cover.rar

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

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

Когато сме на линия:

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

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

!	Съобщение от: NecheB ;**
	Моля поставяйте линк към оригиналната тема ако копирате урока във вашият сайт!

phpBB България

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

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

Създайте акаунт или влезте, за да се присъедините към дискусията

Създай акаунт

Влез