[Importante] Guía de estilo

[fa]code[/fa] Guía de estilo

En la Orden de los Heraldos no usamos tablillas HTML para estilizar los posts de rol ni los de administración. En su lugar el estilo está integrado en el mismo diseño del foro, que ya cuenta con un fondo que recoge el contenido de los posts y diversas opciones de estilización bbcode para cabeceras, separadores, resaltados, bloques de texto y demás.

A continuación se encuentran las distintas formas cómo puedes personalizar tus posts utilizando las herramientas que ofrecemos.

Instrucciones

1. Está prohibido el empleo de tablillas y códigos externos al foro.
   
2. Se puede personalizar los códigos ofrecidos por el foro pero siempre manteniendo los siguientes elementos del diseño íntegros: colores de fondo, fuente del texto (color, tamaño y familia), color de acento general.
   
3. Está prohibido emplear códigos para cambiar el diseño del foro más allá del post en cualquier zona fuera de: baúles, casilleros, crónicas personales y temas en la sección UA.
   
4. El código de Modificar personaje no puede usarse para interpretar PNJs fuera de aquellos temas dónde se otorgue permiso (como las Crónicas), baúles o casilleros y temas en la sección UA.
   
5. De necesitar algún tipo de diseño específico o tener dudas sobre cómo usar alguno de los códigos ofrecidos podéis consultar con el staff en el Buzón administrativo.
   

---

Cabecera

Código:

[h2]Cabecera[/h2]

Título de sección

Código:

[h3]Título de sección[/h3]

Texto destacado

Código:

[h4]Texto destacado[/h4]

Bloque enmarcado

Texto citado o resaltado aquí.

Código:

[quote]Texto citado o resaltado aquí.[/quote]

Listas

• Elemento de lista.
  
• Elemento de lista.
  
• Elemento de lista.
  

Código:

[list][*]Elemento de lista.
[*]Elemento de lista.
[*]Elemento de lista.[/list]

1. Elemento de lista.
   
2. Elemento de lista.
   
3. Elemento de lista.
   

Código:

[list=1][*]Elemento de lista.
[*]Elemento de lista.
[*]Elemento de lista.[/list]

Esto de texto

Esto es un texto en negrita, aquí se ve el texto en cursiva, también hay texto subrayado así como texto tachado.

Código:

Esto es un [b]texto en negrita[/b], aquí se ve el [i]texto en cursiva[/i], también hay [u]texto subrayado[/u] así como [strike]texto tachado[/strike].

Variables de colores

• Acento: var(--accent)
  
• Grupo del posteador: var(--accentGroup)
  
• Grupo 1: var(--grupo2)
  
• Grupo 2: var(--grupo3)
  
• Grupo 3: var(--grupo4)
  

Separador de tablillas

Código:

[hr]

Con este código se puede imitar el efecto de poner múltiples tablillas en un mismo post, como se puede ver en este mismo tema. Se puede insertar este código desde la barra de bbcodes, haciendo click en [fa]grip-lines[/fa].

---

Fuentes de iconos

[fa]hand[/fa] [if]hand[/if] [gi]hand[/gi]

Código:

[fa]hand[/fa] [if]hand[/if] [gi]hand[/gi]

El foro tiene instaladas tres fuentes de iconos: Game Icons, IcoFont y Font Awesome 6 Free. Podéis usarlas en su formato HTML, CSS o con nuestra versión bbcode (accesible desde la barra de bbcodes, haciendo click en [fa]font-awesome[/fa]).

Color de diálogo

—[bcolor]Diálogo a color[/bcolor]

Código:

—[bcolor]Diálogo a color[/bcolor]

Podéis establecer vuestro color personal desde las Opciones de usuario. Se puede insertar este código, junto a la raya de diálogo, desde la barra de bbcodes, haciendo click en [fa]comment-dots[/fa].

También está disponible en versión HTML a través del class .cp o aplicando la variable var(--personalClr) ahí dónde queráis que salga.

Datos de rol

[tabdatos][fa]clock[/fa] DD/MM/AA [fa]map-marker-alt[/fa] Lugar [fa]user[/fa] Personaje[/tabdatos]

Código:

[tabdatos][fa]clock[/fa] DD/MM/AA [fa]map-marker-alt[/fa] Lugar [fa]user[/fa] Personaje[/tabdatos]

