Dar estilo

XenForo viene con un estilismo y moderno aspecto aunque siempre existen foros que precisan que su estilo coincida con el material y temática de que tratan haciendo necesario modificar XenForo a tal fin.

XenForo viene de serie con una serie de herramientas que permiten re-estilar el foro con un estilo tan suave como radicalmente se desee.

Puede quererse ajustar algunos colores o cambiar dramáticamente su aspecto a través de plantillas personalizadas de HTML.

Las herramientas disponibles para ajustar y modificar el estilo van desde controles fáciles de usar para ajustar colores, fuentes y sus tamaños hasta usar editores de código (para expertos) lo que permite editar completamente el CSS y el HTML que envuelve al sistema.

Estilos

Todas las herramientas de estilado de XenForo se agrupan en colecciones denominadas Estilos, que son algo como las pieles o Temas.

Los estilos consisten en plantillas HTML, plantillas CSS/LESS y Propiedades del estilo, que son conjuntos de valores usados para inyectar el estilismo elegido en las plantillas. Más sobre las propiedades del estilo, más tarde...

Al instalar XenForo por primera vez, solo viene con el estilo predeterminado, denominado Estilo predeterminado. Se puede modificar líbremente cualquier aspecto del mismo, pero también se pueden usar otras posibilidades de XenForo, como tener varios estilos disponibles.

Para agregar un segundo estilo, saolo hayy que cambiar la vista entre el nuevo estilo y el estilo predeterminado líbremente para asegurar que cada cosa va según se planifica.

Pre-definir estilos

Existe un alojamiento de diseñadores y programadores que producen estilos para el sistema XenForo y así se puede encontrar un estilo profesionalmente diseñado pre-definido que cubra lo que se necesita.

Aplicar un estilo pre-definido a la instalación de XenForo solo lleva unos pocos minutos y es sencillo de gestionar por la mayoría de administradores de sitios.

Una gran variedad de estilos pre-definidos está disponible en el Gestor de Recursos de XenForo.

Configurar el estilo predeterminado

Cuando un sitio tiene varios estilos instalados, puede indicarse cual de ellos será el predeterminado para los que no hayan prefijado ninguna preferencia.

Para hacerlo, hay que acudir a la sección Aspecto del sistema principal de opciones de XenForo y seleccionar el estilo que se desea actúe como predeterminado usando la opción Estilo predeterminado.

También puede especificarse el estilo predeterminado para el email HTML en el mismo lugar.

Herencia del estilo

Cuando se agrega un estilo, se precisa elegir si será secundario de un estilo existente o no.

Si se elige que no tenga estilo primario, el nuevo estilo heredará automáticamente todos sus datos del invisible Estilo maestro, normalmente oculto a la vista.

Alternativamente, si se crea el estilo como secundartio del Estilo predeterminado, automáticamente heredará todos sus datos del Estilo predeterminado, que a su vez hereda todos sus datos del Estilo maestro. Cualquier cambio hecho en cualquier momento al Estilo predeterminado se heredará instantáneamente por el nuevo estilo secundario, salvo que el estilo secundario tenga hechas modificaciones en los datos que se cambian en el estilo primario.

¿Aún confuso?

No preocuparse, es mucho más sencillo de lo que parece.

Es mejor poner un ejemplo, en el que se va a funcionar con un estilo denominado 'Mi estilo', creado como secundario del Estilo predeterminado.

• (1) Estilo predeterminado
  • (2) Mi estilo

Vamos a suponer que se cambia el valor de la propiedad del estilo llamado textColor, que controla el color de la mayoría de los textos de XenForo.

Antes de cambiar algo, el valor de textColor es @xf-paletteNeutral3, que en sí mismo supone una referencia a un color en la paleta de XenForo y que es un gris muy, muy oscuro. Básicamente es negro.

Este valor está configurado en el Estilo maestro, heredado por el Estilo predeterminado y a su vez heredado por Mi estilo.

