Background en Perfil como Twitter

Ignacio P. 22 Sep, 2014, 7:49 am

1. Crear un custom profile field para la imagen background

ACP > Configuración > Campo de perfil personalizado > Agregar campo de perfil

Parametros:

Spoiler:

Save it.

2. Buscar el ID del campo personalizado que creamos.
[Imagen: azvM7on.jpg]

Despues de colocar el mouse encima del link, revisa la URL a la cual serias redireccionado. Deberia aparcer algo como esto:

http://example.com/mybbdir/admin/index.php?module=config-profile_fields&action=edit&fid=X

Donde verde es lo que no necesitaremos, pero...
El rojo X es el numero ID que antes mencioné.

[Imagen: b95Az2S.jpg]

3. Editando las plantillas.

Ahora es tiempo de editar las plantillas

ACP > Estilos y plantillas > Plantillas > *tutheme* Plantillas > Plantilla de Miembros (Member templates) > member_profile

Buscar:

<fieldset>
 <table width="100%" cellspacing="0" cellpadding="0" border="0">
 <tr>
 <td width="75%">
 <span class="largetext"><strong>{$formattedname}</strong></span><br />
 <span class="smalltext">
 ({$usertitle})<br />
 {$groupimage}
 {$userstars}<br />
 <br />
 <strong>{$lang->registration_date}</strong> {$memregdate}<br />
 <strong>{$lang->date_of_birth}</strong> {$membday} {$membdayage}<br />
 <strong>{$lang->local_time}</strong> {$localtime}<br />
 <strong>{$lang->postbit_status}</strong> {$online_status}
 </span>
 </td>
 <td width="25%" align="right" valign="middle">{$avatar}</td>
 </tr>
 </table>
</fieldset>

Y reemplazarlo por:

<table width="100%" cellspacing="0" cellpadding="25" border="0" class='profbg'>
 <tr>
 <td width="75%" class="user-details">
 <div class="ud-text"><span class="largetext"><strong>{$formattedname}</strong></span><br />
 <span class="smalltext">
 ({$usertitle})<br />
 {$groupimage}
 {$userstars}<br />
 <br />
 <strong>{$lang->registration_date}</strong> {$memregdate}<br />
 <strong>{$lang->date_of_birth}</strong> {$membday} {$membdayage}<br />
 <strong>{$lang->local_time}</strong> {$localtime}<br />
 <strong>{$lang->postbit_status}</strong> {$online_status}
 </span></div>
 </td>
 <td width="25%" align="right" valign="middle" class="user-details ud-img">{$avatar}</td>
 </tr>
 </table>

4. Utilizando la imagen Background

En la misma plantilla, pega el siguiente codigo entre las etiquetas <head> y </head> .

Cita:<style>

.profbg {
background-image: url({$userfields['fidX']});
}
</style>

Donde X es reemplazado por el numero ID que obtuvimos en el paso 2.

5. Terminamos el resto del estilo.

El resto es completamente facil.

ACP > Plantillas y Estilo > *Tu theme* > global.css > Opciones > Editar Estilo
(Yo recomiendo el "Advanced Mode")

Opcional:

Y agregar al final:

.user-details {
background: transparent;
}

.profbg {
background-size: 100% 100%;
border: 1px solid #555555;
border-radius: 3px;
box-shadow: 0px 0px 10px 5px #888888;
}

.ud-text {
background: rgba(255,255,255,0.7);
padding: 5px;
border: 2px solid #FFFFFF;
border-radius: 6px;
max-width: 350px;
}

.ud-img img {
border: 2px solid #FFFFFF;
border-radius: 6px;
max-width: 350px;
}

Aquí terminamos!

Unas cuantas notas antes de irnos:

Tome como principal Theme el default, así que si utilizas un theme diferente vas a necesitar posiblemente unos cuantos cambios en la codificación que te he dado.
Sí un backgroung no carga o el usuario no ha colocado ninguna imagen, el perfil se verá asi: http://someimage.com/27OuWIg
Originalmente hice este tutorial en la version 1.8, pero pienso que no existirá ningun problema con la versión 1.6

Creditos: ElectricShock
Tutorial pedido con derechos de autor al 100%.