Podéis integrarlo al inicio o al final de vuestros posts de rol, así como también debajo de un título, imagen o icono y el diseño se adapta de forma automática. Se puede insertar este código desde la barra de bbcodes, haciendo click en [fa]book-open[/fa]. También está disponible en versión HTML usando el class .tab-datos.

Recuadro de dados

[tabdatos][fa]hand-point-up[/fa] Percepción [gi]targeted[/gi] Dificultad 9 [fa]dice[/fa] 7 + 2 = 9[/tabdatos]

Código:

[tabdatos][fa]hand-point-up[/fa] Tipo de prueba [gi]targeted[/gi] Dificultad [fa]dice[/fa] DADO + ATR = TOTAL[/tabdatos]

Con este código permite reflejar las pruebas de control realizadas en un post de rol, o se puede adaptar para indicar otros conceptos como acciones especiales o habilidades usadas. Podéis integrarlo al final de vuestros posts de rol. También está disponible en versión HTML usando el class .tab-datos.

---

Modificar personaje

Con este código se puede cambiar toda la información del personaje en los posts, para rolear flashbacks, pnjs, narraciones o personajes inventados en el UA. Se puede insertar este código desde la barra de bbcodes, haciendo click en [fa]masks-theater[/fa].

Código:

<div class="modificar-pj" avatar="AVATAR" nombre="NOMBRE" rango="RANGO" clase="CLASE" escuadron="ESCUADRÓN" edad="EDAD" servicio="SERVICIO" origen="ORIGEN" nivel="NIVEL" destreza="DESTREZA" reflejos="REFLEJOS" fortaleza="FORTALEZA" voluntad="VOLUNTAD" percepcion="PERCEPCION" inteligencia="INTELIGENCIA" grupo="GRUPO" icono="ICONO"></div>

Las opciones disponibles son:

• Nombre: Cambia el nombre del personaje por otro a elección.
  
• Rango: Cambia el rango por otro texto a elección. De desear cambiar el dios, se debe introducir como "Heraldo de DIOS".
  
• Clase: Cambia la clase en el miniperfil por otra a elección, o puede ponerse cualquier otro término. No afecta al icono.
  
• Escuadrón: Cambia el escuadrón en el miniperfil por otro a elección, o puede ponerse cualquier otro término. De desear cambiar el escuadrón, se debe introducir como "Escuadrón NOMBRE".
  
• Edad / Servicio / Origen: Cambia cada dato de los campos de Edad, Servicio y Origen en el miniperfil. Para la edad, solo hay que poner el nuevo valor numérico.
  
• Nivel / Estadísticas: Cambia el Nivel y cada Estadística en el miniperfil. A rellenar con valores numéricos.
  
• Grupo: Cambia el color de acento del post al de otro grupo (narracion, grupo2, grupo3 o grupo4). No compatible con la opción Color.
  
• Grupo: Cambia el color de acento del post por uno personalizado. A rellenar con el código hexadecimal del color. No compatible con la opción Grupo.
  
• Icono: Cambia el icono en la cabecera del post por otro a elección. A rellenar con el nombre del nuevo icono (ver: Game Icons, IcoFont o Font Awesome 6 Free).
  
• Ocultar datos: Añade ocultar-datos al final del código para eliminar el hover del miniperfil y ocultar su contenido.
  
• Quitar perfil: Añade quitar-perfil al final del código para eliminar el miniperfil y ampliar el ancho del post.
  

---

Tablilla de batalla

Aquí irá el código de la tablilla de batalla y su explicación cuando lo tenga.

[tabdatos][fa]clock[/fa] DD/MM/AA [fa]map-marker-alt[/fa] Lugar [fa]user[/fa] Personaje[/tabdatos]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum dolor est, ac interdum nisl scelerisque eu. Quisque vulputate vitae mauris vitae consectetur. Fusce rutrum augue ac tincidunt hendrerit. Proin ac dui odio. Praesent turpis neque, convallis ut tempus vel, eleifend a lectus.

Donec molestie metus et dignissim varius. Donec euismod purus quis purus auctor, non pellentesque justo facilisis. Etiam tempor pulvinar enim vitae posuere.

—[bcolor]Diálogo[/bcolor] —Acción.