Supongamos que se cambia el valor de textColor en el Estilo predeterminado a azul. Tan pronto como lo haga, el valor efectivo de textColor en Mi estilo será también azul, ya que el cambio se hereda desde el Estilo predeterminado.

Cambiar la herencia

En el ejemplo de arriba, Mi estilo heredaba un valor personalizado azul en la propiedad del estilo textColor desde su estilo primario, el Estilo predeterminado.

Sin embargo, este valor azul solo fue heredado, por lo que puede volverse al gestor del estilo y cambiar Mi estilo a no tener primario y así, la personalización azul desaparecerá de Mi estilo.

Sobreescribir la herencia

Con Mi estilo heredando azul como valor de textColor de su primario, el Estilo predeterminado, es posible sobreescribir esta herencia mediante la personalización del valor en Mi estilo en sí mismo.

If we edit the value of textColor in Mi estilo and set it to red, the blue value will no longer be inherited from Estilo predeterminado, because Mi estilo has its own customized value, which overrides the inherited value.

Resumen de herencia

La capacidad de heredar estilos en XenForo permite gtenerar conjuntos de estilos que hereden uno de otro, por lo que solo es preciso realoizar cambios menores en los estilos secundarios, con personalizaciones heredadas desde sus primarios.

Considérese el siguiente árbol de estilos, en donde cada nombre del estilo describe una personalización realizada en ese estilo.

• (1) Estilo predeterminado
  • (2) Cabecera personalizada
    • (3) Pie grande
      • (5) Fondo rojo
      • (6) Fondo azul
    • (4) Texto pequeño
      • (7) Fondo rojo
      • (8) Fondo azul

En este ejemplo, (2) Cabecera personalizada es un estilo que personaliza el aspecto de la cabecera principal del sitio para que coincida estilísticamente con el resto del sitio.

(3) Pie grande y (4) Texto pequeño heredan su cabecera personalizada de su estilo primario. Cada uno de estos estilos tiene dos estilos secundarios que personalizan el color del fondo a rojo o azul. Todos ellos heredan la cabecera personalizada del estilo personalizado de mayor nivel.

Propiedades del estilo

Las propiedades del estilo permiten a los administradores ajustar fácil y rápidamente cosas como colores, tamaños y fuentes de sus estilos.

Los valores de todas las propiedades de un estilo se heredan de su(s) estilo(s) primario(s), salvo que estén específicamente personalizadas en ese estilo.

Todas las propiedades se agrupan en grupos lógicos de la página gestora en las Propiedades del estilo. Haciendo clic en el nombre de un grupo se abrirá el editor de las propiedades del estilo de ese grupo.

Las propiedades del estilo pueden ser cualquier número de tipos de propiedades, en dependencia de los datos diseñados a controlar.

Algunas propiedades están diseñadas para tener un solo valor y que son los siguientes:

• Colores
• Valores de texto
• Números con unidades (como 10px)
• Números sin unidades
• Conmutadores Sí/No
• Opciones de elección múltiple

Otras propiedades están diseñadas para tener un conjunto de valores agrupados para definir reglas de estilo de la interfaz de un elemento particular. Este tipo de propiedades CSS pueden incluir valores como los siguiente:

• Color del texto, tamaño, fuente y estilo
• Estilo del fondo
• Tamaño del borde, estilo, color y rádio
• Relleno y margen
• Reglas extra de CSS

Colores

Son un solo conjunto de propiedades, visibles en la Paleta de color del gestor de las propiedades del estilo.

Aquí se tiene un número de colores definidos, que se usan para definir la paleta de color completa usada por XenForo para generar su interfaz. Cambiando cualquiera de estos colores se reemplazarán todas las instancias de ese color en el sistema.

Adicionalmente, existe un solo conmutador para configurar el tipo de estilo como Claro u Oscuro. Este conmutador se usa para definir como se modifican los colores cuando el sistema quiere mezclar, intensificar o disminuir un color. Por ejemplo, Si el estilo se configura a Claro y el sistema quiere intensificar un color, se oscurecerá este, mientras que si se aclarará el estilo si se configura en Oscuro.

