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

Проблеми, въпроси, модове и темплейти.
Post Reply
testsistems
Нов
Нов
Posts: 11
Joined: Tue Jul 14, 2020 9:23 pm

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

Post by testsistems » Fri Jul 24, 2020 4:09 pm

В този урок ще Ви покажа как лесно може да добавите корица на профила подобна като във фейсбук. Следвайте стъпките във видеото и описанието!
https://www.youtube.com/watch?v=REtpEXBX_go
Стъпка №1
Стъпки в Админ панела:
  • Отваряте админ панела на форума;
  • Избирате "Потребители и групи";
  • След това избирате Допълнителни полета;
  • Следвайте стъпките за създаване на допълнителното поле.
    • Идентификация на полето: phpbb_cover
    • Покажи в контролния панел на потребителите: ДА
    • Име на полето [BG]: Корица на профила
    • Име на полето [EN]: Profil Cover
    • Дължина: 50
    • Минимум позволени знаци в полето: 5
    • Максимум позволени знаци в полето: 200
Image
Image
Image
Image
Стъпка №2
Файлове които ще редактираме:
  • root/style/your_style/theme/common.css
  • root/style/your_style/template/memberlist_view.html
В root/style/your_style/theme/common.css най-отдолу добавяте:

Code: Select all

/* 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 намирате:

Code: Select all

<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>
И замествате с:

Code: Select all

<!-- 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
Резултати
Image
Време е да добавим нашата корица на профила
Отивате в Потребителски панел/Личен профил и най-отдолу ще намерите прозореца "Корица на профила"
Image
Когато сме на линия:
Image
Когато сме извън линия
Image
При нужда от помощ, моля свържете се с мен!
Моля поставяйте линк към оригиналната тема ако копирате урока във вашият сайт!

Източник: phpBB България
You do not have the required permissions to view the files attached to this post.

Post Reply