[Imagen: 1411605000_5000_1_EUR_1500_dark.png]

Eloy 22 Sep, 2014, 8:12 am

Se Lucio ElectricShock Aunque fuera mucho mejor si hubiera puesto la imagen de avatar del lado izquierdo y la informacion del lado derecho pero 100% Excelente

Aprendiendo cada vez mas

AndresXZ09 28 Apr, 2015, 5:12 pm

Una pena que no funcione en MyBB 1.6 Sad

Finer 28 Apr, 2015, 5:33 pm

(28 Apr, 2015, 5:12 pm)AndresXZ09 escribió: Una pena que no funcione en MyBB 1.6

El tutorial si funciona Wink

[Imagen: tumblr_nj9sv13aff1tga1sco4_r1_500.gif]

AndresXZ09 28 Apr, 2015, 5:40 pm

(28 Apr, 2015, 5:33 pm)Finer escribió:
(28 Apr, 2015, 5:12 pm)AndresXZ09 escribió: Una pena que no funcione en MyBB 1.6

El tutorial si funciona ..

Salvo por el factor de que en MyBB 1.6 no están las siguientes opciones: "Se mostrará en el perfil", "Se mostrará en la caja de mensaje", "Visible por", "Editable por", "Opciones" no creo que funcione sin completar eso.

Finer 28 Apr, 2015, 5:59 pm

(28 Apr, 2015, 5:40 pm)AndresXZ09 escribió:
(28 Apr, 2015, 5:33 pm)Finer escribió:
(28 Apr, 2015, 5:12 pm)AndresXZ09 escribió: Una pena que no funcione en MyBB 1.6

El tutorial si funciona ..

Salvo por el factor de que en MyBB 1.6 no están las siguientes opciones: "Se mostrará en el perfil", "Se mostrará en la caja de mensaje", "Visible por", "Editable por", "Opciones" no creo que funcione sin completar eso.

Eso es lo de menos, pero si funciona te estoy diciendo yo que creo themes jaja XD
Solo tenes que poner que es editable y que no este oculto, lo de requerido le pones que no ya que eso es para que te salgan en la parte de registracion.
Recuerdo hace mucho cuando usaba la version 1.6 habia hecho esto en otro foro pero en ese momento no existia un tutorial Tongue

AndresXZ09 28 Apr, 2015, 6:11 pm

(28 Apr, 2015, 5:59 pm)Finer escribió:
(28 Apr, 2015, 5:40 pm)AndresXZ09 escribió:
(28 Apr, 2015, 5:33 pm)Finer escribió:
(28 Apr, 2015, 5:12 pm)AndresXZ09 escribió: Una pena que no funcione en MyBB 1.6

El tutorial si funciona ..

Salvo por el factor de que en MyBB 1.6 no están las siguientes opciones: "Se mostrará en el perfil", "Se mostrará en la caja de mensaje", "Visible por", "Editable por", "Opciones" no creo que funcione sin completar eso.

Eso es lo de menos, pero si funciona te estoy diciendo yo que creo themes jaja XD
Solo tenes que poner que es editable y que no este oculto, lo de requerido le pones que no ya que eso es para que te salgan en la parte de registracion.
Recuerdo hace mucho cuando usaba la version 1.6 habia hecho esto en otro foro pero en ese momento no existia un tutorial .

¿Me podrías echar un cable con el código que debería usar? Mi member_profile es un poco distinto

