Backrooms Wiki:CSS使用指导

Plantilla:Instrucciones de escritura

> **Nota:**Debido a las restricciones de Fandom, la terminal móvil no cargará ningún script, y la mayoría de los estilos se cortarán en la página de la terminal móvil, por lo que el contenido discutido en esta página es solo en la versión de escritorio de la vista web eficiente.
>
>

Como comunidad de creación de arte, Backrooms Wiki implica inevitablemente el requisito de personalizar el estilo de la página web. Sin embargo, debido a la restricción de la política de personalización de Fandom Plantilla:Shady, la formulación CSS de este sitio siempre se ha realizado a través de MediaWiki:Common.css implementado mediante código de apilamiento. Cualquier usuario utilizará el CSS de la página MediaWiki:Common.css para acceder a cualquier página wiki de este sitio., pero parte del CSS solo se usará para muy pocas páginas. Si también carga CSS redundante al visitar otras páginas, inevitablemente causará una gran pérdida de tráfico y, a medida que aumente la demanda de CSS por parte de la comunidad, la La página MediaWiki:Common.css se ha vuelto muy hinchada. Para que sea más fácil para todos introducir CSS específico para páginas individuales antes de que Fandom implemente Extensión de estilos de plantilla, hemos escrito una secuencia de comandos para todo el sitio  y [ [Template:CSS|una plantilla]]. Si desea personalizar CSS para su trabajo, siga la discusión en esta página.

Primero puede aprender a escribir CSS a través de materiales en línea como W3School. Plantilla:Shadow

## Cómo importar estilos

### Crear CSS

Primero debe crear una página CSS cuyo nombre de página debe seguir el formato "Usuario:<su nombre de usuario>/styles/<nombre de subpágina>.css". Puede ingresar el nombre de la subpágina en el cuadro de entrada a continuación, y comenzará a editar esta subpágina después de hacer clic en el botón.

<cuadro de entrada>
tipo=crear
buttonlabel=Crear CSS
prefijo=Especial:MiPágina/estilos/
placeholder=Ingrese el nombre de la subpágina aquí, debe terminar con .css
descanso = no
</cuadro de entrada>

Si el nombre de la página termina correctamente en ".css", su editor debería estar en modo de edición CSS. Después de escribir el código CSS y guardarlo, puede usar las herramientas de la página en la columna derecha , debería poder encontrar el modelo de contenido de la página como "CSS". Si no, significa que el nombre de su página no termina con ".css", cámbielo por un nombre de página que cumpla con los requisitos. Si necesita eliminar una página creada por error, comuníquese con Administrador o moderador de contenido.

<título de la galería align="center" position="center">
CSS Edit Mode.png | esto está bien
No es CSS Edit Mode.png | Esto es malo
</gallery>

Después de que la página CSS se guarde correctamente, se manejará de manera diferente según la página a la que se aplica el CSS:

Solo para página personal y sus subpáginas
No se requiere ningún otro procesamiento.
para artículos
debe moverse a "Plantilla:<nombre de la página del artículo>.css" y agregar `/*<noinclude>[[category:CSS para artículos]]</noinclude>*/`.
si su borrador está completo y publicado, y el "Usuario:<su nombre de usuario>/estilos/<nombre de la subpágina>.css" original se introduce en el artículo, incluya también el nombre de la página CSS introducido en el artículo. Cambie a "Plantilla :<nombre de la página del artículo>.css".
para plantillas
Debe moverse a "Plantilla:<nombre de la plantilla>/estilos.css" y agregar `/*<noinclude>[[categoría:CSS para plantilla]]</noinclude>*/`.
Dado que el administrador tiene el permiso Change Content Model, el administrador puede cambiar directamente el modelo de contenido de una página que no existe en el espacio de nombres de plantilla a CSS y luego crear una página CSS.

### Incrustar CSS

Use la plantilla `{{CSS}}` en la página para incrustar el código fuente de CSS en la página (no se muestra), y el script MediaWiki:Common.js importará CSS en la página en HTML. Cuando una página CSS se incrusta varias veces, solo tendrá efecto la primera vez. Si se usa en un artículo, se recomienda ponerlo al final del artículo.

La plantilla solo necesita un parámetro anónimo, que es el nombre de la página para incrustar el CSS. Por ejemplo, usar `{{CSS|Template:Level 0.css}}` incrustará el código fuente de Template:Level 0.css en la página, y el script lo incrustará Cargado en HTML. Si la página CSS no existe, se mostrará un mensaje de error:

**Error: la página CSS "(nombre de la página)" que se va a incrustar no existe.**
Para facilitar la gestión, solo se permiten incrustar páginas CSS en los espacios de nombres MediaWiki, Usuario o Plantilla; si el nombre de la página pasada no pertenece a los tres espacios de nombres anteriores, se mostrará un mensaje de error:

