[Duda] Resuelto | Mover un campo de perfil bajo el rango

Hola a todos! He utilizado un efecto de perfil que proporcionó amablemente una usuaria de tumblr (dejaré el link en hide). Todos los campos de perfil se muestran al pasar el mouse por el avatar; sin embargo, me gustaría poder situar unos cuentos en la parte inferior del rango:



Sinceramente no se me ocurre como hacerlo ¿Tienen alguna idea o consejo? No sé como mover campos de perfil, soy muy nueva en ello.



Muchas gracias!

¡Hola Jonsei! Te recomiendo leer nuestro tutorial sobre perfiles en posts:
Editar perfil (con hover) en el template

Espero que te sea útil ~ 

Hola! Lo he visto pero lo que me gustaría es que otros campos (los que yo elija) no estén ocultos en el avatar, si no abajo ;-;
Lamento la demora!

¡Hola Jonsei! Según tengo entendido, lo que necesitas hacer es modificar el template, dependiendo del código que estés utilizando hay un contenedor que incluye los campos de perfil entre llaves así; {ALGOAQUI}

Cada una de esas llavesitas es el nombre de un campo de perfil (puedes verlos todos en el tutorial de Roshio y cuál es cuál), según lo que tú quieras sacar hay que localizar esas etiquetas, quitarlas del div que las contiene y ponerlas debajo del rango. Por ejemplo:

Siguiendo el tutorial de Roshio, el div que contiene todos los campos de perfil es "Hide-Perfil", entonces hay que encontrar ese div en el template:

Código:


                                  <div class="Hide-Perfil">
                                    <div class="Nombre">{postrow.displayed.POSTER_NAME}</div>
                                    <div class="Rango">{postrow.displayed.POSTER_RANK_NEW}</div>
                                    
                                    <div class="Data-Perfi"><!-- BEGIN profile_field -->
                                      <div class="Angelus">{postrow.displayed.profile_field.LABEL}</div>
                                      <div class="Demonium">{postrow.displayed.profile_field.CONTENT}</div>
                                      <div class="Human">{postrow.displayed.profile_field.SEPARATOR}</div>     <!-- END profile_field -->                              
                                    </div>
                                                                    
                                  </div>
                                  

Suponiendo que no quieres que el nombre del usuario aparezca solo al pasar el mouse y que esté siempre a la vista, únicamente tienes que quitar esa etiqueta y colocarla en el sitio que quieras.

Código:


                                 <div class="Hide-Perfil">
                                    <div class="Rango">{postrow.displayed.POSTER_RANK_NEW}</div>
                                    <div class="Nombre">{postrow.displayed.POSTER_NAME}</div>

                                    
                                    <div class="Data-Perfi"><!-- BEGIN profile_field -->
                                      <div class="Angelus">{postrow.displayed.profile_field.LABEL}</div>
                                      <div class="Demonium">{postrow.displayed.profile_field.CONTENT}</div>
                                      <div class="Human">{postrow.displayed.profile_field.SEPARATOR}</div>     <!-- END profile_field -->                              
                                    </div>
                                                                    
                                  </div>
                                  

Acomodados de esta forma estaría indicando que el nombre vaya debajo del rango, y listo, solo debes acomodar cómo más te guste, puedes incluso borrar los que te sobren o agregar más si sientes que hacen falta.

Edito: Me quedó la duda de si te refieres a mover los campos que tú creas en el PA, como edad, puntos y mensajes. Si son esos los que estás buscando mover, será un poco más dificil aunque no imposible, por si acaso te dejo solo la explicación anterior.

Hola! Gracias por responder! Creo que no me expliqué muy bien ;-; Verás, actualmente todos los datos del perfil (Mensajes, reputación, etc) están en un hover, oculto tras el avatar. Según entendí, todos están dentro del {postrow.displayed.profile_field.CONTENT}. El problema es que yo solo quiero, por ejemplo, que salga "Reputación" de entre todos estos campos para colocarlo debajo del avatar. Solo unos cuantos campos de perfil estarían debajo del avatar mientras que los que resten, se encontrarían ocultos detrás de este. No sé si me dejé entender ;-;

Disculpa, soy muy tonta ;-;

En ese caso lo que tienes que hacer es modificar tu CSS para que cada campo de perfil tenga su estilo propio y moverlos a tu antojo. Dependiendo del código que tengas ahora, si le das click derecho + inspeccionar a uno de los campos personalizados, en el inspector de elementos debería salirte el nombre individual de dicho campo para que puedas incluirlos por separado en el CSS, por ejemplo: en el skin donde yo utilizo un código similiar el div contenedor en el template lleva por nombre "postprofile-field" dentro de éste hay tres divs que contienen el label, el content y el separator. Así cada cosa está por separado y no se mueve todo al mismo tiempo. Si yo pongo el mouse sobre el campo de icono del perfil y le he puesto "icono" como nombre en el PA al crearlo, en el inspector me aparece como que se llama postprofile-field-icono, así sé que debo añadir ese nombre en el CSS para darle el estilo que yo quiera únicamente al icono del perfil.

Eso es todo lo que necesitas, identificar con el inspector de elementos qué nombre tiene el div personalizado de cada campo y añadirlos a tu CSS con el estilo que tú quieras.

Para no hacerte un enredo con ejemplos de códigos que no serán como lo tienes, te recomiendo buscar en Asistencia Foroactivo el tutorial "Cómo modificar un campo de perfil sin afectar a otro campo" ahí además de explicarte cómo acomodar el template, te explican cómo activar el JS, eliminar algunas cosillas que puedes no necesitar y poner cada campo con su nombre propio en el CSS. Para no perder el diseño de perfil actual, únicamente identifica cada uno tanto en el template como en el CSS, si realizas un cambio en los nombres del template, modificas el del CSS y debería seguir funcionando, eso sí, sin remover los créditos ya que solo estás modificando el nombre y no rehaciendo el diseño en sí.