Comunidad Central
Registrarse
Advertisement
Comunidad Central
Diseñador de temas

El diseñador de temas en Comunidad Central.

El Diseñador de temas es una herramienta de administrativa fácil de usar que te permite personalizar rápidamente el tema, la cabecera y el logotipo de tu wiki. Puedes elegir entre un tema preestablecido cuando creas tu comunidad por primera vez, o diseñar tu propio tema que se ajuste a la temática de tu comunidad, tanto para el tema claro como oscuro.

Paso a paso[]

  • Como administrador de una comunidad, puedes encontrar un enlace al Diseñador de temas en el menú desplegable en la esquina superior derecha al posicionar el cursor por encima de los tres puntos verticales (⋮), en el menú de Mis Herramientas de la barra de herramientas o en el panel de administración. También puedes navegar a él directamente visitando Especial:ThemeDesigner en tu wiki.
  • Hay tres secciones para personalizar un wiki:
    • Identidad de la comunidad: Establece el nombre de el wiki, el logotipo y gráficos de la comunidad..
    • Cabecera y fondo: Define el fondo de el wiki y colorea la navegación local.
    • Estilo de los artículos: Define los colores para el fondo del artículo y los enlaces, además de elegir una fuente para los encabezados.
      Previsualización del tema para móvil

      puedes cambiar entre la previsualización en escritorio y movil con los íconos en la esquina superior izquierda de la ventana de previsualización

      .
  • Cada cambio realizado se ve inmediatamente en la vista previa del lado derecho, para que puedas ver cómo quedará tu tema antes de guardarlo, tanto para escritorio como móvil. Puedes cambiar entre la previsualización entre escritorio y móvil utilizando los íconos respectivos de monitor de escritorio y télefono inteligente en la esquina superior izquierda de la ventana de previsualización.
  • Los administradores pueden personalizar el tema claro y oscuro en sus wikis, accesible a través del Diseñador de temas en pestañas separadas, y elegir cual de estas opciones es la vista por defecto de la comunidad. Todas las opciones debajo de "Cabecera y fondo" y "Estilo de los artículos" pueden ser definidas por tema. Cuando cambies pestañas, la previsualización también cambia para mostrar el tema que estés personalizando.

Para asegurar que los temas cumplen los requisitos de accesibilidad, los administradores no serán capaces de guardar una opción de tema que tenga una advertencia de mal contraste. Véase abajo para información más detallada en esto.

Cuando hayas finalizado, haz clic en "Guardar" y el nuevo tema aparecerá inmediatamente para los demás usuarios.

Tematización móvil[]

Temas para móvil - cambiando de tema

Los usuarios pueden cambiar entre el tema claro y oscuro

Los temás para móvil actualmente se encuentran como opcionales para las comunidades que deseen activarlos. Al abrir el Diseñador de temas, los administradores verán una notifcación que dice "La tematización móvil aún no está activada para este wiki. Para habilitar la tematización móvil, resuelve cualquier problema de contraste de color y guarda los cambios." Una vez que el tema se ha guardado, una notificación emergente y un banner aparecerán indicándote que puedes aplicar el tema de tu wiki al sitio móvil. Una vez activado, no se puede deshacer.

Para mayor consistencia en la estética entre las versiones de escritorio y móvil, los colores del Diseñador de temas para el fondo, navegación, y cabecera, así como el acento, enlace, y fondo del artículo serán los mismos en escritorio y móvil. La imagen de fondo escogida y la fuente del encabezado por tema también será la misma tanto en escritorio como móvil.

Toma en cuenta que no todas las opciones que se ofrecen en el Diseñador de temas para escritorio serán aplicables a los temas para móvil, y cualquier cambio adicional realizado al tema de escritorio con CSS no se aplicará al móvil.

El tema por defecto de claro u oscuro también será el por defecto del tema para móvil. Sin embargo, como en escritorio, cada usuario podrá elegir el tema que le de la mejor experiencia de forma personal. Las elecciones personales de tema que se realicen en móvil afectan a la versión de escritorio y viceversa. Para más información sobre la experiencia en los modos claro y oscuro revisa esta página.

Identidad de la comunidad[]

Diseñador de temas (identidad)

