Estructura estándar de los perfiles

Flerex

A la hora de personalizar los perfiles, mucha gente (yo me incluyo) ha ideado selectores que muchas veces son muy engorrosos o ineficientes cuando se podrían hacer de otra forma. Para crear selectores reutilizables en cualquier foro, propongo un estándar de estructura de los perfiles bastante lógica, básica y fácil de entender.

Recomiendo utilizar esta estructura en cualquier foro o diseño nuevo. Nada más empezar a diseñar, instala esta estructura para hacer tu vida más simple.

En esta entrada básicamente explicaré cómo instalar esta estructura y finalmente proporcionaré algunos selectores para que veáis cuánto se simplifican los que hasta ahora se estaban utilizando.

Características

¿Por qué utilizar esta estructura?

  • Permite crear un estándar de selectores simples y reutilizables.
  • Simplifica la estructura de los perfiles.
  • Permite personalizar el perfil de nuevas formas antes no accesibles.
  • Está mejor organizado.

Instalación

Vete a la plantilla viewtopic_body y busca:

<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
    <!-- div class="online2"></div-->
    <dl><dt>
            {postrow.displayed.POSTER_AVATAR}
            <br><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
        </dt>
        <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
        <dd><br></dd>
        <dd>
            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
        </dd>
        <dd><br></dd>
        <dd>
            {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
        </dd>
    </dl></div>

Sustitúyelo por:

<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
    <div class="postprofile-avatar">{postrow.displayed.POSTER_AVATAR}</div>
    <div class="postprofile-username">{postrow.displayed.POSTER_NAME}</div>
    <div class="postprofile-rank">{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</div>
    <div class="postprofile-fields">
        <!-- BEGIN profile_field -->
        <div class="postprofile-field">
            <span class="postprofile-field-label">{postrow.displayed.profile_field.LABEL}</span>
            <span class="postprofile-field-content">{postrow.displayed.profile_field.CONTENT}</span>
            <span class="postprofile-field-separator">{postrow.displayed.profile_field.SEPARATOR}</span>
        </div>
        <!-- END profile_field -->
    </div>
    <div class="postprofile-rpg">{postrow.displayed.POSTER_RPG}</div>
    <div class="postprofile-contact">
        <span class="postprofile-contact-profile">{postrow.displayed.PROFILE_IMG}</span>
        <span class="postprofile-contact-pm">{postrow.displayed.PM_IMG}</span>
        <span class="postprofile-contact-email">{postrow.displayed.EMAIL_IMG}</span>
        <!-- BEGIN contact_field -->
        <span class="postprofile-contact-field">{postrow.displayed.contact_field.CONTENT}</span>
        <!-- END contact_field -->
    </div>
</div>

¡Ya está! ¿Qué creías, que iba a ser muy complicado?

Selectores disponibles

  • .postprofile-rpg: Contiene todos los campos generados de la hoja de personaje.
  • .postprofile-contact: Contiene todos los campos de contacto del perfil.
  • .postprofile-field: Cada uno de los campos del perfil.
  • .postprofile-fields: Nótese la «s». Contiene todos los campos del perfil.
  • .postprofile-field-label: Contiene el nombre del campo de perfil.
  • .postprofile-field-content: Contiene el contenido del campo de perfil.
  • .postprofile-field-separator: Contiene el separador del campo de perfil.
  • .postprofile-contact-profile: Contiene el botón de ir al perfil.
  • .postprofile-contact-pm: Contiene el botón de enviar mensaje privado.
  • .postprofile-contact-email: Contiene el botón de enviar email.
  • .postprofile-contact-field: Cada botón de contacto que no es niguno de los tres anteriores. Por limitaciones de Foroactivo no es posible identificar cada botón de contacto personalizado sin recurir a JavaScript.
  • .postprofile-rank: Contiene el rango del usuario.
  • .postprofile-username: Contiene el nombre del usuario.
  • .postprofile-avatar: Contiene el avatar.

Ejemplos de códigos

Fijar el tamaño del avatar

.postprofile-avatar img {
    width: 200px;
    height: 200px;
}

No permitir que el tamaño del avatar sea más grande que el perfil

Si no tienes el anterior código, colocar este es una buena medida de seguridad.

.postprofile-avatar img {
    max-width: 100%;
}

Cambiar el tamaño o fuente del nombre del usuario

.postprofile-username {
    /* Tamaño de fuente */
    font-size: 20px;
    /* Tipo de fuente */
    font-family: 'Helvetica Neue', sans-serif; /* Recuerda que siempre debes poner de último sans-serif, serif, etc. dependiendo del tipo de fuente */
}

Y ahora mismo no se me ocurren más. ???? Si quieres que añada alguno más envíame un mensaje privado.

por Flerex

Estudiante de Ingienería del Software con experiencia en el desarrollo web y la plataforma Foroactivo desde hace más de 8 años. Me encanta todo lo relacionado con el diseño de UI/UX.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *