Ayuda:Estilo de usuario

Esta página de ayuda de Wikipedia necesita ser actualizada . Por favor, ayude a actualizar esta página de ayuda de Wikipedia para reflejar eventos recientes o nueva información disponible. Puede encontrar discusiones relevantes en la página de discusión .

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 CSS para el diseño que está utilizando actualmente, cree una página en Special:MyPage/skin.css que contenga el CSS que desea utilizar (para aplicar sus cambios independientemente del diseño que esté utilizando, colóquelos en Special:MyPage/common.css ). Para saber cómo ocultar mensajes específicos, consulte WP:CSSHIDE .

Para cada estilo definible por el usuario, primero se selecciona un skin , junto con una hoja de estilo en cascada (CSS) correspondiente. Para cada skin, el usuario puede realizar varias elecciones con respecto a fuentes, colores, posiciones de enlaces en el margen, etc. El 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 haya, más versatilidad habrá.

Hay CSS en el propio software MediaWiki, y Wikipedia lo reemplaza utilizando las siguientes páginas:

• Azul Colonia - MediaWiki:Cologneblue.css
• Moderno – MediaWiki:Modern.css
• Monolibro – MediaWiki:Monobook.css
• Vector legado (2010) - MediaWiki: Vector.css
• Vector 2022 (predeterminado) – MediaWiki:Vector-2022.css

CSS para todo el sitio está en MediaWiki:Common.css

Puedes anularlos por ti mismo usando estilos de usuario. Para realizar cambios que se apliquen independientemente de tu diseño actual, cambia tu common.css . Para realizar cambios que afecten a tu diseño actual, cambia tu skin.css . Para realizar cambios que afecten a todos los proyectos de Wikimedia, puedes iniciar sesión en Meta y cambiar tu global.css.

Introduzca algunos 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 el contenido) en función de la información de estilo de la página, siempre que el diseño utilizado sea el que se aplica a la página. Esto tiene limitaciones. Por ejemplo, se puede obtener una vista previa de cómo se verán los enlaces en el margen, pero es posible que no sean de todos los tipos que uno querría verificar. Después de guardar, mientras todavía está en la página o en cualquier otra página, realice una recarga forzada (mayúsculas-recargar/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 como verdadera en la configuración. De lo contrario, es posible cargarla mediante JavaScript.

Para importar CSS desde una subpágina de usuario mediante JavaScript, use el mw.loader.loadcomando en su common.js :

 mw .loader .load ( ' /w/index.php?title=Usuario:Ejemplo/stylesheet.css&action=raw&ctype=text/css' , 'text/css' ) ;   

En Wikipedia, se puede usar JavaScript para agregar nuevas funciones, como cuadros de texto para buscar y reemplazar, o brindar opciones avanzadas de recuperación. Hay scripts para personalizar todo, desde el estilo de fuente predeterminado hasta botones personalizados.

Se pueden importar y utilizar muchas páginas de scripts . También se pueden utilizar distintos 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 Special:Preferences .

Para agregar scripts preexistentes a su página JavaScript, agréguelos {{subst:js|name of script}}al archivo. Puede encontrar instrucciones más detalladas en Wikipedia:Scripts de usuario/Guía .

El código 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 >  @import "/style/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 la apariencia particular (en este caso aquí en Wikipedia haciendo referencia a //en.wikipedia.org/style/wikistandard.css ) y el JS y CSS personal para una apariencia particular.

De esta forma, el servidor proporciona el HTML que hace referencia a los archivos CSS y JS, pero no realiza ninguna interpretación de su contenido. La interpretación la realiza el navegador, en función de sus capacidades y configuraciones.

Además de lo anterior, o como alternativa, se puede configurar un CSS local en el navegador. Si se utilizan varios navegadores, cada uno puede configurarse con un CSS diferente. Cada uno se aplica a toda la World Wide Web, no solo a un proyecto de MediaWiki (y no depende de que se haya iniciado sesión). Sin embargo, una configuración solo 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 de la web que una para h2 (pero afecta al menos a todos los proyectos de MediaWiki, no solo a uno).

Para las líneas de CSS que deberían ser diferentes en distintos 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 se deberían colocar en las subpáginas del usuario.

Algunas computadoras, por ejemplo, en cibercafés, dispositivos móviles o tabletas, no permiten que los usuarios configuren preferencias para el navegador. En ese caso, las subpáginas de usuario permiten configurar un estilo de usuario de todos modos.

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 CSS, expresados ​​en términos de elementos, clases e identificadores, relevantes para el estilo del cuerpo de la página incluyen lo siguiente. En la medida de lo posible, se proporcionan ejemplos que muestran el resultado para la configuración de estilo actual:

• :link — enlaces — ejemplo: Ayuda:Índice  ; predeterminado: ayuda:índice (Ver a vs :link)
• :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í (Media:), 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 son aplicables en el primer caso)
• :link.newejemplo; predeterminado: ejemplo
• .allpagesredirect– abc – redirecciona en Special:Allpages y Special:Prefixindex
• body.ns-0, ..., (espacios de nombres)body.ns-15
• div#bodyContent
• div#column-content
• div#editsection
• div#globalWrapper
• div#tocindent
• div.tocline
• h1.firstHeading
• h2
• h3
• img.texImagen TeX
• small- ejemplo
• table.toc

