MyBB-Es.com     Personalización y configuración de los foros MyBB     Tutoriales / Guías    

1.8 Perfil con portada y estado estilo Facebook

angeluz   25 Nov, 2020, 5:14 pm
#1
Buenas a todos hoy les traigo un tutorial con el que obtendrán un perfil estilo facebook (con portada), una imagen dice más que mil palabras:
[Imagen: 0.jpg]

Lo primero es crear dos campos de perfil personalizados en tu ACP -> Configuración -> campos de perfil personalizados -> agregar campo de perfil

Primero tendrás que crear dos campos:
1.- Portada- crear como caja de texto y visible y editable por todos.
Expresión regular:
 (http(s?):)|([/|.|\w|\s])*\.(?:jpg|gif|png)
2.- Estado - Crear como área de texto y visible y editable por todos.
Deberás obtener el FID de ellos, solo coloca el mouse sobre ellos en el acp y te saldrá la url en tu navegador donde al final dirá edit&fid=X
El número que salga en la X es lo que necesitamos Big Grin

Ahora vamos a nuestro estilo y creamos una hoja de estilo con el nombre que gustes (recuerda que debe de terminar en .css o dará error), le damos en escribir nuestro código y pega lo siguiente:
#perfil{
padding: 0;
margin: 0;
position: relative;
}
.fotoperfil{
max-height: 300px;
width: 100%;
}
.perfilstatus{
position: relative;
    background: rgb(0 0 0 / 50%);
    height: 75px;
    width: 100%;
    text-align: left;
    display: table;
    margin-top: -75px;
    color: #fff;
    font-size: 14px;
}

.profile_avatar{
width: 10%;
    margin: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    vertical-align: middle;
    display: table-cell;
}

.profile_avatar img{
border: 2px solid rgb(255 255 255);
    box-shadow: 0 0 1px #ddd;
    height: 60px;
    width: 60px;
    border-radius: 50%;	
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.profiletra{
padding: 10px;
    font-size: 14px;
    color: #fff;
    display: table-cell;
    width: 90%;
    vertical-align: middle;
}
.socialprofile{
position: absolute;
    background: rgb(0 0 0 / 50%);
    right: 0;
    padding: 5px 10px;
    font-size: 14px;
    color: #fff;
}
.socialprofile a{
color:#fff;
margin-right: 3px;
}
.socialprofile a:last-child{
margin: 0;
}
.socialprofile a:hover{
color: #aaa;
text-decoration: none;
}

.profileinfo{
background: #131313;
padding: 10px 15px;
color: #fff;
text-align: left;
vertical-align: middle;
}
.profileinfo span{
	color: #aaa;
	font-weight: 900;
}

.profileinfo ul {
list-style: none;
}

.profileinfo ul li{
border-right: 1px solid #000;
padding: 0px 10px;
display: inline-block;
text-align: center;
}
.profileinfo ul li a{
color:  #fff;
}
profileinfo ul li a:hover{
color:#fff;
text-decoration: none;
}
.perfilrsp {
	width: 49.5%;
	}
@media only screen and (max-width: 866px) {
	.profileinfo ul li{
		display: block !important;
		padding: 5px 10px !important;
		border: none !important;
	}
.perfilrsp {
	width: 100% !important;
	}
}

y en plantillas buscar "miembro -> member_profile y reemplazar por lo siguiente:
<html>
<head>

<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1820"></script>
<script>
$(document).ready(function() {
if($('.fotoperfil', this).attr('src') == ''){
$('.fotoperfil').attr('src', 'https://i0.wp.com/www.andro-life.com/wp-content/uploads/2017/08/Wallpaper-1.jpg?ssl=1');
}
});
</script>
</head>
<body>
{$header}

<div id="perfil">
<div class="socialprofile"><a href="javascript:Report.reportUser({$uid});" title="Reportar usuario" class="report_user_button"><i class="fas fa-bullhorn"></i></a>
<a href="private.php?action=send&amp;uid={$uid}" title="{$lang->send_pm}"><i class="fas fa-envelope-square"></i></a>
	{$buddy_options}
</div>
<div>
<img class="fotoperfil" src="{$userfields['fid5']}" title="Portada de {$memprofile['username']}" alt="Portada de {$memprofile['username']}" />
<div class="perfilstatus"><div class="profile_avatar">{$avatar}</div><div class="profiletra"><strong>{$memprofile['username']}</strong><br/>
<span class="smalltext">{$userfields['fid6']}</span>
</div>
</div>
<div class="profileinfo">
<ul>
	<li><span>{$lang->registration_date}</span><br/>{$memregdate}</li>
	<li><span>{$lang->lastvisit}</span><br />{$memlastvisitdate}</li>
	<li><span>{$lang->total_posts}</span><br /><a href="search.php?action=finduser&amp;uid={$uid}" title="{$lang->find_posts}">{$memprofile['postnum']}</a></li>
	<li><span>{$lang->total_threads}</span><br /><a href="search.php?action=finduserthreads&amp;uid={$uid}" title="{$lang->find_threads}">{$memprofile['threadnum']}</a></li>
</ul>
</div>
</div>
	</div>
<br style="clear: both">
	<div class="perfilrsp float_left">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong></td>
</tr>
<tr>
<td class="trow1" style="width: 30%;"><strong>{$lang->joined}</strong></td>
<td class="trow1">{$memregdate}</td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->lastvisit}</strong></td>
<td class="trow2">{$memlastvisitdate}</td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->total_posts}</strong></td>
<td class="trow1">{$memprofile['postnum']} ({$lang->ppd_percent_total}){$findposts}</td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->total_threads}</strong></td>
<td class="trow2">{$memprofile['threadnum']} ({$lang->tpd_percent_total}){$findthreads}</td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->timeonline}</strong></td>
<td class="trow1">{$timeonline}</td>
</tr>
{$referrals}
{$reputation}
{$warning_level}
</table>
				<br style="clear: both">
		{$modoptions}
		<br style="clear: both">
	</div>
