Staff en línea
Últimos temas
[Ocio] Contemos hasta el 5000
por Chalo Lun Oct 15, 2018 8:24 am

[Revisado] Errores Yoshi Fans club
por YoshiGM Sáb Oct 13, 2018 12:36 pm

[CSS] Dar estilo a los rangos
por Eslam Love Miér Oct 03, 2018 11:15 pm

[CSS] Perfil dobles
Tema iniciado por y Añadir a favoritos

[CSS] Perfil dobles 
el Vie Mayo 22, 2015 4:59 pm
staff
Con éste tutorial sabrán como poner los campos del perfil en dos columnas para que tengan mejor visualización y queden más ordenados, algo como ésto:





PASOS

1.- Ordenamos los campos a nuestro gusto, en el caso de muestra que voy a poner los voy a ordenar de modo que me quedará al final:

Sexo - Mensajes
Puntos - Reputación
Fecha de inscripción
Ficha de personaje


Panel de administración → Usuarios & Grupos → Usuarios → Perfiles

Ahí moveremos todos al primer lugar, en el orden que queramos que aparezcan, de modo que debe quedar en éste orden:



Ahora modificamos cada campo de los que se ven en los perfiles, y ponemos en separador: ningún (ésto es muy importante).






2.- Vamos a cambiar el tamaño de ancho del perfil y el tamaño de la letra, ya que si se ve demasiado grande no cabrían los campos en dos columnas.

[hidecode]
Código:

postprofile {
      width: 166px;
    }

    .postprofile dd {
      font-size: 10px;
      font-family: calibri;
    }
[/hidecode]
El 166px es el tamaño de ancho, pueden poner el ancho que ustedes quieran.
Ahora comprobamos que no hay ninguna separación entre cada campo del perfil, es decir, todos tienen que quedar juntos de ésta manera:


3.- Comenzamos a hacer cada caja y a ponerlas en cada fila, quedando 2 columnas en cada fila.
Primero vamos a poner un color de fondo y a definir el ancho y el alto de cada caja. En el ancho deben poner menos de la mitad del ancho del perfil que hemos puesto antes (166px en mi caso) porque si no no cabrían.


Código:

    .postprofile span.label {
      background: COLOR DE FONDO;
      padding-top: 3px;
      padding-bottom: 3px;
      padding-left: 3px;
      width: 70px;
      display: inline-block;
    }

El 70px es el tamaño de ancho, y el "COLOR DE FONDO" deben cambiarlo por el color que quieran poner como fondo de las cajas.
No se preocupen por cómo se vea, ahora se arreglará cada campo y se posicionarán para que nos quede bien.

4.- Modificamos cada campo uno por uno, en primer lugar modificaremos el primer campo (en mi caso el del sexo) de ésta manera:



Código:
 .postprofile span.label:first-child {
      margin-right: -45px;
    }

Con éste código hemos juntado el icono del sexo al texto para que no se salga de la caja.

Modificamos en segundo lugar el segundo campo, en éste caso, el campo de mensajes de la siguiente manera:



Código:
    .postprofile span.label:nth-child(3) {
      margin-left: 34px;
      margin-right: -28px;
    }

Lo podemos posicionar a nuestro gusto, cambiando el margin-left por el desplazamiento a la izquierda que queramos y el margin-right por el desplazamiento a la derecha que queramos (es negativo porque se debe de juntar el número de mensajes, que es lo que hay a la derecha, con la caja de mensajes).

Ahora vamos a modificar el tercer campo (en mi caso el campo de puntos).



Código:
  .postprofile span.label:nth-child(4) {
      margin-right: -40px;
      margin-top: 3px;
    }

Viene el cuarto campo (en mi caso el de reputación).



Código:
    .postprofile span.label:nth-child(5) {
    margin-right: -21px;
    margin-left: 35px;
    }

Y listo, ahora viene el de fecha de inscripción que como es muy largo he decidido ponerlo en una línea, a continuación dejo como ponerlo.