avs:link – Es un error común usar " a" en lugar de " " para dar estilo a los enlaces. Mientras que " " se aplica solo a los enlaces, " " se aplica tanto a los enlaces como a los anclajes con nombre (por ejemplo , ).:link:linka<a name="bookmark">

Los enlaces internos normales no están en clase internal(solían estarlo y todavía lo están en sitios que usan una versión anterior del software, por ejemplo, [2]); se les puede aplicar estilo haciendo 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 interlingüísticos:

• #p-lang a

Tambié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 por colores o resaltar usuarios específicos (incluido uno mismo) y/o enlaces a páginas específicas (como poner en negrita las páginas vigiladas en Cambios recientes). Esto funciona en Opera, pero no en IE. Consulte también Ayuda:Vigilancia de páginas#CSS .

La lista de vigilancia y los cambios recientes utilizan dos clases:

• autocomment
  ejemplo
• new(vea abajo)

El historial de la página tiene clases autocommenty:

• user
• minor

Por 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.

• Cuadro de edición:textarea#wpTextbox1

• Editar cuadro de resumen:input#wpSummary

Ver meta:Personalización:Explicación de los aspectos

Un "estilo" extremo para un texto es no mostrarlo, con

. nombre_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 de nombres de plantillas, nombres de parámetros, valores de parámetros, nombres de páginas en enlaces, etc.

Una clase o id 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 nombres de clase posibles, 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 eg 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 solo 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 apariencias, siempre que no se anulen.

El nombre de un atributo HTML puede convertirse en variable. HTML Tidy (una biblioteca HTML4 obsoleta que está a punto de eliminarse) ha eliminado históricamente los atributos con nombres no válidos en el servidor, por lo que el resultado no depende de la capacidad del navegador para ignorar los nombres de atributos no válidos y se reduce la cantidad de datos enviados. Para una variable con un posible valor "class", consulte Wikipedia:HiddenStructure y en:Template:Infobox  ( backlinks edit) .

Como wikitexto

< span  style = "display:{{{3|none}}}" > miércoles </ span >