Nam et ante bibendum, condimentum tellus ac, dictum diam. Mauris sagittis facilisis massa, iaculis aliquam urna imperdiet in. Aenean sit amet eros libero. Donec id tincidunt velit. Nullam finibus nisl ac blandit sagittis. Pellentesque eget viverra nisl. Sed aliquet nunc vel metus ullamcorper tempus. Integer volutpat turpis non orci scelerisque consequat.

---

Código:

[tabdatos][fa]clock[/fa] DD/MM/AA [fa]map-marker-alt[/fa] Lugar [fa]user[/fa] Personaje[/tabdatos]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum dolor est, ac interdum nisl scelerisque eu. Quisque vulputate vitae mauris vitae consectetur. Fusce rutrum augue ac tincidunt hendrerit. Proin ac dui odio. Praesent turpis neque, convallis ut tempus vel, eleifend a lectus.

Donec molestie metus et dignissim varius. Donec euismod purus quis purus auctor, non pellentesque justo facilisis. Etiam tempor pulvinar enim vitae posuere.

—[bcolor]Diálogo[/bcolor] —Acción.

Nam et ante bibendum, condimentum tellus ac, dictum diam. Mauris sagittis facilisis massa, iaculis aliquam urna imperdiet in. Aenean sit amet eros libero. Donec id tincidunt velit. Nullam finibus nisl ac blandit sagittis. Pellentesque eget viverra nisl. Sed aliquet nunc vel metus ullamcorper tempus. Integer volutpat turpis non orci scelerisque consequat.

---

Título chupi del tema

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum dolor est, ac interdum nisl scelerisque eu. Quisque vulputate vitae mauris vitae consectetur. Fusce rutrum augue ac tincidunt hendrerit. Proin ac dui odio. Praesent turpis neque, convallis ut tempus vel, eleifend a lectus.

Donec molestie metus et dignissim varius. Donec euismod purus quis purus auctor, non pellentesque justo facilisis. Etiam tempor pulvinar enim vitae posuere.

—Diálogo —Acción.

Nam et ante bibendum, condimentum tellus ac, dictum diam. Mauris sagittis facilisis massa, iaculis aliquam urna imperdiet in. Aenean sit amet eros libero. Donec id tincidunt velit. Nullam finibus nisl ac blandit sagittis. Pellentesque eget viverra nisl. Sed aliquet nunc vel metus ullamcorper tempus. Integer volutpat turpis non orci scelerisque consequat.

---

Título chupi del tema

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum dolor est, ac interdum nisl scelerisque eu. Quisque vulputate vitae mauris vitae consectetur. Fusce rutrum augue ac tincidunt hendrerit. Proin ac dui odio. Praesent turpis neque, convallis ut tempus vel, eleifend a lectus.

Donec molestie metus et dignissim varius. Donec euismod purus quis purus auctor, non pellentesque justo facilisis. Etiam tempor pulvinar enim vitae posuere.

—Diálogo —Acción.

Nam et ante bibendum, condimentum tellus ac, dictum diam. Mauris sagittis facilisis massa, iaculis aliquam urna imperdiet in. Aenean sit amet eros libero. Donec id tincidunt velit. Nullam finibus nisl ac blandit sagittis. Pellentesque eget viverra nisl. Sed aliquet nunc vel metus ullamcorper tempus. Integer volutpat turpis non orci scelerisque consequat.

---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum dolor est, ac interdum nisl scelerisque eu. Quisque vulputate vitae mauris vitae consectetur. Fusce rutrum augue ac tincidunt hendrerit. Proin ac dui odio. Praesent turpis neque, convallis ut tempus vel, eleifend a lectus.

Donec molestie metus et dignissim varius. Donec euismod purus quis purus auctor, non pellentesque justo facilisis. Etiam tempor pulvinar enim vitae posuere.

—Diálogo —Acción.

Nam et ante bibendum, condimentum tellus ac, dictum diam. Mauris sagittis facilisis massa, iaculis aliquam urna imperdiet in. Aenean sit amet eros libero. Donec id tincidunt velit. Nullam finibus nisl ac blandit sagittis. Pellentesque eget viverra nisl. Sed aliquet nunc vel metus ullamcorper tempus. Integer volutpat turpis non orci scelerisque consequat.