Ayuda:CSS y JS avanzado

¿Deseas crear códigos para tu comunidad, o para tu propia cuenta? Esta página tiene detalles para ayudarte en ambos casos.

Para más información general, visita Ayuda:Personalización CSS y JS.

Hoja de referencia de CSS y JS

Las tablas que se encuentran a continuación son guías sumarias de la mayoría de las páginas relacionadas con la personalización de CSS y JS. Las elecciones más comunes están resaltadas en verde.

CSS
Página de estilo	Localizada en	Wikis afectadas	Usuarios afectados	Pieles afectadas
MediaWiki:Wikia.css	esta wiki	esta wiki	todos los usuarios	Wikia (defecto)
MediaWiki:Common.css	esta wiki	esta wiki	todos los usuarios	varias
Special:MiPágina/common.css	esta wiki	esta wiki	solo tú	todas
Special:MiPágina/wikia.css	esta wiki	esta wiki	solo tú	Wikia (defecto)
w:Special:MyPage/global.css	Community Central	todas las wikis	solo tú	todas

JavaScript
Archivo de guión	Localizado en	Wikis afectadas	Usuarios afectados	Pieles afectadas
MediaWiki:Common.js	esta wiki	esta wiki	todos los usuarios	todas
MediaWiki:Wikia.js	esta wiki	esta wiki	todos los usuarios	Wikia (defecto)
Special:MiPágina/common.js	esta wiki	esta wiki	solo tú	todas
Special:MiPágina/wikia.js	esta wiki	esta wiki	solo tú	Wikia (defecto)
w:Special:MyPage/global.js	Community Central	todas las wikis	solo tú	todas

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 escribe 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;`).

Notas avanzadas

Aplicar CSS a páginas específicas: Usando clases CSS, puedes aplicar CSS a páginas específicas. El elemento <body> de los artículos de FANDOM incluye un identificador único basado en el nombre de la página. Por ejemplo, en esta página de ayuda, la clase se llama:

page-Ayuda_CSS_y_JS_avanzado

El formato general es 'page-[article name]', espacios y dos puntos son reemplazados por underscores.

Existen otras clases dentro de la etiqueta <body> a las que se les puede aplicar código mediante etiquetas o espacios de nombres, y mucho más.

Cargar órdenes: El orden de carga general en FANDOM es: código del núcleo, luego el código comunitario, luego el código personal.

Dentro de cada nivel, el orden de carga es: código 'common', luego el código específico de la piel.

!important en CSS: Debido a las órdenes de carga de CSS, es posible que a veces tenga que hacer uso de la propiedad !important para garantizar que se aplique una regla CSS.

Problemas con el 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 utilice los siguientes trucos:

Nota: después de guardar, quizás necesites refrescar la caché de tu navegador para ver los cambios.

Google Chrome: presiona Ctrl+Shift+R (⌘+Mayús+R en Mac)
Firefox / Safari: Mantén presionada Mayús mientras pulsas el botón Actualizar, o presiona Ctrl+F5 o Ctrl+R (⌘+R en Mac)
Internet Explorer: mantén presionado Ctrl mientras pulsas Actualizar, o presiona Ctrl+F5
Konqueror: pulsa Recargar o presiona F5
Opera: vacía la caché en Herramientas → Preferencias.

Snippets populares en 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 dar problemas si se ejecutan muchas veces en la misma página. Asegúrate de que el código que ejecuta una sección determinada de programación interna sólo lo hace una vez. Evita pegar el mismo código en varios archivos, ya que es probable que provoque errores o confusiones para usted y para otros visitantes.

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.

Ayuda y comentarios

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