**Error: La página '(nombre de la página)' no pertenece a ninguno de los espacios de nombres MediaWiki, Usuario o Plantilla.**
Cuando ocurre algún error, la plantilla introducirá la categoría "página con error de CSS incrustado' en la página, recordando al editor que verifique.

**El script no tiene la función de verificación de sintaxis CSS, así que asegúrese de que el código en su página CSS sea correcto, para evitar errores al importar el HTML de la página.** Puede usar algunas herramientas de verificación de CSS en línea para verificar si el código CSS es gramatical. (recomendar Herramienta de validación de CSS de W3C)

## No es adecuado usar este método

El CSS introducido de esta manera se agrega después de que se carga el árbol HTML de la página web, por lo que hay un retraso desde la representación de la página web hasta que el CSS entra en vigor, y la página puede tener cambios muy significativos (incluso abruptos) cuando el CSS Toma efecto. Si el efecto visual de la página es muy sensible a este cambio, se recomienda utilizar el estilo en línea (es decir, el atributo `style="..."` en la etiqueta HTML), a menos que tienen razón pseudo-class selector tiene una necesidad muy urgente. (Los selectores de pseudoclase no se pueden configurar a través de estilos en línea)

Además, si se usa CSS en una plantilla, y la plantilla se usa mucho, podría considerar comunicarse con el administrador para agregar el CSS a MediaWiki:Common.css.
<sin incluir>

## Código CSS

**Tu CSS no puede violar la Política de personalización de Fandom**. Si el operador del sitio determina que su CSS tendrá un impacto negativo en el diseño de la página y la experiencia de lectura de los lectores, el operador del sitio requerirá la rectificación dentro de un límite de tiempo. Una vez que se exceda el límite, el operador del sitio eliminará el código relevante o incluso elimine toda la página; para los códigos CSS que tienen un impacto negativo grave, el operador del sitio tiene derecho a eliminar los códigos relacionados directamente sin previo aviso puede destruir el procesamiento de la página si es necesario.

Restricciones específicas:

pulgar
* No está permitido modificar el diseño de la página que no sea el contenido de la wiki (correspondiente al nodo `<div id="content" class="page-content">` en el HTML de la página web), incluido el indicador de orientación pesado (correspondiente al nodo `<span class="mw-redirectedfrom">` en la página web HTML) y la navegación de la página principal ( correspondiente a  `en la página web HTML <span class="subpages">`node). Las operaciones que modifican el diseño incluyen, entre otras, ocultar y cambiar las posiciones relativas de los elementos.
* Si modifica la imagen de fondo de la página web, asegúrese de que el contenido de la columna del encabezado (correspondiente al `<header class="fandom-community-header">` nodo en el HTML de la página web) está en el fondo Todavía claramente identificable en la imagen. Si la barra de encabezado no se distingue porque el color es similar a la imagen de fondo, considere usar CSS para modificar el color del contenido de la barra de encabezado; en casos extremos, los colores en la parte superior de la imagen de fondo son complicados y es Es imposible encontrar un color adecuado para que el contenido de la barra de encabezado aparezca en el fondo. Se puede distinguir en la imagen y es posible que deba dejar de usar esta imagen de fondo en este momento.
* Cuando se trata de estilos de color, asegúrese de que su combinación de colores funcione con los temas claros y oscuros de Fandom (el cuarto de cinco botones en la esquina superior derecha de la página es el interruptor para los temas claros y oscuros). Debe usar los selectores `.theme-fandomdesktop-light` y `.theme-fandomdesktop-dark` para controlar los estilos bajo diferentes temas respectivamente. Puede consultar los casos en User:HyperNervie/CSS test y User:HyperNervie/CSS test.css.

<título de la galería align="center" position="center">
Demostración de color del tema de color brillante.png|Esta es la combinación de colores bajo el tema de color brillante
Demostración de color del tema oscuro (enviar).png|Continúe usando este esquema de color en el tema oscuro y envíelo
Demostración de color de tema oscuro.png|Así que deberías cambiar el color
</gallery>

## Consejos

* ¡Haga un buen uso de la función "inspeccionar elemento" del navegador!
* ¡Revisa la información con frecuencia!
* ¡Usa menos `@import`!

</noincluir>

## Comentarios

1. ↑ Nota Foro de discusión no es una función wiki proporcionada por MediaWiki software, y no pertenece a una página wiki.
2. ↑ No permitimos el uso del primer nivel de subpáginas de páginas de usuario página porque "Usuario:<nombre de usuario>/<nombre de subpágina>.css" será utilizado por MediaWiki como **CSS personal**. Para obtener más información, consulte mediawiki.org introducción a las funciones CSS de la interfaz.
3. ↑  Para los navegadores que no son lo suficientemente anchos, la página no tiene una columna derecha y las herramientas de la página estarán en la parte inferior de la página.
4. ↑ Porque después de mover la página, la página original dejará un código que comienza con `/* #redirect */ @import`, y usa `@ La instrucción import` retrasará la importación de CSS. Plantilla:Shadow