Lo primero que debéis saber es que foroactivo nos ofrece dos tipos de perfiles: el perfil avanzado y el perfil simple. El perfil avanzado es el típico de las pestañas arriba, mientras que el perfil simple nos ofrece toda la información en una sola página.
La edición y personalización del perfil avanzado es muy limitada, aunque posible. Sin embargo, en este tutorial nos enfocaremos en la edición del perfil simple.
Nivel: Medio
Tiempo de lectura: 10 minutos
Autor: Floki para The Mother Of Codes
— El primer paso debe ser activar el perfil simple, pues por defecto tendremos el avanzado:
PA > Usuarios y grupos > Perfiles > Opciones generales > Activar el perfil avanzado: NO
— El template a editar será el profile_view_body (página de anuncio de un perfil sencillo). Lo encontraréis en:
PA > Visualización > Templates > Perfil > profile_view_body
— Aquí os dejo una lista de las variables más usadas y para qué funcionan. Os aconsejo que las busquéis dentro del Template base, para que os hagáis una idea aproximada de cómo están siendo usadas.
{AVATAR_IMG} - Foto de avatar
{USERNAME} - Nombre del usuario
{LAST_VISIT_TIME} - La última visita
{POSTER_RANK} - Rango
{USER_ONLINE} - Muestra si está en línea
CAMPOS DEL PERFIL:
<!-- BEGIN profile_field --> (TIENE QUE ESTAR antes de la caja contenedora de los campos.)
{profile_field.LABEL} - Título de los campos del perfil
{profile_field.CONTENT} - Contenido de los campos del perfil
<!-- END profile_field --> (TIENE QUE ESTAR al cerrar la caja contenedora de los campos)
Estas tres variables necesitan del link, tal y como aparecen:
<a rel="nofollow" href="/st/{PUSERNAME}">{L_SEARCH_USER_POSTS}</a> - Todos los mensajes
<a rel="nofollow" href="/sta/{PUSERNAME}">{L_TOPICS}</a> - Temas
<a rel="nofollow" href="/sta/{PUSERNAME}">{L_TOPICS}</a> - Mensajes
CAMPOS DE CONTACTO:
<!-- BEGIN contact_field --> (TIENE QUE ESTAR antes de la caja contenedora de los campos)
{PRIVATE_MSG} - Link para MP
{contact_field.LABEL} - Título del campo de contacto.
{contact_field.CONTENT} - Contenido del campo de contacto.
<!-- END contact_field --> (TIENE QUE ESTAR al cerrar la caja contenedora de los campos.)
{ADMINISTRATE_USER} - Perfil del usuario desde el PA
{BAN_USER} - Link para banear al usuario
— Adivina cual es el siguiente paso. ¡Así es! Te toca pensar cómo será tu perfil simple. En este aspecto no puedo deciros qué o cómo debéis hacerlo, pues la gracia está en experimentar. Mi recomendación es que hagáis un boceto a mano o en photoshop para que tengáis claro lo que queréis conseguir, y una vez hecho crear la base con alguna página como Codepen. El resto simplemente consistirá en sustituir las variables.
Oh, Floki, estoy más perdido que al principio
Oh, Floki, ¡se me ha roto una baliza!
Oh, Floki, no sé seguir
Oh, Floki, hazme un hijo
¡Vale, vaaale! Como me habéis cogido de buenas, os daré un código base que podréis descuartizar, editar, cotillear y escupir sobre él.
Código del Template (sustituir todo) - PASTEBIN
Código a añadir en el CSS - PASTEBIN
Quedaría así: CAPTURA
Nota: Hay algunas variables que no he incluído porque no se usan demasiado y quería hacer el tutorial lo más simple posible. De todas formas, basta con ojear un poco el Template base para descubrirlas, tienen nombres bastante intuitivos (La de la Hoja de personaje, la sección de amigos, comentarios en el perfil, étc).
