I will translate it so that you can take advantage and leave your suggestions:
This tutorial, in its previous version, was intended to teach you how to manually make a profile cover for your forum phpbb 3.1.x or 3.2.x using custom profile fields. For a while I improved some things and I tried to bring a header very similar to ipboard, so that it is complete. Let's use the prosilver style as a basis.
RECOMMENDATION: Although we will use prosilver, we do not recommend making changes to the default phpbb style. This is because, when updating, you will lose your changes in file substitutions. Ideally you create a style based on prosilver and make all changes in it.
CREATING THE COVER - ACP PROFILE FIELD
Go to ACP > USERS AND GROUPS > Custom profile fields.in the footer, set the name to capa and choose the type URL (link), as shown in the image below. Then click Create new field.
On the next screen, just check the Display in user control panel:
In the next screen, under Options specific to the profile type, you can leave as the image shows.
Save your new profile field. Do not forget, his name is capa
IN TEMPLATE
Remember, we are using a prosilver-based template, so if you do not find the codes below it is possible that your style will be greatly modified.
Open root/styles/seuestilo/template/memberlist_view.html
FIND:
Code: Select all
<!-- BEGIN custom_fields -->
<!-- IF not custom_fields.S_PROFILE_CONTACT -->Code: Select all
<!-- BEGIN custom_fields -->
<!-- IF not custom_fields.S_PROFILE_CONTACT and not custom_fields.S_PROFILE_CAPA -->
Code: Select all
<div class="panel bg1<!-- IF S_ONLINE --> online<!-- ENDIF -->">
Code: Select all
<div class="panel bg1">
Code: Select all
<!-- 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>
<!-- IF USER_COLOR --><span style="color: {USER_COLOR}; font-weight: bold;"><!-- ELSE --><span><!-- ENDIF -->{USERNAME}</span>
<!-- 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 --> <!-- 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> </dt> <dd class="zebra"><a href="{U_REMOVE_FRIEND}" data-ajax="zebra"><strong>{L_REMOVE_FRIEND}</strong></a></dd>
<!-- ELSEIF U_REMOVE_FOE -->
<dt> </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> </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> </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>
Code: Select all
<!-- INÍCIO DO HEADER -->
<div class="capa-de-perfil-imagem">
<!-- IF S_PROFILE_CAPA -->
<img src="{PROFILE_CAPA_VALUE_RAW}" class="header-customizado" />
<!-- ELSE -->
<img src="{T_THEME_PATH}/images/no_cover.jpg" class="header-customizado" />
<!-- ENDIF -->
<!-- Início da coluna com avatar e informações -->
<div class="colunaPerfil">
<div style="display:block" class="colunaAvatar">
<!-- IF AVATAR_IMG -->
{AVATAR_IMG}
<!-- ELSE -->
<img src="{T_THEME_PATH}/images/no_avatar.gif" />
<!-- ENDIF -->
</div>
<strong class="box-nick box-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>
<br/><br/>
<strong class="box-nick" style="line-height:0px;font-size:17px">{RANK_TITLE}</strong>
<br><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>
<!-- FIM DO HEADER -->
Open root/styles/seuestilo/theme/common.css
ADD ANYWHERE, OF PREFERENCE AT THE END[/c]
Code: Select all
/* Capa de perfil por LucasLV */
@media (max-width: 700px) {
.capa-de-perfil-imagem {
height: auto;
}
}
@media (min-width: 700px) {
.capa-de-perfil-imagem {
height: 310px;
}
}
@media (max-width: 700px) {
.hide-mobile {
display: none;
}
}
.capa-de-perfil-imagem {
width: 100%;
overflow: hidden;
position: relative;
}
.capa-de-perfil-imagem > .header-customizado {
width: 100%;
}
.colunaPerfil {
color: #fff;
padding: 12px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
min-height: 80px;
box-sizing: border-box;
flex-direction: row;
flex: 0;
flex-wrap: nowrap; }
.colunaAvatar {
top: 15px;
left: 10px;
width: 130px;
height: 130px;
overflow:hidden;
margin-right:19px;
float: left; }
.colunaAvatar img {
width: 130px;
height: auto;
}
#online {
color: #228B22;
font-size: 27px;
vertical-align: middle;
margin-right: 6px;
}
#offline {
color: #BEBEBE;
font-size: 27px;
vertical-align: middle;
margin-right: 6px;
}
.box-nick {
background-color: rgba(0,0,0,.3);
padding: 7px 10px;
text-shadow: 0px 0px 4px rgba(0,0,0,0.5);
width: auto;}
.box-user {
color: #fff;
font-size: 33px;
}
/* Fim do perfil */
Now, send the image no_cover.jpg for folder /theme/images to appear for users who do not have a profile layer defined.
Download below:
To set your profile cover, go to UCP - Profile
RESULTADOS:
With cover defined in UCP
WITHOUT COVER DEFINED IN UCP:
- It is responsive (by the tests that I did everything is well adjusted, but anything is just talking)
- I do not intend to launch in extension, because I do not even know how to do this
- The default header has height of 310pixels and has been set on the mobile phone so it does not cause those whitespace when setting height and width of an element at other resolutions. I do not fully dominate CSS, any suggestions are much more than welcome.
who is Movint ? no one by that name posted in this topic. 
