Con este tuto aprenderemos a crear un medallero en el perfil y moverlo para que aparezca debajo de los post de los usuarios.


Ampliar esta imagen.Reducir esta imagen Clic aquí para ver su tamaño original


Este tutorial funciona en phpBB3

1.Crear el campo de perfil:

Nos dirigimos a

Panel de Administracion > Usuarios&Grupos > Perfiles > Campos de perfil > (Crear nuevo)

Y lo configuramos de la siguiente forma:

Tipo: Zona de texto (Importante no confundir con Campo de texto, es distinto)
Previsualizacion: Perfil y Mensajes

El resto de campos configurar libremente según nuestra preferencia y registramos los cambios para que se cree:

2.Crear el javascript :

Nos dirigimos a

PA > Modulos > Gestion de los Javascript > Crear nuevo JS

Y la configuramos de la siguiente forma

Titulo: El que queramos
Posición: En los temas
Código:

Código:Seleccionar el contenido

$(document).ready(function(){
$('.post').each(function(){
$(this).find('.medallero').appendTo($(this).find('.postbody'));
});
});

Y registramos los cambios

3. Hacer funcionar el campo de perfil:

Nos dirigimos al foro y buscamos el usuario que queremos modificar. Entramos en su perfil y buscamos el Campo que acabamos de crear "Medallas". Lo modificamos con el siguiente código.

Código:Seleccionar el contenido

 *Numero*
[table class="medallero"][td]

Aqui iran las medallas

[/td][/table]

Como véis, es una tabla. Dentro podéis usar imagenes o links usando BBCode

Para insertar una imagen:

Código:Seleccionar el contenido

 [img]LINK[/img]

Registramos los cambios.

Ahora si vamos a un post del usuario debería aparecernos asi:


Ampliar esta imagen.Reducir esta imagen Clic aquí para ver su tamaño original


En el perfil de cada usuario modificamos las medallas que haya ganado cada user!

4. Hacer más bonito el medallero:

Podemos cambiar el estilo del medallero con CSS asi

Código:Seleccionar el contenido

.medallero {
/* Aqui las propiedades css */
}

Por ejemplo

Código:Seleccionar el contenido

.medallero {
border: solid 1px #4BB;
border-width: 5px 1px;
width: 100%;
background: #DFF;
}

Y lo pegamos en

PA > Visualizacion > Colores > CSS Stylesheet

Nos quedaría algo asi:

Interesante

suena bien .. Voy a tratar