3.2.x 3.2.x SnippetsProfile cover and header like IPB 4 for phpbb 3.2

Snippets
Previous topicNext topic
User avatar

Topic Author
salazardeaguiar
Users
Users
Magic user status: Offline
Posts: 47
Joined: Dec 6th, '15, 19:47
    Windows 7 Firefox

Profile cover and header like IPB 4 for phpbb 3.2

Post by salazardeaguiar »

Hi guys, I'm from the "phpbb Brazil Support" team and I developed a tutorial there on the site for profile cover and header similar to IPBoard 4.2.x using profile fields. The original post link is this: http://www.suportephpbb.com.br/viewtopi ... 69&t=49558

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.

Image

On the next screen, just check the Display in user control panel:

Image

In the next screen, under Options specific to the profile type, you can leave as the image shows.

Image

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 -->
REPLACE WITH:

Code: Select all

<!-- BEGIN custom_fields -->
		<!-- IF not custom_fields.S_PROFILE_CONTACT and not custom_fields.S_PROFILE_CAPA  -->

FIND:

Code: Select all

<div class="panel bg1<!-- IF S_ONLINE --> online<!-- ENDIF -->">
REPLACE WITH:

Code: Select all

<div class="panel bg1">
FIND:

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 -->&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>
REPLACE WITH:

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 -->
If you prefer, create a file called custom.css. If not, use the common.CSS

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:
no_cover.jpg
To set your profile cover, go to UCP - Profile

Image

RESULTADOS:

With cover defined in UCP

Image

Image

Image

WITHOUT COVER DEFINED IN UCP:

Image

- 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.
You do not have the required permissions to view the files attached to this post.
User avatar

uruguayito
Donator
Donator
Magic user status: Offline
Posts: 123
Joined: Jul 2nd, '15, 17:40
    Windows 8.1 Chrome

Re: Profile cover and header like IPB 4 for phpbb 3.2

Post by uruguayito »

Nice Snippet
thank you :thumbup:
Sorry for my bad English. :oops:
I'm a latin american man.
Spanish is my language.
User avatar

Barrybrennan
Users
Users
Magic user status: Offline
Posts: 12
Joined: Mar 5th, '17, 02:26
    Windows 10 Chrome

Re: Profile cover and header like IPB 4 for phpbb 3.2

Post by Barrybrennan »

Were is the download link ? :eyes2:
User avatar

martin
Admin
Admin
Magic user status: Offline
Posts: 4793
Joined: Apr 6th, '14, 14:12
    Ubuntu Chrome

Re: Profile cover and header like IPB 4 for phpbb 3.2

Post by martin »

Barrybrennan wrote: Oct 1st, '17, 13:51 were is the download link ? :eyes2:
There is none it's an edit not an ext.
Use this to install an ext on your board no more ftp or path making.
Path too install this ext is ext/boardtools/upload
Download is here Make it easy for us to solve your issues
User avatar

jan_2017
Users
Users
Magic user status: Offline
Posts: 203
Joined: Feb 5th, '17, 09:21
    Android Chrome

Re: Profile cover and header like IPB 4 for phpbb 3.2

Post by jan_2017 »

martin wrote: Oct 1st, '17, 14:15
Barrybrennan wrote: Oct 1st, '17, 13:51 were is the download link ? :eyes2:
There is none it's an edit not an ext.
Look at this...
https://github.com/msaulohenrique/aps/r ... /tag/1.0.0

Do you mean this?

Bye Jan
User avatar

martin
Admin
Admin
Magic user status: Offline
Posts: 4793
Joined: Apr 6th, '14, 14:12
    Ubuntu Chrome

Re: Profile cover and header like IPB 4 for phpbb 3 2

Post by martin »

testmeml wrote: Apr 13th, '18, 10:50 Hi Movint

Please post in english here i dont understand your text
and other user

Yeah Movint post in english :wtf: who is Movint ? no one by that name posted in this topic. :rolling:
User avatar

dmzx
Founder
Founder
Magic user status: Offline
Posts: 5974
Joined: Jan 13th, '14, 20:45
    Ubuntu Chrome

Re: Profile cover and header like IPB 4 for phpbb 3 2

Post by dmzx »

martin wrote: Apr 13th, '18, 16:56
testmeml wrote: Apr 13th, '18, 10:50 Hi Movint

Please post in english here i dont understand your text
and other user

Yeah Movint post in english :wtf: who is Movint ? no one by that name posted in this topic. :rolling:

Indeed also did not find that member... :shock:
binance.com ;) try it!
User avatar

Napster
Users
Users
Magic user status: Offline
Posts: 25
Joined: Sep 15th, '15, 13:35
    Windows 10 Firefox

Re: Profile cover and header like IPB 4 for phpbb 3.2

Post by Napster »

Someone call mulder and scully we have a missing person :rolling: :whistl:
User avatar

martin
Admin
Admin
Magic user status: Offline
Posts: 4793
Joined: Apr 6th, '14, 14:12
    Ubuntu Chrome

Re: Profile cover and header like IPB 4 for phpbb 3.2

Post by martin »

Aliens ? you think :eyes2:
User avatar

Mr Fire
Users
Users
Magic user status: Offline
Posts: 3
Joined: May 6th, '18, 00:20
    Windows 10 Chrome

Re: Profile cover and header like IPB 4 for phpbb 3.2

Post by Mr Fire »

This available for 3.2 the newer version?
User avatar

mr.franta
Users
Users
Magic user status: Offline
Posts: 11
Joined: Feb 17th, '19, 15:43
    Windows 7 Chrome

Re: Profile cover and header like IPB 4 for phpbb 3.2

Post by mr.franta »

Nice tutorial :)
User avatar

d3ath2435
Users
Users
Magic user status: Offline
Posts: 12
Joined: Apr 18th, '20, 22:51
    Windows 10 Chrome

Re: Profile cover and header like IPB 4 for phpbb 3.2

Post by d3ath2435 »

video?mode=view&id=262

I made some changes to the code and the visualization! I also made a video of the steps! I'm sorry it's not in your language, but the steps are shown and are easy to follow. :tumbsyes:
User avatar

RazvanAlexandru
Users
Users
Magic user status: Offline
Posts: 16
Joined: Jul 16th, '20, 19:57
    Windows 10 Chrome

Re: Profile cover and header like IPB 4 for phpbb 3.2

Post by RazvanAlexandru »

I was just lookinf for that, thank you
User avatar

sickkick
New user
New user
Magic user status: Offline
Posts: 1
Joined: Nov 17th, '21, 00:40
    Windows 10 Chrome

Re: Profile cover and header like IPB 4 for phpbb 3.2

Post by sickkick »

Hello,

I encounter a problem with the script, I will post a screenshot here to show you what I mean https://i.ibb[dot]co/q7W0YC5/1.png

I want the buttons like edit profile and administer user to be a little bit more highlighted, because if it's another cover that it's white, the buttons will be almost invisible.

And also, if it's possible, the statistics from the profile layout to be a little bit more rearranged.

Thank you!
Previous topicNext topic