[Duda] Editar campos específicos del perfil (como centrar una frase y solo mostrar el contenido de un inventario)

Buenas a quien lea! Tengo varios días con esta espinita en mi cabeza y ya siento que me quita el sueño porque tuve una pesadilla donde rompía todo el foro. tengo un problema con la estructura del perfil. Hay dos cosas que me gustaría modificar, o mas bien, tres cosas que quiero modificar.

1. Como podrán ver en el tema, tengo el icon personal fuera de la caja de información del usuario y preferiría que estuviera adentro tal como se ve acá:

Spoiler:

2.Omití el nombre de un campo (en este caso es frase del personaje) usando el casero método de poner icon en vez de texto pero aparece una caja negra en su lugar que me gustaría que no fuese así... Además de que quisiera que esa frase estuviese centrada justo debajo del icon personal.

3. En las captura no aparece pero quisiera que el inventario fuera como una zona de texo y estuviese debajo de los datos (dinero y localización) pero encima de los campos de contacto. Visualmente que se vea como una caja negra, pueda tener width y height y cumpla la misma condición que el segundo punto, que no se vea la etiqueta/nombre del campo "Inventario" sino que solo este el contenido.

Pero sinceramente no sé como moverlo o editarlo. Estos son los códigos y la modificación del template. Les cuento la historia: por tumblr vi como podía hacerlo y dieron un código base, de ahí partí a hacer mi propio perfil. Siendo que nunca he modificado tanto la caja de los perfiles, creo que ando hecha un rollo que no entiendo nanai...

Por cierto, se me prendió el bombillo de buscar problemas similares acá y no encontré mucho. El tutorial de la bella Roshio me parece muy acertado siendo que la estructura es prácticamente la que quiero! Pero en serio me lío moviendo todo entonces preferiría seguir con el código que tengo actualmente xD aunque si no me queda de otra lo usaré... pero si pueden ayudarme a lograr los efectitos, les agradecería un montooooón!

CSS:

Código:

/*img miniatura de los perfiles*/
img.p-img {
    border: 4px solid #ffffff;
    display: block;
    height: 100px;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 30px;
    outline: 6px solid #000;
    width: 100px;
}

.campoperfil {/*campos del perfil*/
font-family: poppins;
 color: #111111;
 text-transform: lowercase;
 padding-top: 5px;
 border-top: 1px solid #999999;
 font-size: 12px;
 text-align:right;
}

.anunciocampo {
    background: #000;
    border: 3px double #fff;
    padding: 5px;
    color: #000;
    text-align: center;
    text-transform: uppercase;
    width: 80px;
}

.contenidocampo {
    width: 92px;
    height: 24px;
    margin-left: 97px;
    margin-top: -25px;
    margin-bottom: -15px;
    color: #000;
    font-family: monospace;
    font-size: 10px;
    text-align: center;
}

/*elperfil en los temas*/
.postprofile {
width: 250px;
display: block;
}

#avatarangel {
width: 250px;
height:400px;
outline: 1px solid #ffffff;
outline-offset: -10px;
}

#cajaperfilangel {
    background: #000000;
    height: auto;
    padding: 10px;
    width: 230px;
}

#nombreangel {
    font-family: monospace;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -1px;
    padding-top: 10px;
    text-align: center;
    text-transform: uppercase;
}

#rangoangel {
    color: #fff;
    font-family: calibri;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    padding-top: 4px;
    text-align: center;
    text-transform: lowercase;
}

.rgnarrador {
    border-top: 1px solid #e26eff;
    padding-top: 3px;
}

#cajadatosangel {
    -moz-transition: ease-in-out .8s;
    -ms-transition: ease-in-out .8s;
    -webkit-transition: ease-in-out .8s;
    background: #fff;
    height: 350px;
    margin: -385px 15px;
    opacity: 0;
    padding: 10px;
    position: relative;
    transition: ease-in-out .8s;
    width: 200px;
}

#imagenrangoangel {
 margin-left: -10px;
 margin-top: -10px;
}

#datosangel {
    background: #ffffff;
    display: block;
    padding: 5px;
    text-align: center;
}

#datosangel img {
    border: 0;
    height: 40px;
    margin: 0 auto;
    width: 40px;
}

#datosangel .label {
    font-size: 8px;
    font-weight: bold;
}

#contactoangel {
    background: #000;
    padding: 10px;
    margin-top: 7px;
    text-align: center;
}

.postprofile:hover #cajadatosangel {
 opacity: 1;
transition:ease-in-out 0.8s;-webkit-transition:ease-in-out 0.8s;-ms-transition:ease-in-out 0.8s;-moz-transition:ease-in-out 0.8s;
}


Template: viewtopic_body

Código:

<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
<!– div class="online2"></div–>
<div id="avatarangel">{postrow.displayed.POSTER_AVATAR}
<div id="cajadatosangel"><div id="imagenrangoangel">{postrow.displayed.RANK_IMAGE}</div>

              <!-- BEGIN profile_field -->
            <div id="datosangel"><div class="anunciocampo">{postrow.displayed.profile_field.LABEL}</div> <div class="contenidocampo">{postrow.displayed.profile_field.CONTENT}</div>{postrow.displayed.profile_field.SEPARATOR}</div>
              <!-- END profile_field -->
  
<!– BEGIN profile_field –>

<!– END profile_field –>

<div id="contactoangel">{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
   <!– BEGIN contact_field –> {postrow.displayed.contact_field.CONTENT}
   <!– END contact_field –></div>
</div></div>

<div id="cajaperfilangel"><div id="nombreangel">{postrow.displayed.POSTER_NAME}</div>
<div id="rangoangel">{postrow.displayed.POSTER_RANK_NEW}</div></div>
</div>

Dejo el link del foro de pruebas! http://weendale.foroactivo.com/t22-postprofile#42 de antemano muchas gracias por todo!

¡Hola Frappuccino!

Sinceramente no entendí bien que es lo que deseas mover, pero para quitar el cuadrito negro con el nombre de cada campo de perfil, si ya tienes un codigo en tu template:

Código:

<div class="anunciocampo">{postrow.displayed.profile_field.LABEL}</div>

Solo necesitas poner en el css:

Código:

.anunciocampo { display:none; }

Y así ya no aparecerán esos campos.

Y con CSS también puedes alinear los otros campos:

Código:

<div class="contenidocampo">{postrow.displayed.profile_field.CONTENT}</div>

Código:

.contenidocampo {
width: 150px;
margin:5px 10px;
border: 1px solid red;
}