Ayuda:CSS y JS avanzado

Ayuda

¿Estás creando códigos para tu comunidad, o para tu propia cuenta? Está página entra más en detalle que nuestra página general.

Antes de comenzar, te recomendamos revisar qué páginas se pueden utilizar para la personalización. Si planeas escribir algún JavaScript para tu comunidad, te recomendamos que solicites que sea activado contando al soporte de Fandom, y que te familiarices con el proceso de revisión de JavaScript.

Personalizacion de páginas específicas[]

CSS[]

El elemento HTML <body> incluye un identificador único basado en el nombre de la página. Por ejemplo, en esta página, la clase es: .page-Ayuda_CSS_y_JS_avanzado

El formato general es .page-[nombre del artículo], donde los espacios, comas, y otros carácteres especiales son remplazados por guiones bajos.

JavaScript[]

En MediaWiki:Common.js, utiliza un switch para aplicar el JavaScript a ciertas páginas:

switch (mw.config.get('wgPageName')) {
    case 'página':
        // El JS se aplicará a "página"
        break;
    case 'otra página':
        // El JS se aplicará a "otra página"
        break;
}

Aplicar CSS y JS a comunidades específicas[]

En tu CSS personal se pueden añadir clases sobre cualquier otro selector de CSS que te dejará estilizar como tu cuenta ve wikis específicos.

Estas clases están basadas en el nombre de la base de datos de una comunidad, no el URL, lo cual es lo común pero no siempre es el caso. El formato es:

.wiki-[nombre de la base de datos]

Si es un wiki que no está en ingles:

.wiki-[código de idioma][nombre de la base de datos]

Por ejemplo, si quieres que parte del fondo de Star Wars wiki aparezca rojo para tí, puedes agregar esto a tu global.css

.wiki-esstarwards #WikiaMainContent { background-color:red; }

Para JavaScript wgDBname se puede utilizar para identificar una comunidad específica.

Orden de carga[]

El orden general de cara tanto para el CSS como JS es:

Código principal de Fandom
Código local de la comunidad
Código personal

Dentro de cada nivel, el orden de carga es primero el Common, luego Fandomdesktop. Esto significa que si colocaste .clase { color: red; } en Common.css, y en Fandomdesktop.css usaste .clase { color: green; }, .clase será verde. Y debido a que el CSS personal es el último, cualquier cosa que coloques en él se sobreescribirá sobre el código local del wiki.

Esto también significa que si estás importando CSS o fuentes, y tu comunidad tiene tanto Common.css como Fandomdesktop.css, estas importaciones deberán ser coocadas al inicio del Common.css.

Para JS, el orden de carga es importante cuando se toma en consideración como usar el MediaWiki:ImportJS. Esto porque el ImportJS se carga de último, puedes añadir la personalidación de un script del Dev Wiki en Common.js o Fandomdesktop.js, pero tener la importación del script en ImportJS. El orden completo de carga del JS es:

Common.js
Fandomdesktop.js
Scripts importados a través de Common.js
Scripts importados a través de Fandomdesktop.js
ImportJS

Finalmente, recuerda lo obvio: Las páginas se cargan de principio a fin. Esto significa que cualquier código escrito al principio puede ser sobreescrito por uno al final.

!important en el CSS[]

Debido al orden de carga del CSS, en algunas ocasiones tendrás la necesidad de utilizar !important para asegurarte que una regla del CSS sea aplicada. El uso de !important debe de evitarse cuando sea posible en el uso de selectores de CSS específicos (o muy específicos).

Problemas de la caché[]

Cada archivo que descargas del Internet tiene caché. Normalmente eso es genial, ya que reduce el tráfico, tanto para su propio dispositivo como para los servidores de Fandom, pero puede ser un problema cuando se trata de probar los cambios de diseño. Puede tomar un tiempo para que los cambios surtan efecto a menos que se limpie la caché.

Si limpiar la caché no funciona, puedes tratar depurando la página añadiendo ?debug=1 al final del URL de cualquier página. Depurar el código garantiza que el código añadido de los scripts de las hojas de estilo cargarán casi un 100%.

Snippets populares de JavaScript[]

Para tener una idea de algunos scripts que otros han escrito que le pueden resultar útil o le gustaría probar, echa un vistazo a la lista de mejoras JS en Developers Wiki.

JavaScript duplicado[]

Muchos scripts pueden tener problemas si se utilizan múltiples veces en la misma página. Asegúate de escribir el código de tal manera que una parte del código solo se use una vez. Evita añadir el mismo JS en múltiples archivos ya que puede ser conflictivo y causar errores para tí y los visitantes.

Desactivar temporalmente el CSS/JS[]