El apartado de identidad de la comunidad en el diseñador de temas.

  • Nombre de comunidad: El nombre de la Comunidad se ubica en la cabecera junto al logo, y aparece en todas las páginas de tu wiki. El nombre de comunidad puede tener un máximo de 50 letras. Ten en cuenta que esto no cambia el nombre del sitio de el wiki.
  • Logotipo de la comunidad: El logotipo de la comunidad es una adición gráfica del nombre de comunidad. Los usuarios pueden ir a la página principal (o Discusiones, dependiendo de tus preferencias) haciendo clic al logo en cualquier página.
    • Los logotipos sólo pueden ser archivos .png, máximo 1 MB, y pueden tener un tamaño máximo de 500px x 500px.
    • El logotipo se almacena en Archivo:Site-logo.png.
    • Usar en menú de navegación fijo: incluirá el logo en el extremo izquierdo del menú de navegación fijo, visible después de desplazarse hacia abajo.
  • Favicon: Los favicons son pequeños iconos que aparecen en la parte superior de tu navegador, y se utilizan frecuentemente en
    • Los favicons pueden ser archivos .ico o .png y deben tener un tamaño entre 16 × 16 y 256 x 256 píxeles. Puedes aprender más sobre favicons en Ayuda:Favicon.
    • El favicon es guardado enArchivo:Site-favicon.ico
  • Imagen comunitaria: Esta imagen representa a la comunidad a través de Fandom y aparecerá en varios lugares incluyendo la búsqueda y perfil. Como tal, se recomienda una imagen de alta calidad ya que aparecerá en múltiples tamaños en diferentes exploradores y dispositivos.
    • Esta imagen puede ser .png o .jpg, y se recomienda un tamaño de 600 x 450 pixeles, con un tamaño mínimo de 200 x 200 pixeles. El máximo del archivo es de 1 MB.
    • La imagen es guardada en Archivo:Site-community-image

Cabecera y fondo[]

El fondo es el área fuera del área de contenido y aparece en todas las páginas de tu wiki. Puede ser un color sólido, una imagen, o ambos.

Diseñador de temas (diseño)

El apartado de cabecera y fondo en el diseñador de temas.

  • Imagen de fondo: Si quieres que tu wiki tenga una imagen de fondo, haz clic en esta área para subir una. Puedes subir un archivo .jpg, .png o .gif. El tamaño máximo del archivo es de 1 MB.
    • Ayuda:Fondo tiene más información y recomendaciones relacionadas con la creación de una imagen de fondo personalizada para tu comunidad.
    • Debajo del área de subida, hay una opción para escoger si la imagen del fondo se mostrará o no como un encabezado en la versión móvil. Si no es marcada, no aparecerá en la tematización móvil.
    • Forma de mostrar la imagen: controla si la imagen cubre toda la pantalla o sólo el área de la cabecera sobre el artículo. El fondo puede ser personalizado como un encabezado (se recomienda 2880 x 656px) o pantalla completa (se recomienda una imagen cuadrada de 2880px).
    • Estilo de la imagen de fondo: contiene varias opciones sobre cómo mostrar la imagen.
      • Cubrir: estira la dimensiones pequeñas de la imagen tanto como se pueda para llenar la pantalla completa (equivalente en CSS a background-size:cover)
      • Mosaico: esto repite la imagen de fondo en toda la página, con la opción de hacerlo horizontal, vertical, o ambos.
      • Ajuste: la imagen se alineará con el área seleccionada (superior izquierda, centro o superior derecha) , y la dimensión mayor de la imagen se estirará para ajustarse (equivalente al CSS background-size:contain).
  • Opacidad de la imagen: establece el grado de transparencia de la imagen de fondo con respecto al color de fondo. A menor porcentaje, mayor transparencia tendrá la imagen, lo cual es útil para un mejor contraste de los elementos. De manera alternativa, puedes ajustar el color del texto de la cabecera para lograrlo.

Las siguientes opciones de color aplican tanto para el modo escritorio como el móvil:

  • Color de fondo de la comunidad: establece un color de fondo sólido para el wiki.
  • Color del menú de navegación fijo: establece el color de fondo de la navegación adhesiva, visible en la parte superior de la pantalla después de desplazarse hacia abajo. El color del texto se determina automáticamente para el contraste.
  • Color del encabezado de la comunidad: establece el color del texto de la cabecera de la comunidad. Escoge algo que tenga el suficiente contraste con la imagen de fondo y el color, o nos serás capaz de guardar el tema.

Estilos de artículos[]

Diseñador de temas (estilos)

El apartado de estilos de artículos en el diseñador de temas.

Las siguientes opciones aplican tanto para el modo escritorio como el móvil:

  • Fuente para los encabezados: proporciona algunas opciones para cambiar las fuentes de los encabezados dentro de los artículos. Comenzaremos con 5 fuentes, estas fuentes son Rubik, Work Sans, Lora, Roboto Slab, BioRhyme y Inknut Antiqua. Otras fuentes personalizadas también pueden ser utilizadas por CSS, siempre y cuando mantengan los estándares de accesibilidad.
  • Color predominante: establece el color de fondo de la barra rápida, de ciertos botones, de los encabezados de infobox, tablas y de otros detalles de el wiki.
  • Color de los enlaces: es el color de la mayoría de los enlaces. Intenta elegir algo que tenga un buen contraste con el fondo del artículo, que se distinga del texto normal, y evita los colores rojos ya que los enlaces rojos denotan páginas inexistentes. A su vez, otorgará una advertencia cuando haya un contraste demasiado alto entre colores.
  • Color de fondo del artículo: es el color de fondo del área de contenido principal. El color del texto se determinará automáticamente para el mejor contraste. A su vez, otorgará una advertencia cuando haya un contraste demasiado alto entre colores.
    • Cambiar esto también cambiará el color de fondo de los menús desplegables (como los botones de navegación y "Edición").

Historial de diseños[]

Diseñador de temas (historial)