<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
</head>
<body>
{$header}
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="profile_header">
<tr>
<td class="profile_avatar" width="1px">{$avatar}</td>
<td class="profile_details"><span class="largetext"><strong>{$formattedname}</strong></span> <br />
<span class="smalltext">
{$usertitle}</span><br />
{$groupimage}
{$userstars}
<br /></td>
<td width="220px" align="right">
<div class="buddy_options">{$buddy_options}</div>
</td>
</tr>
</table>
<div class="profile_container">
<div class="profile_tabs">
<a href="javascript:;" rel="#tab_1" class="active"><i class="icon-dashboard"></i>General</a>
<a href="javascript:;" rel="#tab_2"><i class="icon-bar-chart-o"></i>Estadísticas</a>
<a href="javascript:;" rel="#tab_3"><i class="icon-inbox"></i>Contacto</a>
<a href="javascript:;" rel="#tab_4"><i class="icon-circle"></i>Misc</a>
</div>
<div id="tab_1">
<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" width="160px"><strong>{$lang->joined}</strong></td>
<td class="trow1"><if $memprofile['uid'] == 1 then>01-01-0000<else>{$memregdate}</if></td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->lastvisit}</strong></td>
<td class="trow2">{$memlastvisitdate} {$memlastvisittime}</td>
</tr>
<tr>
<td class="trow1"><strong>{$lang->total_posts}</strong></td>
<td class="trow1">{$memprofile['postnum']} ({$lang->ppd_percent_total})<br /><span class="smalltext">(<a href="search.php?action=finduserthreads&amp;uid={$uid}">{$lang->find_threads}</a> &mdash; <a href="search.php?action=finduser&amp;uid={$uid}">{$lang->find_posts}</a>)</span></td>
</tr>
<tr>
<td class="trow2"><strong>{$lang->timeonline}</strong></td>
<td class="trow2"><if $memprofile['uid'] == 1 then>13.8 Billones de años<else>{$timeonline}</if></td>
{$newpoints_profile}
{$myawards}
</tr>
</table> 
</div>
<div id="tab_2">
<table cellspacing="0" cellpadding="4" border="0" class="tborder" >
<tr>
<td colspan="2" class="thead"><strong>Estadísticas de {$formattedname}</strong></td></tr>
<tr>
<td class="trow1" width="160px"><strong>{$lang->total_posts}</strong></td>
<td class="trow1">{$memprofile['postnum']} ({$lang->ppd_percent_total})<br /><span class="smalltext">(<a href="search.php?action=finduserthreads&amp;uid={$uid}">{$lang->find_threads}</a> &mdash; <a href="search.php?action=finduser&amp;uid={$uid}">{$lang->find_posts}</a>)</span></td>
</tr>
{$referrals}
{$reputation}
{$warning_level}{$newpoints_shop_profile}
</table>
</div>
<div id="tab_3">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td colspan="2" class="thead"><strong>{$lang->users_contact_details}</strong></td>
</tr>
<tr>
<td class="trow1" width="160px"><strong>{$lang->homepage}</strong></td>
<td class="trow1">{$website}</td>
</tr>
{$sendemail}
<tr>
<td class="{$bgcolors['pm']}"><strong>{$lang->pm}</strong></td>
<td class="{$bgcolors['pm']}"><a href="private.php?action=send&amp;uid={$memprofile['uid']}">{$lang->send_pm}</a></td>
</tr>
<tr>
<td class="{$bgcolors['yahoo']}"><strong>{$lang->yahoo_id}</strong></td>
<td class="{$bgcolors['yahoo']}"><a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=yahoo&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['yahoo']}</a></td>
</tr>
<tr>
<td class="{$bgcolors['msn']}"><strong>{$lang->msn}</strong></td>
<td class="{$bgcolors['msn']}"><a href="javascript:;" onclick="MyBB.popupWindow('misc.php?action=imcenter&amp;imtype=msn&amp;uid={$uid}', 'imcenter', 450, 300);">{$memprofile['msn']}</a></td>
</tr>
</table>
</div>
<div id="tab_4">
{$profilefields}
{$signature}
{$modoptions}
{$adminoptions}
</div>
</div>
<br class="clear" />
{$footer}
</body>
</html>

Ojalá me puedas ayudar, saludos Smile

Finer 28 Apr, 2015, 6:33 pm

Reemplaza profile_header por profbg y luego segui el tutorial.
Recuerda cambia el numero del fid.

PD: recuerda siempre tener guardada tu planilla de member profile en un bloc de notas por si te mandas una cagada Tongue

Última modificación: 28 Apr, 2015, 6:34 pm por Finer.

Omar G. 28 Apr, 2015, 6:34 pm

El campo mas importante que se debería llenar correctamente para este tutorial, y que no se hace, es el campo de regex.

Envía un DM o MP si te interesa patrocinar alguna actualización o complemento a alguno de mis plugins.

Discord omar.gonzalez (Omar G.#6117); Telegram at @omarugc;

1.8 Background en Perfil como Twitter