El conjunto de colores de la paleta se referencia al sistema XenForo, más importantemente en el segundo grupo de propiedades del gestor de propiedades del estilo, Colores básicos.

En el grupo Colores básicos, los colores de la Paleta de color están diseñados como roles, como Color del texto y Color del fondo del contenido. Las propiedades del estilo se referencian usando el prefijo @xf- seguido de un ID único de propiedad del estilo, por lo que para referenciar la propiedad del estilo Neutral 3 de la Paleta de color, cuyo ID único es paletteNeutral3, se hará @xf-paletteNeutral3. Podrá verse en el Estilo predeterminado, que la propiedad del estilo Color de texto (textColor) usa el valor de esta propiedad.

Propiedades más avanzadas

En el gestor de propiedades del estilo, ábrase el grupo Cabecera y navegación.

Aquí se encontrarán las propiedades del estilo que controlan el aspecto superior de todas las páginas de XenForo, incluyendo la cabecera y la navegación pública.

Algunos valores de las propiedades de aquí son únicos, como el Color de ajuste de cabecera, que define un color para el fondo del buzón y área de alertas de la cabecera.

Abajo de la página pueden encontrarse propiedades más avanzadas, agrupadas en grupos lógicos.

Abriendo el grupo Fila de cabecera/logo se encuentra un conjunto de propiedades que se usan para dar estilo a la sección principal de la cabecera. En el Estilo predeterminado, aquí solo haremos uso de valores, a saber el color de cualquier texto de la cabecera, que configuraremos para usar Color 2 de la paleta, o @xf-paletteColor2, y el color de fondo principal, que configuraremos para usar Color 5 de la paleta, o @xf-paletteColor5.

Al hacer clic en el trozo junto al nombre del color en uso, se abrirá una ventana emergente en la que se podrá seleccionar un color diferente de entre el rango de colores básicos o de la paleta de color o usar un Selector para elegir un nuevo color. Una vez seleccionado el color deseado, hay que hacer clic en el botón Actualizar y se actualizará el control. Pulsar el botón Guardar y se verán los cambios realizados cuando se cargue seguidamente una página del lado público da la instalación de XenForo.

Al crear un conjunto de propiedades del estilo personalizadas de esta manera, puede cambiarse dramáticamente el aspecto sel sitio XenForo.

Plantillas

La salida final de todas las páginas de XenForo se controla mediante Plantillas. Las plantillas contienen bien HTML bien CSS/LESS, junto con una mejora del lenguaje especial de XenForo denominada sintaxis de plantilla, que permite manipular datos directam en las plantillas en vez de escribir código PHP que haga el trabajo.

Las plantillas que contienen reglas del estilo en CSS/LESS, van con una extensión de archivo .less o .css y no contienen HTML. Sirven como contenedores para reglas que incluyen propiedades del estilo y que definen como se muestra el HTML que reside en las plantillas. Los valores de las propiedades del estilo de las plantillas LESS/CSS se referencian usando el sistema @xf-stylePropertyName.

Las plantillas HTML contienen el marco que presenta los datos de XenForo al mundo y que pueden contener variables de PHP {$variableName}, etiquetas especiales de XenForo <xf:tagname ...> y funciones de plantilla de XenForo {{ functionName($arg1, $arg2, ...) }}.

Pueden personalizarse todas las plantillas usando el editor de plantillas, pero debe tenerse en cuenta que ediciones erróneas pueden romper importantes funcionalidades si no se sabe lo que se está haciendo.

Herencia de las plantillas

Como las propiedades del estilo, las plantillas tienen herencia de sus esttilos primarios salvo que hayan sido personalizadas en el estilo actual.

Actualizar con plantillas personalizadas

Al personalizar una plantilla, se guardan los cambios y no se sobreescriben hasta que no se instruye específicamente al sistema para hacerlo.

Esto evita cambios no deseados y también significa que las plantillas personalizadas pueden quedar obsoletas cuando llega el momento de actualizar XenForo a una versión más reciente, si la nueva versión contiene una versión actualizada de la plantilla personalizada.