El apartado de historial de diseños en el diseñador de temas.

  • Cada vez que se vaya a guardar el tema con el botón de "Guardar", una entrada es creada en la lista. Esa lista es única tanto para el tema claro como el oscuro.
  • Si quieres ver o volver a una versión anterior, puedes hacerlo. Haga clic en una versión anterior y se cargará en el área de vista previa.
  • Solo se guardan las últimas 10 versiones. Minimizar la cantidad de veces que se guarda haciendo todos los cambios a la vez mantiene el historial informativo y utilizable.

Advertencias de contraste[]

La intención es dar suficiente contraste entre el texto y su fondo, para que así pueda ser leído por personas con problemas de visión. Para asegurar su cumplimiento, el botón de "GUARDAR" del Diseñador de temas es atenuado mientras el error de contraste se mantenga para uno o más de los colores elegidos en cualquiera de los temas, y un mensaje de error indicando el problema estará presente arriba del botón de GUARDAR. Es únicamente después de que todos los problemas de contraste para el modo claro y oscuro han sido solucionados que el mensaje de error cerca del botón de GUARDAR desaparecerá y te permitirá guardar los cambios.

Diseñador de temas - errores de contraste

El color rojo es indicador de errores de contraste en el Diseñador de temas, por color y por tema.

Mientras que los errores se encuentran activos, cada color afectado será destacado por una fuente y caja roja alrededor del color escogido, y el texto del error se muestra en rojo con un símbolo de error octagonal frente a él. Los errores de contraste, por otro lado, son indicados con una caja anaranjada alrededor del color relevante, y el texto del error se muestra en anaranjado con un triángulo de advertencia frente a él. Si el error es causado por elecciones de color en el otro tema, por ejemplo en el tema claro mientras observas el tema oscuro o viceversa, un cuadro rojo estará presente alrededor de la pestaña del tema para atraer la atención. Si el único problema en el otro tema es una advertencia, la pestaña del tema será anaranjada.

El mensaje para cada color es único y explica porqué es un problema. Activas este mensaje haciendo click en el color que esté siendo resaltado por tener un problema. Para cada problema de contraste, se presentarán tres opciones de colores en el espectro adyacente al color elegido para cumplir con el ratio de contraste mínimo para que los administradores tengan una manera fácil de resolver el problema. Este cuadro emergente permanecerá abierto mientras buscas un nuevo color, y el mensaje de error o advertencia reaparecerá si cambias el color a alguno que siga sin cumplir con los requisitos de contraste. Una vez que encuentres un buen color, haz click en la "X" o fuera del cuadro emergente para que este desaparezca.

Las relaciones de contraste mínimas requeridas (basadas en WCAG 2.x AA) son:

  • Color de los enlaces vs. fondo del artículo - 4.5

Si el problema se encuentra relacionado con el color del enlace en el color de fondo escogido, leerás: "Los enlaces que se muestran en este color pueden ser difíciles de leer. Te recomendamos que elijas otro color que tenga mejor contraste con el color de fondo."

  • Color del fondo de la comunidad vs. color del encabezado de la comunidad - 4.5

Cuando la comunidad tiene un color de fondo y un color de encabzado que no tienen suficiente contraste, puede que provoquen que la navegación local no sea lo suficientemente legible. Si hay problemas con el contraste, el mensaje de error dirá: "Los enlaces y el texto en este color de fondo serán difíciles de leer para algunos usuarios. Elige otro color que contraste mejor con el color del encabezado de la comunidad o selecciona uno de los colores recomendados a continuación."

Ten en cuenta que cuando la imagen de fondo está presente, este error no aparecerá debido al hecho de que cualquier problema de contraste es cubierto por la imagen. Sin embargo, hay una opción para no mostrar la imagen de fondo en dispositivos móviles, por lo que si una imagen no está siendo usada ahí, los problemas de contraste seguirán siendo visibles en la vista para móviles. En ese caso, recomendamos resolver el error de contraste usando la ventana de previsualización de móvil en lugar de la previsualización de escritorio.

Las relaciones de contraste mínimas requeridas son:


  • Color predominante vs. color del fondo del artículo - 3.0

Debido a que el color del acento define los elemtnos de varias comunidades, como los botones, elementos de la infobox y barra rápida, y esto provoca que en algunas ocasiones se muestren sobre el color de fondo del artículo, un mal contraste puede hacer que se una con el fondo. Si esto sucede, el siguiente error se mostrará: "Este color se utiliza para encabezados y bordes de infoboxes, botones y otros elementos secundarios de la interfaz. Elige un color que tenga suficiente contraste con el color de fondo del artículo de tu wiki." Esto es solo una recomendación, no un requisito estricto, por lo que aun así podrás guardar tu tema sin tener que ajustar el color predominante.

Ten en cuenta que solo un color en cada par "necesita" ser cambiado para cumplir con las normativas de contraste. Si te encuentras incapaz de solucionar un error de contraste de manera satisfactoria, por favor contacta a tu Responsable Wiki asignado, en su ausencia, por favor envía un formulario de Zendesk al staff de Fandom.

Páginas siguientes[]

Ayuda y comentarios[]

Advertisement