El CSS y JS personalizados pueden ser desactivados de manera temporal usando los siguientes comandos.

El comando debe añadirse al final del URL (ejemplo: https://comunidad.fandom.com/wiki/Especial:Aleatorio?usesitecss=0. [Este ejemplo desactiva el CSS del sitio]).

Si se necesita más de un comando, en lugar de utilizar un signo de pregunta (?), utiliza un ampersand (&) para el segundo, tercero y cuarto comando (si hay alguno) (ejemplo: https://comunidad.fandom.com/wiki/Especial:Aleatoriousesitecss=0&useuserjs=0. [Este ejemplo desactiva tanto el CSS del sitio como el JS personal]).

A continuación una tabla con todos los comandos de CSS/JS.

Comando	Función
`?useusercss=0`	Desactiva todo CSS que se añadió a las páginas del CSS personal.
`?useuserjs=0`	Desactiva todo JS que se añadió a las páginas del JS personal.
`?usesitecss=0`	Desactiva todo CSS que se añadió a las páginas locales de CSS de un wiki.
`?usesitejs=0`	Desactiva todo JS que se añadió a las páginas locales de JS de un wiki.
`?safemode=1`	Desactiva todo JS y CSS personalizado, tanto a nivel del sitio como personal.

Revisor de errores en el editor de CSS y JS[]

Los editores de CSS y JS de Fandom tienen revisores de errores ("linting") y el resaltado de sintaxis:

A medida que escribes el código, la página te permitirá saber acerca de los posibles errores en la sintaxis que podrían haber ocurrido.
Ten en cuenta que no todos los problemas tienen que ser solucionados; la tecnología CSS (e incluso JS) está siempre en evolución, y no todos los navegadores se comportan de forma idéntica: algunos mensajes pueden no "exigir" una acción.

Problemas comunes[]

Problemas de CSS
Problema	Explicación
`@import previene descargas paralelas, utiliza <link> en su lugar`	Normalmente se usan Etiquetas de enlace para importar CSS. Sin embargo, MediaWiki no admite la adición de sus propias etiquetas de enlace sin el uso de JS, por lo que este error normalmente se puede ignorar.
`Espera X pero encuentra Y`	Esto significa que ha introducido un valor inválido para una propiedad. Por ejemplo, en '`color: foo;`' foo es un valor inválido para la propiedad color, ya que no es un color.
`Uso de !important`	`!important` debe evitarse generalmente en CSS, ya que puede hacerla más difícil de mantener, y también hace más difícil para los usuarios modificar la configuración en su CSS personal. La mayor parte del tiempo, utilizar el selector correcto le ayudará a evitar el uso de `!important`.
`Propiedad desconocida 'codename'`	Aunque no todo el código CSS es reconocido por la herramienta (como si CSS fuera una forma de arte que se actualiza con frecuencia), determinado código CSS todavía se puede leer cuando se implementan para un determinado objeto en la página de Fandom (Por ejemplo, `mix-blend-mode: color-dodge;`).
`Esperaba (<color> \| inherit) pero encontró 'var(--theme-accent-color)'.`	Esto usualmente ocurre cuando se utilizan Variables CSS para colorear bordes, fondos, y otras etiquetas HTML. El CSS Lint, que CodeEditor utiliza para la revisión de errores de la sitaxis de CSS, no da soporte a la utilización de variables.^[1] Este error se puede ignorar sin problema.
`Error: Esperaba RBRACE en línea 4, col 4.`	Nuevamente, esto ocurrirá si se utilizan variables de CSS. Debido a que el CSS Lint no les da soporte todavía, el -- que precede a la variable definida hará que tenga un error. Nota: Guardar mostrará un mensaje molesto: El documento contiene errores. ¿Confirmas que quieres publicarlo? CancelarAceptar Puedes ignorar este error y hacer click en "Aceptar", o desactivar el resaltador de syntaxis para detener el error por completo.

Más información[]

Ayuda:Incluyendo JavaScript y CSS adicional - Cómo importar archivos CSS y JS.
Ayuda:Chat Personalizable Javascript/CSS - Utilizar CSS y JS personalizado en chat.
Ayuda:Como importar Google Fonts - Elige tu propio tipo de letra.
Ayuda:Personalización CSS y JS - El hub para todos los detalles de CSS y JS.

Referencias[]

↑ CodeEditor utiliza Ace como su editor. Ace utiliza CSS Lint para revisar errores de CSS, en donde las varibales de CSS no son soportadas todavía como se menciona en este error de GitHub.

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.

[1] CodeEditor utiliza Ace como su editor. Ace utiliza CSS Lint para revisar errores de CSS, en donde las varibales de CSS no son soportadas todavía como se menciona en este error de GitHub.

[1]