1.8  Background en Perfil como Twitter
1. Crear un custom profile field para la imagen background ACP > Configuración > Campo de perfil personalizado > Agregar campo de perfil Parametros...




[Imagen: pOpnCys.jpg]


1. Crear un custom profile field para la imagen background

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


Parametros:
Spoiler:
Titulo

Profile Background



Descripción corta
Tamaño recomendado: 1125x182 (Solo .jpg, .gif, .png es soportable)



Tipo de campo

Textbox "Caja de texto"



Longitud Máxima

500 (usted escoge)


Minimum Post Count, Display Order, Required, Show on Registration
 usted es libre de escoger.



¿Se mostrara en el perfil?






¿Se mostrara en la caja de mensaje?

No



Visible por

All groups



Editable por 

All groups



Opciones
ninguna
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:[font=Courier New]<style>[/font]

[font=Courier New].profbg {[/font]
[font=Courier New]background-image: url({$userfields['fid[/font][font=Courier New]X[/font][font=Courier New]']});[/font]
[font=Courier New]}[/font]
[font=Courier New]</style>[/font]


[font=Arial]Donde [/font][font=Arial]X[/font][font=Arial] es reemplazado por el numero ID que obtuvimos en el paso 2.[/font]


[font=Arial]5. Terminamos el resto del estilo.[/font]

El resto es completamente facil. 

ACP > Plantillas y Estilo > *Tu theme* > global.css > Opciones > Editar Estilo
[font=Arial](Yo recomiendo el "Advanced Mode")[/font]


[font=Arial]
Opcional
Tu puedes crear otro "stylesheet" exclusivo para member.php?action=profile si eres exigente.
[/font]


[font=Arial]Y agregar al final[/font][font=Arial]:[/font]
.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: http://www.sincemylastcigarette.com/bann...0_dark.png]
Archivos Adjuntos

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
Una pena que no funcione en MyBB 1.6 Sad
AndresXZ0928 Apr, 2015, 5:12 pmAndresXZ09 escribió: Una pena que no funcione en MyBB 1.6 Sad


El tutorial si funciona Wink..
[Imagen: https://31.media.tumblr.com/b9f3b87cfcc8...r1_500.gif]
Finer28 Apr, 2015, 5:33 pmFiner escribió:
AndresXZ0928 Apr, 2015, 5:12 pmAndresXZ09 escribió: Una pena que no funcione en MyBB 1.6 Sad


El tutorial si funciona Wink..


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.
AndresXZ0928 Apr, 2015, 5:40 pmAndresXZ09 escribió:
Finer28 Apr, 2015, 5:33 pmFiner escribió:
AndresXZ0928 Apr, 2015, 5:12 pmAndresXZ09 escribió: Una pena que no funcione en MyBB 1.6 Sad


El tutorial si funciona Wink..


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.
[Imagen: https://31.media.tumblr.com/b9f3b87cfcc8...r1_500.gif]
Finer28 Apr, 2015, 5:59 pmFiner escribió:
AndresXZ0928 Apr, 2015, 5:40 pmAndresXZ09 escribió:
Finer28 Apr, 2015, 5:33 pmFiner escribió:
AndresXZ0928 Apr, 2015, 5:12 pmAndresXZ09 escribió: Una pena que no funcione en MyBB 1.6 Sad


El tutorial si funciona Wink..


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.


¿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
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.
[Imagen: https://31.media.tumblr.com/b9f3b87cfcc8...r1_500.gif]
Última modificación: 28 Apr, 2015, 6:34 pm por Finer.
El campo mas importante que se debería llenar correctamente para este tutorial, y que no se hace, es el campo de regex.
Omar G.
Colaboradores
Omar G. Finer Eloy AndresXZ09
This forum uses Lukasz Tkacz MyBB addons.