¡El usuario puede personalizar fuentes, colores, posiciones de enlaces en los márgenes y muchas otras cosas! Esto se hace a través de hojas de estilo en cascada personalizadas almacenadas en subpáginas de la página "Usuario" del usuario.
Por ejemplo, para crear sus propias modificaciones de CSS para el aspecto que está utilizando actualmente, cree una página en Especial:MiPágina/skin.css que contenga el CSS que desea utilizar (para aplicar los cambios independientemente del aspecto que esté utilizando, colóquelos en Especial: MyPage/common.css en su lugar). Para saber cómo ocultar mensajes particulares, consulte WP:CSSHIDE .
Para cada estilo definible por el usuario, primero se selecciona una máscara , junto con una hoja de estilos en cascada (CSS) correspondiente. Para cada máscara, el usuario puede hacer varias elecciones con respecto a fuentes, colores, posiciones de enlaces en el margen, etc. CSS se especifica con referencia a selectores [1]: elementos HTML , clases e ID especificados en el código HTML. En consecuencia, las posibilidades de cada skin se pueden ver mirando el código fuente HTML de una página, en particular mirando estas clases e ID: cuanto más hay, más versatilidad hay.
Hay CSS en el propio software MediaWiki y Wikipedia lo anula mediante las siguientes páginas:
CSS para todo el sitio está en MediaWiki:Common.css
Puede anularlos usted mismo utilizando estilos de usuario. Para realizar cambios que se apliquen independientemente de su aspecto actual, cambie su archivo common.css . Para realizar cambios que afecten su aspecto actual, cambie su skin.css . Para realizar cambios que afecten a todos los proyectos de Wikimedia, puede iniciar sesión en Meta y cambiar su global.css.
Ingrese algo de CSS en esa página. La vista previa de CSS funciona de una manera especial: permite ver los márgenes de la página (no los contenidos) en función de la información de estilo de la página, siempre que el aspecto utilizado sea el aspecto al que se aplica la página. Esto tiene limitaciones. Por ejemplo, se puede obtener una vista previa del aspecto que tendrán los enlaces en el margen, pero es posible que no sean de todos los tipos que uno desearía comprobar. Después de guardar, mientras aún está en la página o en cualquier otra página, realice una recarga forzada (shift-reload/ctrl-f5) para obtener los nuevos archivos.
Para que el CSS del usuario se cargue automáticamente, asegúrese de que la $wgAllowUserCssvariable esté configurada en verdadero en la configuración. De lo contrario, es posible cargarlo mediante JavaScript.
Para importar CSS desde una subpágina de usuario mediante JavaScript, use el mw.loader.loadcomando en su common.js :
mw . cargador . cargar ( '/w/index.php?title=Usuario:Ejemplo/stylesheet.css&action=raw&ctype=text/css' , 'text/css' ); En Wikipedia, JavaScript se puede utilizar para agregar nuevas funciones, como agregar cuadros de texto para buscar/reemplazar o brindar opciones avanzadas de reversión. Hay scripts para personalizar todo, desde el estilo de fuente predeterminado hasta los botones personalizados.
Se pueden importar y utilizar muchas páginas de script . También se pueden utilizar diferentes scripts en conjunto para realizar varias tareas a la vez. Algunos scripts están disponibles como "Gadgets", lo que significa que se pueden instalar simplemente marcando una casilla en la pestaña "Gadgets" de Especial:Preferencias .
Para agregar scripts preexistentes a su página JavaScript, agréguelos {{subst:js|name of script}}al archivo. Se pueden encontrar instrucciones más detalladas en Wikipedia:Guías/guiones de usuario .
La fuente HTML de una página contiene líneas como
< script src = "/w/wiki.phtml?title=Usuario:su-nombre-de-usuario-aquí/standard.js&action=raw&ctype=text/javascript" > </ script > @importar "/estilo/wikistandard.css"; @import "/w/wiki.phtml?title=Usuario:su-nombre-de-usuario-aquí/standard.css &action=raw&ctype=text/css";para el CSS de todo el proyecto para el aspecto en particular (en este caso aquí en Wikipedia, haciendo referencia a //en.wikipedia.org/style/wikistandard.css) y el JS y CSS personal para un aspecto en particular.
Así, el servidor proporciona HTML que hace referencia a los archivos CSS y JS, pero no interpreta su contenido. La interpretación la realiza el navegador, en función de sus capacidades y configuración.
Además de lo anterior, o alternativamente, se puede configurar un CSS local en el navegador. Si uno usa varios navegadores, cada uno puede configurarse con un CSS diferente. Cada uno se aplica a toda la World Wide Web, no sólo a un proyecto de MediaWiki (y no depende de haber iniciado sesión). Sin embargo, una configuración sólo afecta a otras páginas web si utilizan el mismo selector CSS; por ejemplo, una configuración para el selector a.extiw afecta a menos páginas en la web que una para h2 (pero afecta al menos a todos los proyectos de MediaWiki, no sólo a uno).
Para líneas de CSS que deberían ser diferentes en diferentes proyectos de MediaWiki, por ejemplo, para un color de fondo diferente para una fácil distinción, claramente no se puede usar el CSS local; al menos estas líneas deben colocarse en las subpáginas de usuario.
Algunas computadoras, por ejemplo en cibercafés, dispositivos móviles/tabletas, no permiten a los usuarios establecer preferencias para el navegador. En ese caso, las subpáginas de usuario permiten de todos modos la configuración de un estilo de usuario.
Cuando el navegador se ha configurado con la opción de ignorar el tamaño de fuente especificado en la página web o CSS externo, las líneas CSS relacionadas con el tamaño de fuente deben colocarse en el CSS local.
Los selectores de CSS, expresados en términos de elementos, clases e identificaciones, relevantes para el estilo del cuerpo de la página, incluyen los siguientes. En la medida de lo posible, se dan ejemplos que muestran el resultado de la configuración de estilo actual:
:link — enlaces — ejemplo: Ayuda:Índice ; predeterminado: ayuda: índice (ver vs: enlace):link:link:link:visited:link#contentTop:link.external — http://ejemplo; predeterminado: http://ejemplo:link.extiw – enlace interwiki en el cuerpo de la página – ; predeterminado: en:ejemplo:link.image – enlace desde la imagen completa a la página de descripción de la imagen:link.internal – enlace al archivo en sí (Medios:) y enlaces desde la miniatura y el icono de lupa a la página de descripción de la imagen (tenga en cuenta que el color y el tamaño de fuente especificados para a.internal solo se aplican en el primer caso):link.newejemplo ; predeterminado: ejemplo.allpagesredirect– abc – redirecciones en Especial: Todas las páginas y Especial: Prefixindexbody.ns-0, ..., (espacios de nombres)body.ns-15div#bodyContentdiv#column-contentdiv#editsectiondiv#globalWrapperdiv#tocindentdiv.toclineh1.firstHeadingh2h3img.texImagen de Texassmall- ejemplotable.tocavs:link : es un error común utilizar " a" en lugar de " " para aplicar estilo a los enlaces. Mientras que " " se aplica sólo a enlaces, " " se aplica tanto a enlaces como a anclajes con nombre (p. ej. ).:link:linka<a name="bookmark">
Los enlaces internos normales no están en clase internal(solían estar y todavía están en sitios que usan una versión anterior del software, por ejemplo [2]); se les puede aplicar un estilo que haga referencia a y , en general, después de lo cual el estilo de etc. puede proporcionar excepciones a este estilo general para los enlaces.:link:link:visited:link.extiw
Para enlaces interidiomas:
#p-lang aTambién se puede hacer que el estilo dependa del valor de un atributo, por ejemplo, con los selectores:
:link[title ="User:''username''"]:link[title ="''pagename''"]:link[href ="''full url ''"]para codificar con colores o resaltar usuarios particulares (incluido uno mismo) y/o enlaces a páginas particulares (como la negrita de las páginas vistas en Cambios recientes). Esto funciona en Opera, pero no en IE. Consulte también Ayuda: Visualización de páginas#CSS .
La lista de seguimiento y los cambios recientes utilizan dos clases:
autocomment new(vea abajo)La página de historial tiene clases autocommenty:
userminorPor lo tanto, la fuente especificada para el usuario se aplica en el historial de la página, pero no en la lista de seguimiento ni en los cambios recientes.
textarea#wpTextbox1input#wpSummaryVer meta:Personalización:Explicando_skins
Un "estilo" extremo para un texto es no mostrarlo, con
. nombre de clase { mostrar : ninguno } # id { mostrar : ninguno } etc.
Los enlaces que no se muestran no funcionan (a diferencia de los enlaces en una fuente muy pequeña).
No se puede utilizar para eliminar texto en expresiones para nombres de plantillas, nombres de parámetros, valores de parámetros, nombres de páginas en enlaces, etc.
Una clase o identificación puede depender del resultado producido por una plantilla o de un parámetro de plantilla, por ejemplo class="abcdef". Para uno o más de los posibles nombres de clase se puede definir el estilo de esa clase. Si la clase no está definida, se ignora, por lo que se utiliza el estilo estándar.
En el caso más simple tenemos, por ejemplo, class="abc{{{1}}}"y definimos la clase abcdef. Si el valor del parámetro es "def", se aplica.
Si una página para uso general sólo tiene sentido cuando se definen estilos para ciertas clases, entonces estos deben especificarse en la página MediaWiki:Common.css , que se aplica a todos los usuarios y todas las máscaras, en la medida en que no se anulen.
El nombre de un atributo HTML se puede convertir en variable. HTML Tidy , una biblioteca HTML4 obsoleta que está programada para ser eliminada, históricamente ha eliminado atributos con nombres no válidos en el lado del servidor, por lo que el resultado no depende de la capacidad del navegador para ignorar nombres de atributos no válidos y se reduce la cantidad de datos enviados. Para obtener una variable con posible valor "clase", consulte Wikipedia:HiddenStructure y en:Template:Infobox ( edición de vínculos de retroceso ) .
Wikitexto como
< span style = "display:{{{3|none}}}" > miércoles </ span >muestra "Mié" si el parámetro 3 está definido, pero no "ninguno", y no muestra nada si el parámetro 3 no está definido o es "ninguno". Si el valor del parámetro 3 es un estilo de visualización distinto de "ninguno", se aplica ese estilo.
Se pueden colocar estilos personalizados en los archivos CSS personales de cada usuario, como Special:MyPage/common.css , que cada usuario puede editar para establecer estilos personales.
/* hacer que el fondo detrás del área de contenido y las pestañas sea gris claro */ # contenido , # tabla de contenido # p-cactions ul li a { background : #f5f5f5 ; } /* evita que la imagen de fondo se desplace con el área de contenido */ body { adjunto de fondo : fijo ; } /* reemplaza el libro en segundo plano con otra cosa */ body { background : Purple ; } /* cambia el fondo de las áreas previas */ pre { fondo : Blanco } /* cambiar el logo */ # p-logo a { fondo : url ( https://upload.wikimedia.org/wikipedia/commons/9/93/Color-chars-logo.png ) 35 % 50 % sin repetición ; } /* no uses ningún logotipo, mueve los cuadros a esa área */ # p-logo { display : none } # column-one { padding-top : 0 ; } /* suprime el icono de persona según su nombre de usuario */ li # pt-userpage { fondo : ninguno } /* usar las preferencias del navegador para el tamaño del texto y la fuente */ html , body , #globalWrapper { font : hered !important ; } /* siempre subrayar los enlaces */ : enlace { decoración-texto : subrayado ; } /*Muestra el contenido del cuerpo en una columna más estrecha para facilitar la lectura*/ /*ajusta los porcentajes como desees*/ div # bodyContent { width : 50 % ; altura de línea : 105 % ; } /* cambiar el fondo de las pestañas no seleccionadas */ # p-cactions ul li a { background : #C7FDC7 ; } /* cambiar el fondo de las pestañas seleccionadas */ # p-cactions ul li . seleccionó un { fondo : blanco ; } /* cambiar el fondo del borde de las pestañas seleccionadas */ # p-cactions li . seleccionado { color del borde : #aaaaaa ; } /* la parte inferior de la pestaña no se elimina al pasar el mouse */ # p-cactions li a : hover { z-index : 0 ; decoración de texto : ninguna ; } # p-cacciones li . seleccionado a : hover { índice z : 3 ; } /* aplicar estilo al cuadro de búsqueda y a los botones debajo de él */ . botón de búsqueda { color de fondo : #efefef ; borde : 1 px de inicio ; } # searchInput { borde : inserción de 1 px ; } /* colores de enlace estándar */ a : link { color : #0645ad ; } a : visitado { color : #0b0080 ; } a . nuevo : enlace { color : #cc2200 ; } a . nuevo : visitado { color : #a55858 ; } a . extiw : enlace { color : #3366bb ; } /* enlaces a otras Wikipedias */ a . extiw : visitado { color : #3366bb ; } a . externo : enlace { color : #3366bb ; } /* enlaces externos */ a . externo : visitado { color : #3366bb ; } /* poner barra de desplazamiento en las secciones previas en lugar de un feo corte/superposición en Firefox */ pre { overflow : auto ; } /* tacha el enlace Cargar archivo como recordatorio para subirlo a Commons */ li # t-upload { text-decoration : line-through ; } /* centrar/centrar el título de cada página */ . primer encabezado { text-align : center ; } /* Advertencia de doble redireccionamiento */ div . redirigirMsg a . mw-redirect : después de { contenido : '<doble redirección>' ; color rojo ; estilo de fuente : cursiva ; } /* Evita que el nuevo CSS en "Actualización de tipografía" (desde principios de 2014) muestre títulos de página y encabezados en fuente serif */ h1 , h2 { font-family : heredar !important ; } /* Mostrar cuadros de datos personales en artículos */ table . datos de persona { mostrar : tabla ; } /* Deshágase de las tediosas advertencias */ # editpage-copywarn , # editpage-copywarn2 , # editpage-copywarn3 , # editpage-head-copywarn , . editpage-head- copywarn , # editnotice_BLP_editintro ,. ve-ui-mwSaveDialog-license { pantalla : ¡ ninguna ! Importante ; } /* Deshazte del tedioso texto repetitivo para novatos */ # categoría-nombre-espacio-editnotice , # pie de página-info-copyright , # sitesub ,. editarayuda ,. enlaces de ayuda de ventana publicada , # iconos de pie de página ,. ve-ui-mwSaveDialog-summaryLabel { pantalla : ¡ ninguno ! Importante ; } /* Ahorra espacio en la lista de plantillas que se muestran al final de la página al editar */ : templatesUsed ul ,: templatesUsed li { display : inline ; relleno-derecha : 5 px ;} /* Cambia todo el texto a la fuente "Avenir" (excepto los encabezados) (puedes cambiar la fuente a cualquier otra cosa) */ . mw- cuerpo h1 ,. mw-body h2 { familia de fuentes : "Avenir" } 
/* redondear algunas esquinas */ # p-cactions ul li , # p-cactions ul li a { border-top-left-radius : 1 em ; borde-arriba-derecha-radio : 1 em ; } # contenido { borde-arriba-radio-izquierda : 1 em ; borde-inferior-izquierdo-radio : 1 em ; } . pBody { borde-arriba-derecha-radio : 1 em ; borde-inferior-derecho-radio : 1 em ; } /* ** Coloque todas las reglas específicas de impresión en un bloque de impresión @media. *//* ahorra tinta y papel con fuentes muy pequeñas */ @ media print { # pie de página , # contenido , cuerpo { tamaño de fuente : 8 pt !importante ; } h1 { tamaño de fuente : 17 pt } h2 { tamaño de fuente : 14 pt } h3 { tamaño de fuente : 11 pt } h4 { tamaño de fuente : 9 pt } h5 { tamaño de fuente : 8 pt } h6 { tamaño : 8 puntos ; peso de fuente : normal ; } } /* Cosas avanzadas: usando :before y :after es posible agregar formato, esto aquí agrega el href completo de un enlace después (no es necesario en la versión actual): */ @ media print { # content a : link : after , # contenido a : visitado : después de { contenido : "(" attr ( href ) ")" ; } } Probado para funcionar en Camino, Safari e Internet Explorer 7.
/* Transforma la barra de herramientas del usuario en un cuadro lateral */ # p-personal { posición : relativa ; índice z : 3 ; ancho : 11,6 cm ; } # p-personal . pCuerpo { ancho : 10,7 cm ; borde : ninguno ; margen : 0 0 0,1 em 0 em ; flotador : ninguno ; desbordamiento : oculto ; tamaño de fuente : 95 % ; fondo : blanco ; colapso de fronteras : colapso ; borde : 1 px sólido #aaaaaa ; relleno : 0 0,8 em 0,3 em 0,5 em ; } # p-personal ul { altura-línea : 1,5 em ; tipo de estilo de lista : cuadrado ; imagen-estilo-lista : URL ( "/estilo/monobook/bullet.gif" ); tamaño de fuente : 95 % ; margen : 0 0 0 1,5 em ; relleno : 0 ; alineación de texto : izquierda ; transformación de texto : ninguna ; } # p-personal li { mostrar : elemento de lista ; relleno : 0 ; margen : 0 0 0 0 ; margen inferior : 0,1 em ; } /* suprimir el ícono de persona junto a su nombre de usuario */ /* necesario si aún no está implementado */ li # pt-userpage { background : none } Consulte monobook main.css para conocer todos los estilos que se utilizan de forma predeterminada.
Este estilo permite a los usuarios de Vector Legacy mantener la barra superior (con la barra de búsqueda y los enlaces de la página de conversación, edición, página de usuario, etc.) visible mientras se desplaza, similar a Vector 2022:
@ pantalla de medios { # mw-head { posición : fija ; fondo : gradiente lineal ( hasta abajo , #fff 50 % , #f6f6f6 100 % ); } } En el aspecto Vector Legacy, la posición de la barra lateral se puede arreglar fácilmente:
/* Corregir barra lateral */ div # mw-panel { posición : fija ; desbordamiento : automático ; arriba : 0 píxeles ; abajo : 0 píxeles ; altura : 100 % ; /* Evitar la superposición de contenido al desplazarse hacia los lados */ background-color : #F6F6F6 ; borde derecho : 1 px sólido #A7D7F9 ; } /* Evitar el desplazamiento lateral en elementos previos */ pre { overflow : auto ; altura máxima : 25 cm ; } 
Esto puede tener efectos secundarios indeseables en Chrome; por ejemplo, al visualizar una página como la muy común.css que acaba de editar para incluir este código, el contenido visible será mucho más corto y requerirá desplazamiento vertical en un marco.
La máscara Colonia Azul tiene una opción para una barra rápida "flotante hacia la izquierda", lo que hace que los enlaces de navegación, las cajas de herramientas y demás permanezcan en la misma posición en la pantalla mientras se desplaza. Esto proporciona la misma funcionalidad para la máscara Monobook (en Mozilla). Ver meta:Ayuda:Estilo de usuario/barra rápida flotante.
Una combinación rápida y sucia de menús Monobook con fuentes serif en el área de texto se encuentra en Usuario:Tillwe/monobook.css (en la primera parte). También muestra cosas con formato de tabla más o menos correctamente. Hay algunas peculiaridades y errores (algunos porque el esquema CSS de Wikipedia no parece ser demasiado reflexivo). Funciona en Netscape7/Win98 para el autor.
/*************************************************** *****************/ /* moviendo catlinks hacia la derecha */ /********************** **********************************************//* mueve el cuadro catlinks */ # catlinks { posición : absoluta ; índice z : 1 ; borde : 1 px sólido #aaaaaa ; antecedentes : #fafaff ; derecha : 1 em ; arriba : -0,25 em ; ancho : 10,5 cm ; flotar derecho ; margen : 0,2 cm ; relleno : 0,2 cm ; } /* formatea los catlinks */ p . enlaces de gato { color : #aaaaaa ; familia de fuentes : Verdana , sans-serif ; tamaño de fuente : 67 % ; altura de línea : 1,5 em ; alineación de texto : izquierda ; sangría de texto : 0 ; transformación de texto : ninguna ; espacio en blanco : normal ; margen : 0,2 cm ; } # p-personal h5 { mostrar : en línea ; } /* formatear enlaces en los catlinks (a diferencia de ":" y "|") */ p . enlaces cat a { color : #888888 ; } /* no utilice una fuente más pequeña */ td . línea agregada diff , td . línea eliminada diff , td . contexto diff { tamaño de fuente : 100 % } ; /* subraya solo el texto que es diferente */ span . diffchange { decoración de texto : subrayado ; } /*Suprimir los botones "(gracias)"*/ . mw-gracias-gracias-enlace { mostrar : ninguno ; } /* ocultar la propaganda de View-Source al editar una página protegida */ # mw-protectedpagetext { display : none ; } Al igual que con otros estilos CSS anteriores, edite Special:MyPage/skin.css o Special:MyPage/common.css para insertar el CSS personalizado y luego actualice la memoria caché del navegador.
Hay una hoja de estilo experimental para agregar líneas verticales a la izquierda de los hilos de discusión y alternar entre dos colores de fondo diferentes. Consulte Usuario:Isaacl/style/discussion-threads para obtener más detalles y una maqueta de la apariencia.
Los usuarios pueden tener CSS de usuario que oculta cualquier cuadro de información en sus propios navegadores.
Para ocultar todos los cuadros de información, agregue lo siguiente a Special:MyPage/common.css (para todas las máscaras , o Special:MyPage/skin.css solo para la máscara actual), en una línea aparte:
div . salida-analizador-mw . cuadro de información { mostrar : ninguno ; } Alternativamente, puede agregar el siguiente código a su archivo common.js o a un script de usuario del navegador que se ejecuta mediante una extensión como Greasemonkey :
$ ( '.infobox' ). esconder ();Tenga en cuenta que, aunque, según WP:Manual of Style/Infoboxes , idealmente toda la información en un cuadro de información también debería encontrarse en el cuerpo principal de un artículo, no se cumple perfectamente con esta directriz. Por ejemplo, la jerarquía taxonómica completa en y los códigos OMIM y otras bases de datos médicas de a menudo no se encuentran en el contenido del artículo principal. El cuadro de información también suele ser la ubicación de la imagen más importante, o incluso la única, de un artículo. Hay un script de usuario que elimina cuadros de información pero mueve las imágenes contenidas a miniaturas separadas: Usuario:Maddy de Celeste/disinfobox.js .{{Taxobox}}{{Infobox disease}}
Puede utilizar constantemente una fuente monoespaciada con caracteres bien diseñados para codificar (por ejemplo, para distinguir claramente entre l, 1y I, y entre Oy 0, y entre -, −, –y —).
Agregue algo como uno de los fragmentos de código a continuación en suEspecial:MiPágina/common.csspágina, reemplazándola "Roboto Mono"con cualquiera que sea su fuente de codificación preferida (Roboto Mono fue elegido como una fuente de codificación disponible gratuitamente para este ejemplo).
Si no desea agregar manualmente este código a su página CSS sino que prefiere @import(transcluirlo), consulte meta:Usuario:SMcCandlish/codefont.css para obtener instrucciones rápidas.
Este código hará lo siguiente:
<code>, <pre>etc.{{mxt}}{{xt}}.monospaced) que generan como monoespacio.Si conoce una clase adicional para agregar aquí, actualice esta página o menciónela en la página de discusión .
estilo horizontal
/* Usar mi fuente, cuando esté disponible, para el código */ code , pre , samp , kbd , tt , . ejemplo- mono ,. enlaces de usuario-nombre de usuario , . monoespaciado , . tecla del teclado , . botón , . código simple { familia de fuentes : "Roboto Mono" , monoespacio ! Importante ; } /* Haga que algunas de las cosas editables sean monoespaciadas */ # wpTextbox1 , # wpSummary , # searchInput , # searchText { font-family : "Roboto Mono" , monospace !important ; } estilo vertical
/* Usar mi fuente, cuando esté disponible, para el código */ code , pre , samp , kbd , tt , . ejemplo- mono ,. enlaces de usuario-nombre de usuario , . monoespaciado , . tecla del teclado , . botón . código simple { familia de fuentes : "Roboto Mono" , monoespacio ! Importante ; } /* Haga que algunas de las cosas editables sean monoespaciadas */ # wpTextbox1 , # wpSummary , # searchInput , # searchText { font-family : "Roboto Mono" , monospace !important ; } Esfuerzos de limpieza
Si desea ayudar a limpiar instancias del elemento, que no ha sido HTML válido desde la década de 1990 y, por lo general, debe reemplazarse con (esto puede variar según el contexto), puede agregar algo como lo siguiente a su<tt>...</tt><code>...</code>común.csspara hacer que sobresalga como un pulgar dolorido:<tt>
/* Marcar código incorrecto para limpieza */ tt { color : DarkRed ; fondo : rosa ; } También puedes hacer esto con <font>, <center>, <strike>y otros elementos obsoletos . Para CSS, puede simplemente importarlo, consulte meta:Usuario:SMcCandlish/lint.css.
JavaScript tiene muchas posibilidades, por ejemplo, agregar texto, incluidos enlaces, en las posiciones deseadas. Este contenido agregado puede depender del contenido de la página fuente HTML producida por el servidor; por ejemplo, puede depender de elementos HTML con un ID, aplicando getElementById. La posición de inserción puede especificarse mediante insertBefore.
Como ejemplo, para agregar un enlace de página a la izquierda de sus preferencias, agregue lo siguiente a Special:Mypage/common.js , reemplazando PageTitle con el título de la página wiki:
mw . útil . addPortletLink ( 'p-personal' , '/wiki/Help:User_style/PageTitle' , 'PageTitle' , nulo , nulo , nulo , '#pt-preferences' ); El siguiente código mueve el cuadro de categoría a la parte superior del artículo. Por supuesto, es posible que desees aplicar algo de CSS para que se vea más bonito:
function gatosattop () { var gatos = documento . getElementById ( 'enlaces de gato' ); var bc = documento . getElementById ( 'cuerpoContenido' ); antes de Cristo . insertBefore ( gatos , antes de Cristo . childNodes [ 0 ]); } Una alternativa que, cuando se combina con una hoja de estilo adecuada, colocará el texto aproximadamente en la misma línea que el título:
funcion categoriaToTop () { var thebody = documento . getElementById ( 'contenidoTop' ); var categorías = documento . getElementById ( 'enlaces de gato' ); si ( categorías ! = nulo ) { categorías . nodopadre . eliminarNiño ( categorías ); el cuerpo . nodopadre . insertBefore ( categorías , el cuerpo ); } } Algo de CSS para acompañar eso...
/* mueve el cuadro catlinks */ # catlinks { right : 1 em ; arriba : -0,25 em ; ancho máximo : 50 % ; /* esto limita el tamaño del cuadro, pero no lo establece estrictamente */ float : right ; margen : 0,5 em ; relleno : 0,2 cm ; } /* formatea los catlinks */ p . enlaces cat { tamaño de fuente : 67 % ; alineación de texto : izquierda ; sangría de texto : 0 ; transformación de texto : ninguna ; espacio en blanco : normal ; margen : 0,2 cm ; } Desafortunadamente, si el cuadro de categoría es grande (como en las entradas sobre presidentes de EE. UU. y otras figuras importantes), puede desplazar un cuadro de información hacia un lado. Para corregir esto, se puede agregar el atributo "clear: right" a un cuadro de información.
CSS se puede controlar a través de JS mediante wikitext. Por ejemplo, un elemento HTML "span" sin contenido puede, a través de su clase e id, proporcionar parámetros para JS especificando CSS para cualquier parte de la página. Por ejemplo, si una página contiene un elemento "span" con clase FA e id lc , MediaWiki:Monobook.js especifica el estilo y el título de los elementos "li" de la clase interwiki- lc , controlando así el estilo y el título del enlace interlenguaje. del código de idioma lc en el margen, siempre que el skin especifique esta clase interwiki- lc (por ejemplo, Colonia Azul especifica class='external' para cada idioma, por lo que no funciona para ese skin).