<div class="perfilrsp float_right">
	{$contact_details}
{$profilefields}{$profilepicture}
{$signature}
{$adminoptions}
<div style="text-align: center">{$buddy_options}{$ignore_options}{$report_options}</div>
</td>
</tr>
</table>
	</div>
<br style="clear: both">
{$footer}
</body>
</html>

Ahora les diré que modificar para cada uno de ustedes:
1.- Debemos de dar una portada para aquellos usuarios que no tengan portada aún, ya que mybb no da la opción de dar valor por defecto si está en blanco.
Para ello tenemos el siguiente script en <head> de la plantilla member profile:
<script>
$(document).ready(function() {
if($('.fotoperfil', this).attr('src') == ''){
$('.fotoperfil').attr('src', 'https://GOOGLE.COM');
}
});
</script>

Como pueden ver ahí viene la url de google (en la plantilla está de otra imagen, google es para que la identifiquen), deberás reemplazar por la url de la portada por defecto.

2.- En la misma  plantilla encontrarás:
<img class="fotoperfil" src="{$userfields['fid4']}" title="Portada de {$memprofile['username']}" alt="Portada de {$memprofile['username']}" />
Donde el 4 deberá ser reemplazado por el FID de tu campo para la portada.

3.- En la plantilla encontrarás:
<span class="smalltext">{$userfields['fid5']}</span>
Harás lo mismo que en el paso anterior pero ahora con el elegido de estado, o borrar si no deseas agregar esto Wink

Y con eso obtendrán algo lindo:
[Imagen: 1.jpg]

*El estado no soporta emojis aunque lo actives en el ACP al crear el campo, puedes crear un script de reemplazo con jquery, para cambiar emoji por emoji.

Espero les sirva =D

MÉTODO DOS:
Si deseas utilizar el plugin profile picture, deberás de cambiar la plantilla member_profile por esto:
<html>
<head>
	
	<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
	{$headerinclude}
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1820"></script>
	<script>