Existen dos herramientas disponibles para ayudar a solucionar esto.

Plantillas obsoletas

Tras ejecutar una actualización de XenForo, el sistema alertará sobre cualquier plantilla que se tenga personalizada y que haya devenido en obsoleta.

Se mostrará una lista de todas ellas junto con la opción Combinar que comparará la plantilla personalizada con la nueva versión e intentará combinar las personalizaciones en loa nueva versión actualizada de la plantilla.

Sin embargo, si se han hecho cambios a una sección que haya cambiado en la nueva versión de la plantilla, se creará un conflicto que se deberá resolver manualmente. Deberá elegirse qué versión de la sección conflictiva se desea usar (o ambas versiones).

Al seleccionar el enlace Combinar de una plantilla listada como obsoleta, se verá cual es el resultado final de la plantilla combinada. Las secciones combinadas con éxito se resaltarán en azul. Las secciones conflictivas se resaltarán en amarillo con botones para ayudar a resolver los conflictos. Una vez resuelto cualquier conflicto, puede hacerse clic en el texto para editarla y cubrir las necesidades exactas que se tengan.

Modificaciones de plantilla

Como alternativa a modificar directamente las plantillas, XenForo ofrece también un sistema denominado Modificaciones de plantilla, que funciona permitiendo que se seleccione una plantilla, se especifique una sección a encontrar en la plantilla e insertar en la misma un nuevo código que modifica una sección específica.

En el gestor de modificaciones de plantilla, se verá una lista de las modificaciones actualmente en uso, agrupadas por Complementos que las hayan definido. Se puede desactivar y reactivar rápidamente cualquier modificación de plantilla usando el gadget conmutador de la lista.

Haciendo clic en una de estas modificaciones o en el botón Agregar modificación de plantilla, se cargará el edito de modificaciones de plantilla.

Los controles disponibles en el editor, junto con el nombre de la plantilla que se modificará, son los siguientes:

Clave de modificación

Usar esto para definir unn identificador único para la modificación. Se permiten letras, números y subrayados.

Descripción

Suele contener una descipción corta de la funcionalidad de la modificación, como Agregar nueva pestaña en la página de perfil de miembro.

Contenido de la plantilla

Esta caja es solo como referecia y contiene el texto completo de la plantilla que va a ser modificada.

Clase de búsqueda

En muchos casos, aquí se querrá usar un Reemplazo simple, mediante el cual el sistema busca algún texto y lo reemplaza enteramente con otro.

También pueden usarse expresiones regulares si se busca una coincidencia de mayor complejidad o si se quiere mantener todo o parte del texto coincidente en la modificación.

Usuarios avanzados podrán ejecutar una devolución de llamda de PHP para tener control completo sobre el como opera la modificación.

Buscar

Escribir aquí el texto que debe hallarse para reemplazar por la modificación. El tipo de texto especificado debe cumplir los requerimientos del Tipo de búsqueda.

Muchas plantillas de XenForo incluyen marcadores especiales <!--[XF:name_goes_here]--> en ubicaciones útiles, lo que permite fácil y rápidamente introducirlo como código del texto a Buscar en loa modificación.

Reemplazo

aqu8í hay que introducir el código HTML que reemplazará al texto especificado en Buscar.

Como este HTML se insertará en la plantilla, puede hacerse uso completo de la sintaxis de plantilla de XenForo en el código.

Si se desea incluir el texto usado en la búsqueda como parte del nuevo HTML, puede hacerse usando la ficha $0 en el mismo.

Si el texto de Buscar era una expresión regular, cualquier coincidencia adicional con la expresión se puede insertar usando $1, $2, etc.

Orden de ejecución

Pueden acometere varias modificaciones de plantilla sobre la misma plantilla. El valor Orden de ejecución se usa para determinar el orden que se aplicará en estas modificaciones. Las modificaciones con menor número de orden de ejecución se ejecutarán antes que las de mayor valor.