Muestra "Wed" si el parámetro 3 está definido, pero no "none", y no muestra nada si el parámetro 3 no está definido o es "none". Si el valor del parámetro 3 es un estilo de visualización distinto de "none", 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 ; }         /* evitar que la imagen de fondo se desplace con el área de contenido */ body { background-attachment : fixed ; }    /* reemplaza el libro en el fondo con otra cosa */ body { background : Purple ; }    /* cambia el fondo de las áreas previas */ pre { background : White }    /* cambiar el logo */ # p-logo a { background : url ( https://upload.wikimedia.org/wikipedia/commons/9/93/Color-chars-logo.png ) 35 % 50 % no-repeat ; }        /* no use ningún logotipo, mueva los cuadros a esa área en su lugar */ # p-logo { display : none } # column-one { padding-top : 0 ; }        /* suprime el icono de persona con tu nombre de usuario */ li # pt-userpage { background : none }    /* usa las preferencias del navegador para el tamaño del texto y la fuente */ html , body , # globalWrapper { font : heritage !important ; }       /* siempre subrayar los enlaces */ : link { text-decoration : underline ; }    /*Mostrar el contenido del cuerpo en una columna más estrecha para facilitar la lectura*/ /*ajustar los porcentajes como se desee*/ div # bodyContent { width : 50 % ; line-height : 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 . selected a { background : white ; }       /* cambiar el fondo del borde de las pestañas seleccionadas */ # p-cactions li . selected { border-color : #aaaaaa ; }     /* la parte inferior de la pestaña no se elimina al pasar el mouse por encima */ # p-cactions li a : hover { z-index : 0 ; text-decoration : none ; } # p-cactions li . selected a : hover { z-index : 3 ; }              /* estilo del cuadro de búsqueda y los botones debajo de él */ . searchButton { background-color : #efefef ; border : 1 px outset ; } # searchInput { border : 1 px inset ; }           /* colores de enlaces estándar */ a : link { color : #0645ad ; } a : visits { color : #0b0080 ; } a . new : link { color : #cc2200 ; } a . new : visits { color : #a55858 ; } a . extiw : link { color : #3366bb ; } /* enlaces a otras Wikipedias */ a . extiw : visits { color : #3366bb ; } a . external : link { color : #3366bb ; } /* enlaces externos */ a . external : visits { color : #3366bb ; }                                  /* poner barra de desplazamiento en las secciones previas en lugar del feo corte/superposición en Firefox */ pre { overflow : auto ; }    /* tacha el enlace de carga de archivo como recordatorio para subirlo a Commons en su lugar */ li # t-upload { text-decoration : line-through ; }    /* centrar/centrar el título de cada página */ . firstHeading { text-align : center ; }    /* Advertencia de doble redirección */ div . redirectMsg a . mw-redirect : after { content : ' <double redirect>' ; color : Red ; font-style : italic ; }        /* Evita que el nuevo CSS en "Actualización de tipografía" (desde principios de 2014) muestre títulos y encabezados de página en fuente serif */ h1 , h2 { font-family : heritage !important ; }      /* Mostrar cuadros de datos personales en los artículos */ table . persondata { display : table ; }   /* Deshazte de las advertencias tediosas */ # editpage-copywarn , # editpage-copywarn2 , # editpage-copywarn3 , # editpage-head-copywarn , . editpage-head-copywarn , # editnotice_BLP_editintro , . ve-ui-mwSaveDialog-license { display : none !important ; }        /* Deshazte del tedioso texto repetitivo de novato */ # category-namespace-editnotice , # footer-info-copyright , # sitesub , . edithelp , . posteditwindowhelplinks , # footer-icons , . ve-ui-mwSaveDialog-summaryLabel { display : none !important ; }         /* Ahorra espacio en la lista de plantillas que se muestra al final de la página al editar */ : templatesUsed ul , : templatesUsed li { display : inline ; padding-right : 5 px ;}       /* Cambia todo el texto a la fuente "Avenir" (excepto los encabezados) (puedes cambiar la fuente a cualquier otra) */ . mw-body h1 , . mw-body h2 { font-family : "Avenir" }      

• Fragmentos con ejemplos de CSS MW

/* hacer algunas esquinas redondeadas */ # p-cacciones ul li , # p-cacciones ul li a { borde-superior-izquierdo-radio : 1 em ; borde-superior-derecho-radio : 1 em ; } # contenido { borde-superior-izquierdo-radio : 1 em ; borde-inferior-izquierdo-radio : 1 em ; } . pBody { borde-superior-derecho-radio : 1 em ; borde-inferior-derecho-radio : 1 em ; }                     

