Estructura estándar de los miniperfiles

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.