Favicon Vikidia.png
¡Vikidia te necesita!Face-wink.svg
Corazón.svg

Actualmente tenemos 6667 artículos. ¡Anímate! Face-smile.svg a crear los artículos solicitados

Usuario:Pho3niX/Userbox/doc

De Vikidia
Ir a la navegación Ir a la búsqueda

Uso[editar · editar código]

Se puede utilizar esta plantilla para crear rapidamente cajas de usuario con el fin de mostrarlas en página de usuario sin necesidad de saber HTML o la sintaxis de las tablas. NOTA: Las imágenes no libres no pueden mostrarse en las userboxes, y están sujetas a expulsión por cualquier editor sin que se requiera de previo aviso.

{{Usuario:Pho3niX/Userbox
|align      = <!--alineamiento de la caja-->
|border-c   = <!--color del borde (por defecto = id-c)-->
|border-s   = <!--ancho del borde en pixeles (por defecto = 1)-->
|id         = <!--texto o imagen de la izquierda-->
|id-c       = <!--color del fondo del id-->
|id-fc      = <!--color de la fuente del id-->
|id-s       = <!--tamaño del texto del id-->
|info       = <!--texto de la derecha-->
|info-c     = <!--color del fondo del info-->
|info-fc    = <!--color de la fuente del info-->
|info-s     = <!--tamaño del texto del info-->
|width      = <!--ancho de la caja-->
|height     = <!--alto de la caja-->
|text-align = <!--alineamiento del texto-->
}}
  • Para los tamaños de los textos se usará el punto tipográfico.
  • Todos los parámetros son opcionales.

La mayoría de las tablas basadas en HTML usan sólo un puñado de estos atributos. El siguiente subconjunto se puede utilizar para convertir rápidamente un HTML en Userbox en el formato utilizado aquí:

{{userbox
| border-c      = 
| id            = 
| id-c          = 
| id-fc         = 
| id-s          = 
| info          = 
| info-c        = 
| info-fc       = 
| info-lh       = 
| info-s        = 
| nocat         = {{{nocat|}}}
| usercategory  = 
}}

Ejemplos[editar · editar código]

Código Resultado
{{Usuario:Pho3niX/Userbox}}
id info
{{Usuario:Pho3niX/Userbox
| id = foo
| id-s = 20
| id-c = #ffffee
| info = ''foo bar''
| info-c = #ffeeff
| info-s = 12
| border-c = #0D80A6
| border-s = 2
}}
foo foo bar
Debajo, el ejemplo muestra la apariencia predeterminada de un userbox, que es (mucho) más alta que 45px. Compare la altura de la de abajo con los userboxes anteriores.
{{Usuario:Pho3niX/Userbox
| id = foo logo
| id-c = #ffffee
| info = ''We are trying to see 
default distance in between text 
lines, and, see the distance in 
between cell content and its border 
and also see total height.''
| info-c = #ffeeff
| border-c = #0D80A6
| border-s = 2
}}
foo logo We are trying to see default distance in between text lines, and, see the distance in between cell content and its border and also see total height.
Debajo, el ejemplo muestra cómo podemos cambiar esas userboxes y además especificar parámetros para reducir la altura total de la userbox a la altura recomendada de 45px, incluso con cuatro líneas de texto. Colocando en el campo "info-p" podemos fijarla en "1pt 1pt 1pt 2pt", o "1pt 2pt" para una mejor apariencia, cuando hay 4 líneas de texto.
{{Usuario:Pho3niX/Userbox
| id = foo logo
| id-s = 14
| id-c = #ffffee
| id-lh = 1.1em
| info = ''We have specified values 
to lessen the distance in between 
text lines & padding space in between 
cell content and its border.''
| info-c = #ffeeff
| info-s = 8
| info-p = 1pt
| info-lh = 1.05em
| border-c = #0D80A6
| border-s = 1
}}
foo logo We have specified values to lessen the distance in between text lines & padding space in between cell content and its border.
Debajo, el ejemplo es para usuarios avanzados, ya que muestra cómo podemos especificar otras propiedades CSS; por ejemplo, "font-family", para cambiar la fuente o "text-align" para cambiar la alineación de los parámetros por defecto. A continuación, en el lado derecho hay dos userboxes: La superior se muestra sin los parámetros "font-family" o "text-align"; y la userbox inferior se muestra mediante el uso de los códigos que se pueden apreciar a continuación, con la ayuda del campo " info-op ".
{{Usuario:Pho3niX/Userbox
| id = foo logo
| id-s = 14
| id-c = #ffe
| id-lh = 1.1em
| info = foo bar
| info-c = #fef
| info-s = 14
| info-op = font-family:'Courier New'; text-align:center;
| border-c = #0D80A6
| border-s = 2
}}
foo logo foo bar

 
foo logo foo bar