Ayuda:Guía de conversión de FandomDesktop

La guía de conversión de FandomDesktop tiene el propósito de servir como una referencia rápida para convertir wikis de las pieles de Oasis y Hydra a la nueva piel de FandomDesktop.

Nota: el panel administrativo es una característica nueva para las wikis de Gamepedia con FandomDesktop y puede ser accedido desde Especial:AdminDashboard.

Nuevos archivos CSS y JS

• MediaWiki:Fandomdesktop.css
• MediaWiki:Fandomdesktop.js

Ni MediaWiki:Wikia.css, ni MediaWiki:Wikia.js cargarán en FandomDesktop. Todo código personalizado tiene que ir a estas nuevas hojas de estilo.

Cambios destacados

Tabber

La clase .tabber para el contenedor de los tabbers se mantendrá igual.

El resto de clases han sido eliminadas y reemplazadas por nuevas clases del sistema de diseño de Fandom: wds-tabs__tab para las pestañas, y wds-tab__content para el contenido.

Estructura

Migrando en Gamepedia

• Todo el contenedor de la página (con la navegación local) #pageWrapper puede ser personalizado usando la clase .resizable-container, pero ahora la barra de navegación está hasta arriba de la página.
• Ahora hay un wrapper para el artículo principal usando la clase .page, de la cual contiene todo el contenido del artículo y el riel derecho (si está presente, también usa la clase .has-right-rail).
• La clase .page__main contiene el encabezado, contenido y el pie de página de los artículos.
• El contenido #content o .mw-body ya puede ser accedido usando el id #content o la clase .page-content.
• El encabezado usa la clase .page-header.
• El pie de página usa la clase .page-footer.
• El riel derecho puede ser accedido desde el id #WikiRailWrapper o la clase .WikiaRail.

Migrando en Fandom

• Todo el contenedor de la página (con la navegación local) .WikiaPage puede ser personalizado usando la clase .resizable-container.
• Ahora hay un wrapper .WikiaPageContentWrapper para el artículo principal usando la clase .page, de la cual contiene todo el contenido del artículo y el riel derecho (si está presente, también usa la clase .has-right-rail).
• El contenedor del contenido #WikiaMainContentContainer o .WikiaMainContentContainer ahora usa la clase .page__main; contiene el encabezado, contenido y el pie de página de los artículos.
• El contenido #content o .WikiaArticle ya puede ser accedido usando el id #content o la clase .page-content.
• El encabezado #PageHeader o .page-header ahora solo usa la clase .page-header.
• El pie de página usa la clase .page-footer.
• El riel derecho #WikiaRailWrapper o .WikiaRail puede ser accedido desde la clase .right-rail-wrapper.

Infoboxes portátiles

Cambios visuales

• El borde alrededor de la infobox está añadida por defecto.

El fondo del título (.pi-title) y encabezados (.pi-header) predeterminado está puesto usando --theme-accent-color y el color de las letras depende de --theme--accent-label-color. Para algunas personalizaciones, esto puede causar que los encabezados (o títulos) sean ilegibles en las infoboxes.

Solución recomendada:

.portable-infobox {
  --pi-secondary-background--label: #CUSTOM_HEADER_FONT_COLOR;
}

Cambios en las pestañas

• El marcado HTML de las pestañas de los paneles y galerías ha cambiado, de la cual significa que cualquier personalización hecha en Oasis no tiene ningún tipo de soporte.

Antiguo formato de galerías de infoboxes (simplificado):

<div class="pi-image-collection">
  <ul class="pi-image-collection-tabs">
    <li class="pi-tab-link pi-item-spacing current">
      <span class="pi-tab-label">
        CAPTION
      </span>
    </li>
  </ul>

  <div class="pi-image-collection-tab-content current">
    <figure class="pi-item pi-image">
      <a class="image image-thumbnail">
        IMAGE OR VIDEO
      </a>
    </figure>
  </div>
</div>

Nuevo formato de galerías de infoboxes (simplificado):

<div class="pi-image-collection wds-tabber">
  <div class="wds-tabs__wrapper">
    <ul class="wds-tabs"> 
      <li class="wds-tabs__tab wds-is-current">
        <span class="wds-tabs__tab-label">
          CAPTION
        </span>
      </li>
    </ul>
  </div>
  <div class="wds-tab__content wds-is-current">
    <figure class="pi-item pi-image">
      <a class="image image-thumbnail">
        IMAGE OR VIDEO
      </a>
    </figure>
  </div>
</div>

Antiguo formato de paneles de infoboxes (simplificado):

