1. Crear un custom profile field para la imagen background
ACP > Configuración > Campo de perfil personalizado > Agregar campo de perfil
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]
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.
2. Buscar el ID del campo personalizado que creamos.
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é.
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:
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:
<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:
<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> .
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:
.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
Tutorial pedido con derechos de autor al 100%.