$(document).ready(function() {
if($('.fotoperfil', this).attr('src') == ''){
$('.fotoperfil').attr('src', 'https://i0.wp.com/www.andro-life.com/wp-content/uploads/2017/08/Wallpaper-1.jpg?ssl=1');
}
});
</script>
</head>
<body>
{$header}
	
<div id="perfil">
	<div class="socialprofile"><a href="javascript:Report.reportUser({$uid});" class="report_user_button"><i class="fas fa-bullhorn"></i></a>
<a href="private.php?action=send&amp;uid={$uid}"><i class="fas fa-envelope-square"></i></a>
		</div>
	<div>
		{$profilepicture}
		<div class="perfilstatus"><div class="profile_avatar">{$avatar}</div><div class="profiletra">{$memprofile['username']}<br/>
			<span class="smalltext">{$userfields['fid5']}</span>
		</div>
	</div>
		<div class="profileinfo">
			<ul>
				<li>{$lang->registration_date}<br/>{$memregdate}</li>
				<li>{$lang->lastvisit}<br />{$memlastvisitdate}</li>
				<li>{$lang->total_posts}<br /><a href="search.php?action=finduser&amp;uid={$uid}" title="{$lang->find_posts}">{$memprofile['postnum']}</a></li>
				<li>{$lang->total_threads}<br /><a href="search.php?action=finduserthreads&amp;uid={$uid}" title="{$lang->find_threads}">{$memprofile['threadnum']}</a></li>
				</ul>
		</div>
	</div>
	</div>
	<br style="clear: both">
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
	<tr>
		<td width="50%" valign="top">
			<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
				<tr>
					<td colspan="2" class="thead"><strong>{$lang->users_forum_info}</strong></td>
				</tr>
				<tr>
					<td class="trow1" style="width: 30%;"><strong>{$lang->joined}</strong></td>
					<td class="trow1">{$memregdate}</td>
				</tr>
				<tr>
					<td class="trow2"><strong>{$lang->lastvisit}</strong></td>
					<td class="trow2">{$memlastvisitdate}</td>
				</tr>
				<tr>
					<td class="trow1"><strong>{$lang->total_posts}</strong></td>
					<td class="trow1">{$memprofile['postnum']} ({$lang->ppd_percent_total}){$findposts}</td>
				</tr>
				<tr>
					<td class="trow2"><strong>{$lang->total_threads}</strong></td>
					<td class="trow2">{$memprofile['threadnum']} ({$lang->tpd_percent_total}){$findthreads}</td>
				</tr>
				<tr>
					<td class="trow1"><strong>{$lang->timeonline}</strong></td>
					<td class="trow1">{$timeonline}</td>
				</tr>
				{$referrals}
				{$reputation}
				{$warning_level}
			</table>
			{$contact_details}
		</td>
		<td>&nbsp;&nbsp;</td>
		<td width="50%" valign="top">
			{$profilefields}
			{$signature}
			{$modoptions}
			{$adminoptions}
			<div style="text-align: center">{$buddy_options}{$ignore_options}{$report_options}</div>
		</td>
	</tr>
</table>
	<br style="clear: both">
{$footer}
</body>
</html>

Deberás ir a las plantillas globales y buscar la plantilla member_profile_profilepicture y reemplazar por:
{$description}
{$profilepicture_img}
La plantilla member_profile_profilepicture_description reemplazar por:
<span class="descport">{$memprofile['profilepicdescription']}</span>

y la plantilla member_profile_profilepicture_profilepicture se reemplaza por:
<img class="fotoperfil" src="{$userprofilepicture['image']}" title="{$lang->users_profile_picture}" alt="{$lang->users_profile_picture}" />

Eso es todo!
Archivos adjuntos
Imagen(es)
       
Última modificación: 9 Jan, 2021, 7:31 pm por angeluz.
  
Omar G.   25 Nov, 2020, 6:49 pm
#2
Hola, muchas gracias por el tutorial.

