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]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?

Sí

¿Se mostrara en la caja de mensaje?

No

Visible por

All groups

Editable por

All groups

Opciones
ninguna[/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é.

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:

Código PHP:
<?php 

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

Código PHP:
<?php 

<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")

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

Y agregar al final:

Código PHP:
<?php 

.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]

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

Código:
<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

1.8 Background en Perfil como Twitter

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

Eloy 22 Sep, 2014, 8:12 am

AndresXZ09 28 Apr, 2015, 5:12 pm

Finer 28 Apr, 2015, 5:33 pm

AndresXZ09 28 Apr, 2015, 5:40 pm

Finer 28 Apr, 2015, 5:59 pm

AndresXZ09 28 Apr, 2015, 6:11 pm

Finer 28 Apr, 2015, 6:33 pm

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