Infobox Portatil/Guía

Guía para hacer una Infobox Portatil
Antes que nada, se agradece a las explicaciones de BranDaniMB para el mejor entendimiento de estos temas. Igualmente, se aclara que, la redacción de esta guía es de una manera entendible para Taxcy Marsopas1, por ello, si no se comprende pida ayuda en comunidad central u a otros usuarios conocedores del tema.

## XML

*Véase también: Etiquetas XML*

* **Infobox:**da apertura a la creación de la infobox, permitirá su edición específica en CSS una vez dándole un tema.

**Normal:**

```
<infobox>
Contenido...
</infobox>

```

**CSS Exclusivo:**

```
<infobox theme="ejemplo">
Contenido...
</infobox>

```

* **Title:**agrega el título de la infobox.

**Normal:**

```
<infobox>
<title source="title1">
<default>{{PAGENAME}}</default>
</title>

```

*Nota ~>*

*```
{{PAGENAME}}
```* *automáticamente pone el nombre de la página; aunque por el caractér*

*```
title1
```* *se le podrá colocar el nombre que se quiera.*

* **Data:**permite colocar la información a lo largo de la infobox.
* **Label:** información mostrada del lado izquierdo de la infobox.

**Normal:**

```
  <data source="nombre">
    <label>Nombre Real</label>
  </data>
  <data source="genero">
    <label>Género</label>
  </data>

```

* **Header:**son los subtítulos de la infobox, divisiones de información.

```
<header>Information group</header>

```

* **Image:**Permite poner una imagen dentro de la infobox.
* **Caption:** Permite colocar información breve debajo de la infobox.

```
<image source="image1">
    <caption source="caption1"/>
  </image>

```

* **group:**Agrupa parte de la sintaxis para su división y clasificación.

```
<group>
<header>Information group</header>
<data source="first"><label>First</label><default>''text''</default></data>
<data source="second"><label>Second</label><default>''text''</default></data>
</group>

```

* **group layout:**permite la creación de pequeñas secciones cuadriculadas en un mismo renglón o espacio.

```
<group layout="horizontal">
...
</group>

```

Otros

* **Source:**el source o fuente es como aparecerá el rublo a colocar información a la hora de editar una infobox.
* **Theme:** el tema es el que permite la edición de la infobox en especial por medio de CSS.

## Palabras claves

Aquí está una lista de palabras claves para editar en el Wikia.css las infoboxes.

* **.portable-infobox** ~> edita todas las infoboxes portátiles
* **.pi-theme-ejemplo** ~> editara la plantilla cuyo tema sea con x nombre (sustituye ejemplo con el nombre que se le vaya a dar)
* **.pi-data-label** ~> edita todas las label de la plantilla a editar.
* **.pi-title** ~> editara solamente el carácter título de la infobox.
* **.pi-data-value**~> editara los valores del data.
* **.pi-header** ~> edita el subtítulo.
* **pi-group** ~> edita los diferentes grupos dentro de la etiqueta *group*.

## Códigos

Esta sección posee diferentes mezclas aleatorias para decorar y/o configurar el diseño de una infobox portátil; puedes hacer pruebas en este lugar: Zona de pruebas CSS para infoboxes portátiles.

### Configuración

Es importante que para colocar una infobox sigas los siguientes pasos:

1. Colocar la plantilla correspondiente a la infobox. (para colocar una plantilla usar paréntesis, por ejemplo:
```
{{InfoboxUno}}
```
2. Colocar la imagen y el caption, recuerda que para centralizar el caption debes usar el código de *center*, que te permitirá centrar tu texto y para la imagen usar *File:Name.png* (cambie usted *Name* por el nombre de la imagen o use otra extensión en lugar de *.png*).
3. Rellenar las secciones correspondientes de tu infobox; recuerda que cada wiki posee infoboxes diferentes, por lo cual es importante que las analices, aquí tenemos un ejemplo en base a la infobox que puedes encontrar dentro de la Zona de pruebas CSS para infoboxes portátiles.

```
{{InfoboxBlack
}}

```

## Diseño

Puede usar cualquiera de estos códigos para hacer diferentes diseños para sus infoboxes. Aquí se encuentran imágenes de ejemplo del resultado dentro de una infobox y el código correspondiente.

### Infobox Completa

* Contorno Bold
* Contorno II

```
.portable-infobox {
    background: #fff;
    border: 10px solid;
    margin: auto;
}

```

```
.pi-theme-ejemplo  {
	background-color: #fff;
	border: 3px solid rgba(169, 169, 169, .8);
	overflow: hidden;
}

```

### Label

* Highlight

```
.pi-data-label {
background-color: yellow;
}

```

### Título

* Fondo
* Contorno
* Letras
* Contorno, fondo y letras

```
.portable-infobox .pi-title {
	background-color: #0080FF;
}

```

```
.portable-infobox .pi-title {
	background-color: #0080FF;
	color: black;
	border: 5px solid green;
}

```

```
.portable-infobox {
    background: #fff;
    border: 1px solid;
    clear: both;
    float: none;
    margin: auto;
    padding: 1px;
    width: 99.1% !important;
display:flex;
}
.portable-infobox .pi-title {
    color: white;
    font-family: Arial;
    font-size: 16.8px;
    font-weight: 700;
    line-height: 22px;

    padding: 1px;
}
.portable-infobox {
    border-color: white;
}
.portable-infobox .pi-data-label {
    background: #f1e9b3;
padding:2px;
font-size:12.6px;
line-height:22px;
flex-basis:128px;
vertical-align:middle;
padding-right:5px;
}
.portable-infobox .pi-item-spacing {
    padding: 0;
}
.portable-infobox .pi-image {
    width:30%;
    -webkit-margin-start: -8px;
padding:0;
}
.portable-infobox .pi-image img {
    max-width:190px;
max-height:85px;
}

```

```
.pi-group {
    background: #red;
    border: 10px solid;
}

```

```
/**Waff en Electropedia**/
.portable-infobox {
    background-color:black;
    border:10px groove #bbf411;
}

.portable-infobox .pi-border-color {
    border-color:#bbf411;
}

.portable-infobox .pi-title {
    padding:8px 10px;
    line-height:normal !important;
    font-weight:bold;
    font-size:16px;
}

.pi-title, .pi-secondary-background {
    text-align:center;
    color:Black;
    background:-webkit-gradient(linear,0% 0%,0% 100%,color-stop(0%,#bbf411),color-stop(100%,#e5029d))
}

```

```
/**Bran en Horizon**/
.portable-infobox {
	background-color: transparent !important;
	font-family: Play;
	font-weight: 400;
}
.portable-infobox .pi-title {
	background: linear-gradient(to bottom, #c03232 20%, #454141 20%);
	margin-bottom: 5px;
}
.portable-infobox .pi-header {
	background: linear-gradient(to top, #c03232 15%, #454141 15%);
	margin: 5px 0;
}
.portable-infobox .pi-caption {
    text-align: center;
    color: #000;
}
.portable-infobox .pi-data {
	background-color: #454141;
	margin: 5px 0;
}
.portable-infobox .pi-data-label {
	color: #fff;
	display: flex;
	font-size: 1.1em;
	justify-content: center;
}
.portable-infobox .pi-data-value {
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	font-size: 1em;
	justify-content: center;
}
.portable-infobox .pi-image {
	background: #c03232;
	padding: 5px 0;
}

```