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

В този раздел ще намерите много интересни уроци, които може да са Ви от голяма полза!
Публикувай отговор
Аватар
NecheB
Администратор
Администратор
Мнения: 352
Регистриран на: 06 Авг 2021, 22:20
Местоположение: Maidstone
Обратна връзка:

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

Мнение от NecheB »

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

Стъпка №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 ;**
Моля поставяйте линк към оригиналната тема ако копирате урока във вашият сайт!


Последно издигане NecheB от 31 Окт 2021, 11:30
Подкрепете ни, като направите дарение
Искаш форум? Трябват ти хостинг и домейн? Мога да уредя всичко от което се нуждаеш! Свържи се с мен за допълнителна информация и цени!
Изображение
Хостинг и Домейни на % ТОП Цени, Планове от 2.90 лв. | Jump.bg!
Публикувай отговор

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

Трябва да сте член, за да публикувате отговор

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

Не сте член? Регистрирайте се, за да се присъедините към нашата общност
Членовете могат да стартират свои теми и да се абонират за теми
Безплатно е и отнема само минутка

Регистрация

Влезте

Обратно към “Допълнителни уроци”