En lo personal aconsejo el permitir a los usuarios el subir sus imágenes en lugar de usar campos de perfil.

Yo aconsejaria los siguientes complementos para lograrlo:
https://community.mybb.com/mods.php?action=view&pid=127
https://github.com/Sama34/OUGC-Profile-Logo
https://github.com/Sama34/OUGC-Profile-Image

Aconsejo el primero por que los mios probablemente no los actualice a MyBB 1.9 en su momento.

Por cierto, ya actualice los permisos para poder subir adjuntos a los mensajes, el cual solo permite imágenes.

Saludos!

Pd: Aconsejo el configurar apropiadamente los campos de perfil con un ReGex que solo permita enlaces de imágenes ya que podría ser molesto el permitir cualquier cosa en sus campos de perfil.
Última modificación: 25 Nov, 2020, 6:51 pm por Omar G..
Envía un DM o MP si te interesa patrocinar alguna actualización o complemento a alguno de mis plugins.

[Imagen: signature.png]

Discord omar.gonzalez (Omar G.#6117); Telegram at @omarugc;
  
 Responder
angeluz   25 Nov, 2020, 7:06 pm
#3
(25 Nov, 2020, 6:49 pm)Omar G. escribió: Hola, muchas gracias por el tutorial.

En lo personal aconsejo el permitir a los usuarios el subir sus imágenes en lugar de usar campos de perfil.

Yo aconsejaria los siguientes complementos para lograrlo:
https://community.mybb.com/mods.php?action=view&pid=127
https://github.com/Sama34/OUGC-Profile-Logo
https://github.com/Sama34/OUGC-Profile-Image

Aconsejo el primero por que los mios probablemente no los actualice a MyBB 1.9 en su momento.

Por cierto, ya actualice los permisos para poder subir adjuntos a los mensajes, el cual solo permite imágenes.

Saludos!

Pd: Aconsejo el configurar apropiadamente los campos de perfil con un ReGex que solo permita enlaces de imágenes ya que podría ser molesto el permitir cualquier cosa en sus campos de perfil.

En tanto a subir las imágenes, considera que algunos tengan un host limitado, además de que mybb no admite eso por defecto.
Esos plugins tuyos ni los conocía, no están ni aquí, ni en mybb.com, ni en tu sitio personal ajajaja
Profile picture no está actualizado, recuerda que los plugins viejos dan problemas al agregar las tablas del settingroups o algo así.

Mybb 1.9 existe o existirá?? no se trabajaba ya en mybb 2.0??

Respecto al ReGex intenté, pero me daban errores de php, finalmente decidí dejarlo así al menos para el tuto.

<!----ReGex agregada al tutorial---!>
Última modificación: 25 Nov, 2020, 7:28 pm por angeluz.
  
 Responder
Omar G.   25 Nov, 2020, 7:28 pm
#4
Última modificación: 25 Nov, 2020, 7:29 pm por Omar G..
Envía un DM o MP si te interesa patrocinar alguna actualización o complemento a alguno de mis plugins.

[Imagen: signature.png]

Discord omar.gonzalez (Omar G.#6117); Telegram at @omarugc;
  
 Responder
angeluz   25 Nov, 2020, 7:50 pm
#5
Solo para mencionar:
Acabo de probar el plugin profile picture y sí funciona, en la brevedad posible haré la traducción y agregaré al tutorial como lograr ese perfil con el plugin,
El ReGex fue agregado al tutorial (no es perfecto, pero es trabajo honesto).
  
 Responder
angeluz   9 Jan, 2021, 7:35 pm
#6
Última modificación: 9 Jan, 2021, 7:37 pm por angeluz.
  
 Responder
Tema anterior      Tema siguiente
  
 Contáctanos
 Equipo del foro
 MyBB-Es.com - Soporte para los Foros MyBB en Español
 Volver arriba
 Marcar foros como leídos
 Sindicación RSS
 Ayuda
Powered By MyBB, © 2002-2025 MyBB Group.
Made with by Curves UI.