5.- Modificamos un campo que dejaremos en una línea (en mi caso el quinto campo, que es el de fecha de inscripción) y usamos el código:

Código:

    .postprofile span.label:nth-child(6) {
    margin-right: -60px;
    width: 147px !important;
    margin-top: 3px;
    }

Hemos cambiado el ancho por 147px para que ocupe una línea, cambiarlo por el tamaño que veáis conveniente (ya que no todos pondréis el mismo tamaño de perfiles por lo que el tamaño varía según el tamaño que hayan puesto al perfil). Podéis cambiar el color de fondo si queréis, poniendo background: COLOR DE FONDO; en el código anterior (también pueden cambiar el color de fondo de cada caja).

Por último el sexto y último campo (en mi caso el de ficha de personaje, lo puse el último pero pueden poner más campos si quieren).



Código:
  .postprofile span.label:nth-child(7) {
      margin-top: 3px;
      width: 147px !important;
      margin-right: -112px;
      color: transparent !important;
    }

Si no quieren que se vea el título de ese campo van al perfil desde:

Panel de administración → Usuarios & Grupos → Usuarios → Perfiles

Le dan a modificar y en el color ponen el color de fondo para que no se vea el texto y se quede solo el enlace.

Y listo, cuando hayamos terminado de modificar cada campo siguiendo los pasos nos va a quedar algo como ésto.

6.- Pueden hacer alguna modificación más en el perfil si lo desean, por ejemplo, ponerle fondo al nick de usuario y poner el ancho de los campos del perfil o cambiar el rango.

Para modificar el nick del usuario usamos éste código:



Código:
  .postprofile strong:first-child {
      background: COLOR DE FONDO;
      padding-right: 53px;
      padding-left: 54px;
      padding-top: 5px;
      padding-bottom: 5px;
    }

    .postprofile dt img:first-child {
      margin-bottom: 6px;
      border-bottom: 5px solid COLOR BORDE ABAJO;
      margin-top: 8px;
    }

7.- Ya hemos terminado, pero por último os dejo una recomendación para que todo esté correcto y un ejemplo de un perfil ejemplo que pueden conseguir.

IMPORTANTE:: Os recomiendo que a la izquierda nunca pongan perfiles con números modificables (mensajes, reputación, puntos etc) yo en mi caso para mostrar el tutorial lo hice, pero no lo recomiendo ya que al cambiar por ejemplo el número de 0 a 10, al tener dos caracteres se desplaza el siguiente campo a la derecha y no queda bonito. Por eso es mejor que a la izquierda pongan campos de número de caracteres o camps que no cambien (como una imagen etc).
Chalo
avatar

¿Que estoy pensando? :

ayudando como debe ser [table class=fecha_up][td]Se modifico:2/010/18 - 20:40 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6839


Puntos :

8934


Me gusta :

1030


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [CSS] Perfil dobles 
el Dom Ago 23, 2015 5:08 pm
se ve bueno gracias por el aporte
kuke
avatar

¿Que estoy pensando? :

diseñar y hacer amigos[table class=fecha_up][td]Se modifico:14/8/15 - 1:07 hrs.[/td][/table]


Banner en temas :

https://cherieroedirksen.files.wordpress.com/2012/11/a-new-dawn-facebook-cover.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

120


Puntos :

208


Me gusta :

40


ingreso :

27/07/2015


Sexo :

Masculino

Plataforma :

punBB


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [CSS] Perfil dobles 
el Lun Oct 05, 2015 7:10 pm
[tag]Chalo[/tag] una pregunta esto funciona para Punbb también o habrá que probar?
CD"MA
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://www.covermyfb.com/media/covers/thumb/15699-dj-spinning-music.jpg


Color de titulos :

red


Sombra titulo :

1px 1px 1px #ccc


Mensajes :

336


Puntos :

474


Me gusta :

46


ingreso :

16/05/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.