• Moz: ver las reglas arriba
• http://www.vertexwerks.com/tests/sidebox/ – formato de cuadro lateral
• http://www.alistapart.com/articles/slidingdoors2/ – Pestañas redondeadas con efecto enrollable
• http://www.alistapart.com/articles/customcorners/ – otra variante para esquinas de caja redondeadas
• http://alistapart.com/articles/customcorners2/, Demostración de esto
• http://www.alistapart.com/articles/mountaintop/ – variantes de esquinas aún más extrañas
• http://www.virtuelvis.com/gallery/css/rounded/ – variante simple de estilo libre que utiliza los pseudoelementos :before y :after (solo navegadores css2, no en IE)

/* ** 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 de fuente : 8 pt ; 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 de él (no es necesario en la versión actual): */ @ media print { # content a : link : after , # content a : visits : after { content : " ( " attr ( href ) " ) " ; } }            

Probado para funcionar en Camino, Safari e Internet Explorer 7.

/* Transformar la barra de herramientas del usuario en una caja lateral */ # p-personal { position : relative ; z-index : 3 ; width : 11.6 em ; }     # p-personal . pBody { ancho : 10.7 em ; borde : ninguno ; margen : 0 0 0.1 em 0 em ; flotante : ninguno ; desbordamiento : oculto ; tamaño de fuente : 95 % ; fondo : blanco ; colapso de borde : colapsar ; borde : 1 px sólido #aaaaaa ; relleno : 0 0.8 em 0.3 em .5 em ; }                              # p-personal ul { altura-línea : 1.5 em ; tipo-estilo-lista : cuadrado ; imagen-estilo-lista : url ( "/style/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 { display : elemento-de-lista ; relleno : 0 ; margen : 0 0 0 0 ; margen-inferior : 0.1 em ; }            /* suprime el ícono de persona con tu nombre de usuario */ /* necesario si aún no está en su lugar */ li # pt-userpage { background : none }    

Consulte el archivo main.css de monobook para ver los estilos completos que se usan de manera predeterminada.

Este estilo permite a los usuarios de Vector Legacy mantener la barra superior (con la barra de búsqueda y los enlaces a la página de discusión, edición, página de usuario, etc.) visible a medida que se desplaza, de forma similar a Vector 2022:

@ media screen { # mw-head { posición : fija ; fondo : gradiente lineal ( hasta abajo , #fff 50 % , #f6f6f6 100 % ); } }            

En la máscara Vector Legacy, la posición de la barra lateral se puede fijar fácilmente:

/* Arreglar la barra lateral */ div # mw-panel { position : fixed ; overflow : auto ; top : 0 px ; bottom : 0 px ; height : 100 % ; /* Evitar la superposición de contenido al desplazarse lateralmente */ background-color : #F6F6F6 ; border-right : 1 px solid #A7D7F9 ; } /* Evitar el desplazamiento lateral en elementos pre */ pre { overflow : auto ; max-height : 25 em ; }                       

Esto puede tener efectos secundarios no deseados en Chrome; por ejemplo, al visualizar una página como la página common.css que acaba de editar para poner este código, el contenido visible será mucho más corto y requerirá desplazamiento vertical en un marco.

El diseño Cologne Blue tiene una opción para una barra rápida flotante a la izquierda, 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 te desplazas. Esto proporciona la misma funcionalidad para el diseño Monobook (en Mozilla). Consulta meta:Ayuda:Estilo de usuario/barra rápida flotante.

En User:Tillwe/monobook.css (en la primera parte) se puede encontrar una combinación rápida y sencilla de menús Monobook con fuentes serif en el área de texto . También muestra elementos con formato de tabla de forma más o menos correcta. Hay algunas peculiaridades y errores (algunos debido a que el esquema CSS de Wikipedia no parece ser demasiado reflexivo). Funciona en Netscape7/Win98 para el autor.

/******************************************************************/ /* moviendo enlaces de gato hacia la derecha */ /******************************************************************//* mover el cuadro de enlaces de gato */ # enlaces de gato { posición : absoluta ; índice z : 1 ; borde : 1 px sólido #aaaaaa ; fondo : #fafaff ; derecha : 1 em ; superior : -0,25 em ; ancho : 10,5 em ; flotante : derecha ; margen : 0,2 em ; relleno : 0,2 em ; }                /* formatea el propio catlinks */ p . catlinks { color : #aaaaaa ; font-family : Verdana , sans-serif ; font-size : 67 % ; line-height : 1.5 em ; text-align : left ; text-indent : 0 ; text-transform : none ; white-space : normal ; margin : 0.2 em ; }               # p-personal h5 { mostrar : en línea ; }    /* formato de enlaces en los catlinks (a diferencia de : y "|") */ p . catlinks a { color : #888888 ; }   

/* no utilice una fuente más pequeña */ td . diff-addedline , td . diff-deletedline , td . diff-context { font-size : 100 % } ;      /* subraya solo el texto que es diferente */ span . diffchange { text-decoration : underline ; }   

/*Suprimir los botones "(gracias)"*/ . mw-thanks-thank-link { display : none ; }   

/* ocultar la descripción 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 para alternar entre dos colores de fondo diferentes. Consulta User:Isaacl/style/discussion-threads para obtener más detalles y una maqueta de la apariencia.

Los usuarios pueden tener CSS de usuario que oculte 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 . mw-parser-output . infobox { mostrar : ninguno ; }     

Alternativamente, puede agregar el siguiente código a su common.js o a un script de usuario del navegador que se ejecuta mediante una extensión como Greasemonkey :

$ ( '.infobox' ) .ocultar ();

Tenga en cuenta que, aunque, según WP:Manual of Style/Infoboxes , toda la información de un infobox idealmente debería encontrarse también en el cuerpo principal de un artículo, no existe un cumplimiento perfecto de esta directriz. Por ejemplo, la jerarquía taxonómica completa en , y los códigos OMIM y otros códigos de bases de datos médicas de a menudo no se encuentran en el contenido principal del artículo. El infobox también suele ser la ubicación de la imagen más significativa, incluso la única, de un artículo. Hay un script de usuario que elimina los infoboxes pero mueve las imágenes contenidas a miniaturas separadas: User:Maddy de Celeste/disinfobox.js .{{Taxobox}}{{Infobox disease}}

Para utilizar de manera consistente una fuente monoespaciada con caracteres bien diseñados para la codificación de modo de distinguir claramente entre l, 1, y I, y entre Oy 0, y entre -, −, –, y —, se puede cambiar la fuente monoespaciada predeterminada del sistema:

Si lo prefiere como está, puede simplemente @importtranscluirlo: consulte meta:User:SMcCandlish/codefont.css para obtener instrucciones rápidas.

De lo contrario, copie uno de los fragmentos de código a continuación en su página Special:MyPage/common.css o meta:Special:MyPage/global.css, reemplazando "Roboto Mono"el código con su fuente de codificación preferida. (Se utilizó Roboto Mono en este ejemplo porque es una buena fuente de codificación gratuita para material editable por el usuario en la wiki).

Este código hará lo siguiente:

• Aplique una fuente monoespaciada consistente de su elección a todos los elementos HTML normalmente monoespaciados como <code>, <pre>, etc.
• Volver a los valores predeterminados del sistemamonoespaciadofuente, en caso de que la fuente elegida no esté disponible o carezca de los caracteres necesarios.
• Haga lo mismo para la salida de todas las plantillas de formato de ejemplo , como y .{{mxt}}{{xt}}
• Aplicar a clases adicionales de todo el sitio identificadas hasta el momento (por ejemplo, .monospaced) que generan como espacio único.
• Haga que los tres campos de edición más frecuentes también utilicen esta pila de fuentes: la ventana de edición principal, la línea de resumen de edición y el cuadro de entrada de búsqueda.
• Si se conocen clases adicionales que deberían agregarse, 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 , . example-mono , . userlinks-username , . monospaced , . keyboard-key , . button , . plaincode { font-family : "Roboto Mono" , monospace !important ; } /* Hacer que parte del material editable sea monoespaciado */ # 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 , . example-mono , . userlinks-username , . monospaced , . keyboard-key , . button . plaincode { font-family : "Roboto Mono" , monospace !important ; } /* Hacer que parte del material editable sea monoespaciado */ # wpTextbox1 , # wpSummary , # searchInput , # searchText { font-family : "Roboto Mono" , monospace !important ; }          

Esfuerzos de limpieza

Si desea ayudar a limpiar instancias del elemento, que se ha desaconsejado desde la década de 1990 y generalmente debe reemplazarse con (esto puede variar según el contexto), puede agregar algo como lo siguiente a su<tt>...</tt><code>...</code>común.cssHacer que sobresalga como un pulgar dolorido:<tt>

/* Marcar código incorrecto para limpieza */ tt { color : DarkRed ; background : Pink ; }      

También puedes hacer esto con <font>, <center>, <strike>, y otros elementos obsoletos . Para CSS, puedes simplemente importarlo, consulta meta:User:SMcCandlish/lint.css.

• http://www.22bulbjungle.com/ – excelentes tutoriales de CSS
• http://www.csszengarden.com/ – inspiración
• http://www.alistapart.com/ – excelentes artículos
• http://www.positioniseverything.net/ – algunos errores de imagen entretenidos y más

JavaScript tiene muchas posibilidades, por ejemplo, añadir texto, incluidos enlaces, en las posiciones deseadas. Este contenido añadido puede depender del contenido de la página HTML de origen 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.

A modo de 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/PageTitle' , 'PageTitle' , nulo , nulo , nulo , '#pt-preferences' );      

El código siguiente mueve el cuadro de categoría a la parte superior del artículo. Por supuesto, es posible que quieras aplicar algo de CSS para que se vea más bonito:

función catsattop ( ) { var gatos = document.getElementById ( ' catlinks ' ) ; var bc = document.getElementById ( ' bodyContent ' ) ; bc.insertBefore ( gatos , bc.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:

función categoryToTop ( ) { var thebody = document.getElementById ( ' contentTop' ); var categorías = document.getElementById ( ' catlinks' ) ;           si ( categorías != null ) { categorías . parentNode . removeChild ( categorías ); thebody . parentNode . insertBefore ( categorías , thebody ); } }         

Un poco de CSS para acompañar eso...

/* mover el cuadro de enlaces de gato */ # catlinks { right : 1 em ; top : -0.25 em ; max-width : 50 % ; /* esto limita el tamaño del cuadro, pero no lo establece estrictamente */ float : right ; margin : 0.5 em ; padding : 0.2 em ; }            /* formatea el propio catlinks */ p . catlinks { font-size : 67 % ; text-align : left ; text-indent : 0 ; text-transform : none ; white-space : normal ; margin : 0.2 em ; }         

Lamentablemente, si el cuadro de categoría es grande (como en las entradas sobre presidentes de los EE. UU. y otras figuras importantes), puede desplazar un cuadro de información hacia un costado. Para corregir esto, se puede agregar el atributo "clear: right" a un cuadro de información.

El CSS puede controlarse 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 que especifiquen el 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 interidioma del código de idioma lc en el margen, siempre que el diseño especifique esta clase interwiki- lc (p. ej., Cologne Blue especifica class='external' para cada idioma, por lo que no funciona para ese diseño).

• http://www.quirksmode.org/ – consulte la sección de JavaScript y DOM
• http://www.alistapart.com/
• http://www.quirksmode.org/dom/domform.html – clonación de formularios (es posible cargar algunas imágenes a la vez usando esto, también es un buen punto de partida para la clonación de la estructura)

• Ayuda: Hojas de estilo en cascada
• Ayuda: Personalización de la visualización de referencias
• mw:Galería de estilos de usuario
• Wikipedia: scripts de usuario de WikiProject
• mw:Proyectos de piel
• mw:Ayuda:Preferencias, m:Ayuda:Preferencias
• Hojas de estilo en cascada (artículo de Wikipedia)
• m:Personalización:Explicación de las máscaras
• mw:Ayuda:Configuración (especialmente mw:Manual:$wgAllowUserJs y mw:Manual:$wgAllowUserCss)
• Wikipedia:Herramientas/Ventanas emergentes de navegación (ventanas emergentes de navegación en JavaScript)
• Wikipedia:Catálogo de clases CSS