NecheB
Registered
В този урок ще Ви покажа как лесно може да добавите корица на профила подобна като във фейсбук. Следвайте стъпките във видеото и описанието!
https://www.youtube.com/watch?v=REtpEXBX_go
Стъпка №1
Стъпки в Админ панела:
Стъпка №2
Файлове които ще редактираме:
В root/style/your_style/theme/common.css най-отдолу добавяте:
След това в root/style/your_style/template/memberlist_view.html намирате:
И замествате с:
Файлове които ще са ни нужни:
Слагате файла в root/styles/your_style/theme/images/
Виж файлът no_cover.rar
Стъпка №3
Резултати
Време е да добавим нашата корица на профила
Отивате в Потребителски панел/Личен профил и най-отдолу ще намерите прозореца "Корица на профила"
Когато сме на линия:
Когато сме извън линия
При нужда от помощ, моля свържете се с мен!
Моля поставяйте линк към оригиналната тема ако копирате урока във вашият сайт!
Източник: phpBB България
https://www.youtube.com/watch?v=REtpEXBX_go
Стъпка №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 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
Резултати
Време е да добавим нашата корица на профила
Отивате в Потребителски панел/Личен профил и най-отдолу ще намерите прозореца "Корица на профила"
Когато сме на линия:
Когато сме извън линия
При нужда от помощ, моля свържете се с мен!
Моля поставяйте линк към оригиналната тема ако копирате урока във вашият сайт!
Източник: phpBB България