<section class="pi-item pi-panel pi-border-color">
  HEADER
  <div class="pi-panel-scroll-wrapper">
    <ul class="pi-section-navigation">
      <li class="pi-section-tab pi-section-active">
        <div class="pi-section-label">
          LABEL
        </div>
      </li>
    </ul>
  </div>
  <div class="pi-section-contents">
    <div class="pi-section-content pi-section-active">
      CONTENT
    </div>
  </div>
</section>

Nuevo formato de paneles de infoboxes (simplificado):

<section class="pi-item pi-panel pi-border-color wds-tabber">
  HEADER
  <div class="wds-tabs__wrapper">
    <ul class="wds-tabs">
      <li class="wds-tabs__tab wds-is-current">
        <div class="wds-tabs__tab-label">
          LABEL
        </div>
      </li>
    </ul>
  </div>
  <div class="wds-tab__content wds-is-current">
    CONTENT
  </div>
</section>

Variables en CSS disponibles para la personalización de infoboxes portátiles

.portable-infobox {
  --pi-background: /* COLOR DE FONDO PRIMARIO */
  --pi-secondary-background: /* COLOR DE FONDO DE LOS TÍTULOS Y ENCABEZADOS */
  --pi-secondary-background--label: /* COLOR DE LAS LETRAS DE LOS TÍTULOS Y ENCABEZADOS */
  --pi-border-color: /* COLOR DE BORDE */
}

Ejemplo:

.portable-infobox {
  --pi-background: rgba(var(--theme-sticky-nav-dynamic-color-1--rgb), 0.05);
  --pi-secondary-background: var(--theme-sticky-nav-background-color);
  --pi-secondary-background--label: var(--theme-sticky-nav-text-color);
  --pi-border-color: var(--theme-border-color);
}

Cabecera y fondo de comunidad

El nuevo diseñador de temas provee más posibilidades de personalizar la apariencia de tu comunidad. No obstante, si estás dispuesto a exportar tus personalizaciones del gráfico de encabezado en CSS/JS, la clase que necesitarás es .fandom-community-header__background.

Características de Oasis que cambiarán en FandomDesktop

Galerías

Las galerías en FandomDesktop están basadas en la estructura nativa proporcionada por MediaWiki.

Hay 2 cambios principales:

• Para especificar un estilo de galería, necesitarás usar modos en lugar de los tipos. Para poder compatibilizar todas las galerías creadas en Oasis, la propiedad de "tipos" aún se mantendrá con soporte después de la migración a FandomDesktop. Aún así, se recomienda crear nuevas galerías usando la nueva propiedad mode.
• Ciertas características de las galerías serán canceladas en FandomDesktop. Aquí hay una lista completa de ellas:

Atributos del elemento <gallery>

Nota adicional:

• Las galerías de Fandom vienen con el atributo "frameless" por defecto, aunque las galerías de MediaWiki se muestren con marco. Para preservar la misma apariencia de las galerías, está disponible para todos la personalización por usuario o añada mode="nolines" a todas las galerías como parte de la migración.

Características que cambiarán en Hydra/HydraDark

Galerías

Nuevo modo de galería: Slider

Las comunidades de Gamepedia ahora pueden usar galerías en modo de slider.

Uso:

<gallery mode="slider">
Imagen.jpg
Imagen2.jpg
...
</gallery>

Los sliders aceptan un atributo más llamado orientation, que acepta valores como bottom (por defecto) o right y determina la posición de la navegación del slider.

Variables de temas

En la piel de FandomDesktop, los usuarios podrán acceder a las variables que representan los colores de tema. Estos se pueden cambiar desde CSS.

Ejemplo de valor en hexadecimal: #ffffff

Ejemplo de valor de Red, Green, Blue (RGB): 0,0,0

Colores dinámicos

Los colores dinámicos son establecidos dependiendo del color del fondo. Son calculados para que se acerque al mejor contraste posible.

• dynamic-color-1 es un color de fandom-negro (#0E191A) para los fondos claros y en blanco (#FFF) para fondos oscuros.
• dynamic-color-2 es un color grisáceo oscuro (#3A3A3A) para los fondos claros y grisáceo claro (#E6E6E6) para fondos oscuros.

Alias de variables

Selectores de temas

También se pueden especificar instancias para cada tema, ya sea si el usuario está en modo claro u oscuro.

• .theme-fandomdesktop-light son para los elementos en modo claro.
• .theme-fandomdesktop-dark son para los elementos en modo oscuro.

Ayuda y comentarios

• Navega y busca otras páginas de ayuda en Ayuda:Contenidos.
• Revisa Comunidad Central de Fandom para más fuentes de ayuda y soporte.
• Revisa Contactar con Fandom para saber cómo reportar algún error o algún paso que no esté claro en este artículo.