¡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 de la piel que está utilizando actualmente, crear una página en especial: MiPágina / skin.css que contiene el CSS que desea utilizar (para aplicar los cambios sin tener en cuenta lo que la piel que está utilizando, ponerlos en especial: MyPage / common.css en su lugar). Para saber cómo ocultar mensajes particulares, consulte WP: CSSHIDE .
General
Para cada estilo definible por el usuario, una piel se selecciona primero, junto con una correspondiente hoja de estilo en cascada (CSS). 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 los selectores [1] : elementos HTML , clases e identificadores especificados en el código HTML. En consecuencia, las posibilidades para cada aspecto se pueden ver mirando el código fuente HTML de una página, en particular mirando estas clases e identificaciones: cuanto más hay, más versatilidad hay.
Hay CSS en el propio software MediaWiki, y Wikipedia lo anula utilizando las siguientes páginas:
- Cologne Blue - MediaWiki: Cologneblue.css
- Moderno - MediaWiki: Modern.css
- Monobook - MediaWiki: Monobook.css
- Foto de archivo - MediaWiki: Vector.css
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 common.css . Para realizar cambios que afecten a su piel 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 archivo 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) sobre la base de la información de estilo en la página, siempre que la máscara utilizada sea la máscara para la que se aplica 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 estos no sean de todos los tipos que uno querría comprobar. Después de guardar, mientras todavía está en la página o mientras está en cualquier otra página, haga una recarga forzada (shift-reload / ctrl-f5) para obtener los nuevos archivos.
Para importar CSS desde una subpágina de usuario, use el mw.loader.load
comando en su common.js :
mw . cargador . load ( '/w/index.php?title=User:Example/stylesheet.css&action=raw&ctype=text/css' , 'texto / css' );
Representación
La fuente HTML de una página contiene líneas como
< script src = "/w/wiki.phtml?title=User:your-username-here/standard.js&action=raw&ctype=text/javascript" > script > @import "/style/wikistandard.css"; @import "/w/wiki.phtml?title=User:your-username-here/standard.css & action = raw & ctype = text / css";
para el CSS de todo el proyecto para la máscara en particular (en este caso, aquí en Wikipedia, se hace referencia a //en.wikipedia.org/style/wikistandard.css) y el JS y CSS personal para una máscara en particular.
Por lo tanto, el servidor proporciona HTML que hace referencia a los archivos CSS y JS, pero no hace ninguna interpretación de su contenido. La interpretación la realiza el navegador, dependiendo de sus capacidades y configuraciones.
CSS
CSS en subpáginas de usuario versus CSS en un archivo local
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 solo a un proyecto de MediaWiki (y no depende de estar conectado). Sin embargo, una configuración solo afecta a otras páginas web si utilizan el mismo selector de 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 solo 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 la configuración de 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 con respecto al tamaño de fuente deben colocarse en el CSS local.
Selectores de CSS
Los selectores de 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 dan ejemplos que muestran el resultado de la configuración de estilo actual:
:link
- enlaces - ejemplo: Ayuda: Índice ; Por defecto: ayuda: Índice (Ver A frente a: 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 de 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 la 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. Interno solo son aplicables en el primer caso):link.new
ejemplo ; predeterminado: ejemplo.allpagesredirect
- abc - redirecciona en Special: Allpages y Special: Prefixindexbody.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.tex
Imagen de TeXsmall
- ejemplotable.toc
a
vs:link
- Es un error común usar " a
" en lugar de " " para diseñar enlaces. Mientras que " " se aplica solo a los enlaces, " " se aplica tanto a los enlaces como a los anclajes con nombre (p . Ej .).:link
:link
a
<a name="bookmark">
Los enlaces internos normales no están en su clase internal
(solían estar, y todavía están en sitios que usan una versión anterior del software, por ejemplo, [2] ); se pueden diseñar 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 entre idiomas:
- {{código | lang = css | código = # 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 en particular (incluido uno mismo) y / o enlaces a páginas en particular (como las páginas vistas en negrita 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
ejemplonew
(vea abajo)
El historial de la página tiene clases autocomment
y:
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 observación ni en los cambios recientes.
Editar página
- Cuadro de edición:
textarea#wpTextbox1
- Editar cuadro de resumen:
input#wpSummary
Bloques de estilo principales
Ver meta: Personalización: Explaining_skins
Sin pantalla
Un "estilo" extremo para un texto es no mostrarlo, con
. classname {display: none}# id {display: none}
etc.
Los enlaces que no se muestran no funcionan (a diferencia de los enlaces con 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.
Estilo según parámetro o variable
Clase o id de variable
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 posibles nombres de clase, se puede definir el estilo de esa clase. Si la clase no está definida, se ignora, por lo que se usa 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 máscaras, en la medida en que no se anulen.
Nombre de atributo HTML variable
Un nombre de atributo HTML se puede convertir en variable. HTML Tidy , una biblioteca HTML4 obsoleta que está programada para su eliminación , 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 los nombres de atributos no válidos y la cantidad de datos enviados se reduce. Para una variable con posible valor "clase", consulte Wikipedia: HiddenStructure y en: Template: Infobox ( editar vínculos de retroceso ) .
Valor de parámetro de estilo variable
Me gusta en Wikitexto
< 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 "ninguno". Si el valor del parámetro 3 es un estilo de visualización distinto de "ninguno", se aplica ese estilo.
Muestras
Los estilos personalizados se pueden colocar 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 * / # content , # content table # p-cactions ul li a { background : # f5f5f5 ; }/ * evitar que la imagen de fondo se desplace con el área de contenido * / cuerpo { adjunto de fondo : fijo ; }/ * reemplazar el libro en el fondo con algo más * / 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 % sin repetición ; }/ * 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 ícono de persona junto a tu nombre de usuario * / li # pt-userpage { background : none }/ * usar las preferencias del navegador para el tamaño del texto y la fuente * / html , body , # globalWrapper { font : heredar ! 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 desee * / 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 de borde : #aaaaaa ; }/ * la parte inferior de la pestaña no se quitó al pasar el mouse * / # p-cactions li a : hover { z-index : 0 ; decoración de texto : ninguna ; } # p-cacciones li . seleccionado a : hover { z-index : 3 ; }/ * estilo el cuadro de búsqueda y los botones debajo de él * / . searchButton { 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 : link { 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 cortes / superposiciones desagradables en Firefox * / pre { overflow : auto ; }/ * tachar el enlace Subir archivo como recordatorio para subirlo a Commons en su lugar * / li # t-upload { text-decoration : line-through ; }/ * centra / centra el título de cada página * / . firstHeading { alineación de texto : centro ; }/ * Advertencia de doble redirección * / div . redirectMsg a . mw-redirect : after { content : '& lt; double redirect & gt;' ; color : rojo ; estilo de fuente : cursiva ; }/ * Evitar que el nuevo CSS en "Actualización de tipografía" (desde principios de 2014) muestre los títulos y encabezados de las páginas en fuente serif * / h1 , h2 { font-family : heredar ! Important ; }/ * Mostrar cuadros de datos personales en artículos * / tabla . persondata { display : table ; }/ * Se puede olvidarse de las advertencias tediosas * / # EditPage-copywarn , # EditPage-copywarn2 , # EditPage-copywarn3 , # EditPage de cabeza copywarn , . EditPage de cabeza copywarn , # editnotice_BLP_editintro , . ve-ui-mwSaveDialog-license { display : none ! important ; }/ * Se puede olvidarse de repetitivo tedioso Noob * / # categoría de espacio de nombres editnotice , # de pie de página-info-derecho de autor , # sitesub , . edithelp , . posteditwindowhelplinks , # footer-iconos , . ve-ui-mwSaveDialog-summaryLabel { display : none ! important ; }/ * Ahorro de espacio en la lista de plantillas de muestra al final de la página durante la edición de * / : Templatesused ul , : Templatesused li { display : inline ; padding-right : 5 px ;}/ * Cambiar todo el texto a la fuente "Avenir" (excepto los encabezados) (puede cambiar la fuente a cualquier otra) * / . mw-cuerpo h1 , . mw-body h2 { font-family : "Avenir" }
Esquinas redondeadas
/ * redondear algunas esquinas * / # p-cacciones ul li , # p-cacciones ul li a { border-top-left-radius : 1 em ; radio de borde superior derecho : 1 em ; } # contenido { border-top-left-radius : 1 em ; radio del borde inferior izquierdo : 1 em ; } . pBody { border-top-right-radius : 1 em ; radio de borde inferior derecho : 1 em ; }
Vínculos de esquinas redondeadas / pestañas
- Moz: consulte las reglas anteriores
- http://www.vertexwerks.com/tests/sidebox/ - formato de la caja lateral
- http://www.alistapart.com/articles/slidingdoors2/ - pestañas redondeadas con efecto de rollover
- http://www.alistapart.com/articles/customcorners/ - otra variante para esquinas de caja redondeadas
- http://alistapart.com/articles/customcorners2/ , Demo de este
- http://www.alistapart.com/articles/mountaintop/ - incluso variantes de esquina más extrañas
- http://www.virtuelvis.com/gallery/css/dered/ - variante de estilo libre simple usando los pseudoelementos: before y: after (solo navegadores css2, no en IE)
Ajustes de vista de impresión
/ * ** Coloca 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 { # footer , # content , body { font-size : 8 pt ! important ; } 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 { fuente- tamaño : 8 pt ; font-weight : normal ; } }/ * Cosas avanzadas: using: before and: 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 , # contenido a : visitado : después de { contenido : "(" attr ( href ) ")" ; } }
Convierta la barra de herramientas del usuario en un recuadro lateral
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 . pBody { anchura : 10,7 em ; borde : ninguno ; margen : 0 0 0,1 em 0 em ; flotar : ninguno ; desbordamiento : oculto ; tamaño de fuente : 95 % ; fondo : blanco ; colapso de la frontera : colapso ; borde : 1 px sólido #aaaaaa ; relleno : 0 0,8 cm 0,3 cm 0,5 cm ; }# p-personal ul { altura de línea : 1,5 em ; tipo de estilo de lista : cuadrado ; lista-estilo-imagen : url ( "/style/monobook/bullet.gif" ); tamaño de fuente : 95 % ; margen : 0 0 0 1,5 em ; acolchado : 0 ; alineación de texto : izquierda ; transformación de texto : ninguna ; }# p-personal li { display : list-item ; acolchado : 0 ; margen : 0 0 0 0 ; margen inferior : 0,1 em ; }/ * suprime el ícono de persona junto a tu nombre de usuario * / / * necesario si aún no está en su lugar * / li # pt-userpage { background : none }
Consulte el monobook main.css para conocer los estilos completos que se utilizan de forma predeterminada.
Fija la posición de la barra lateral mientras te desplazas
En la máscara de Vector predeterminada, 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 px ; abajo : 0 px ; altura : 100 % ; / * Evita la superposición de contenido al desplazarte hacia los lados * / background-color : # F6F6F6 ; borde derecho : 1 px sólido # A7D7F9 ; } / * Evita el desplazamiento lateral en pre elementos * / pre { overflow : auto ; altura máxima : 25 cm ; }
Esto puede tener efectos secundarios no deseados en Chrome; Por ejemplo, al ver una página como la página very common.css que acaba de editar para incluir este código, el contenido visible será mucho más corto y requerirá un desplazamiento vertical en un marco.
La máscara de Cologne Blue tiene una opción para una barra rápida "flotante a la izquierda", que hace que los enlaces de navegación y las cajas de herramientas 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 .
En Usuario: Tillwe / monobook.css (en la primera parte) se encuentra una combinación rápida y sucia de menús de Monobook con fuentes serif en el área de texto . 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.
Mover enlaces de categoría
/ ********************************************** ***************** / / * moviendo catlinks hacia la derecha * / / ********************* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ * mover el cuadro catlinks * / # catlinks { posición : absoluta ; índice z : 1 ; borde : 1 px sólido #aaaaaa ; fondo : #fafaff ; derecha : 1 em ; superior : -0,25 em ; ancho : 10,5 cm ; flotar : derecha ; margen : 0,2 em ; acolchado : 0,2 em ; }/ * formatea los propios catlinks * / p . catlinks { color : #aaaaaa ; familia de fuentes : Verdana , sans-serif ; tamaño de fuente : 67 % ; altura de línea : 1,5 cm ; alineación de texto : izquierda ; sangría de texto : 0 ; transformación de texto : ninguna ; espacio en blanco : normal ; margen : 0,2 em ; }# p-personal h5 { display : inline ; }/ * enlaces de formato en los catlinks (a diferencia de ":" y "|") * / p . cat enlaza un { color : # 888888 ; }
Estilo de vista diferencial
/ * no use una fuente más pequeña * / td . diff-addedline , td . diff-deleteline , td . diff-context { tamaño de fuente : 100 % } ;/ * subraya solo el texto que es diferente * / span . diffchange { decoración de texto : subrayado ; }
Eliminación de los botones "(agradecimiento)" en el registro del historial
/ * Suprime los botones "(agradecimiento)" * / . mw-thanks-thank-link { pantalla : ninguna ; }
Ocultar mensajes de instrucciones largos
/ * ocultar la propaganda de Ver-Fuente 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 caché del navegador.
Infoboxes y estilo de usuario
Los usuarios pueden tener CSS de usuario que oculta cualquier cuadro de información en sus propios navegadores.
Para ocultar todos los infoboxes, añada lo siguiente a Especial: MiPágina / common.css (para todas las pieles , o especial: MiPágina / skin.css por sólo la piel actual), en una línea por sí mismo:
. cuadro de información { pantalla : ninguno ; }
Alternativamente, puede agregar el siguiente código a su common.js o en un script de usuario del navegador que es ejecutado por una extensión como Greasemonkey :
$ ( '.infobox' ). ocultar ();
Tenga en cuenta que aunque, según WP: Manual of Style / Infoboxes , idealmente toda la información de un infobox también debería encontrarse en el cuerpo principal de un artículo, no existe un cumplimiento perfecto de esta guía. Por ejemplo, la jerarquía taxonómica completa en , y el OMIM y otros códigos de 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 significativa, incluso la única, de un artículo.{{Taxobox}}
{{Infobox disease}}
CSS de usuario para una fuente de codificación monoespaciada
Puede utilizar consistentemente una fuente monoespaciado con caracteres bien diseñados para la codificación (por ejemplo, para distinguir claramente entre l
, 1
y I
, y entre O
y 0
, y entre -
, −
, –
, y —
).
Agregue algo como uno de los siguientes fragmentos de código en su Especial: MyPage / common.csspágina, sustituyéndola "Roboto Mono"por la fuente de codificación que prefiera ( se eligió Roboto Mono como 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:
- Aplique una fuente monoespaciada consistente de su elección (y el sistema de respaldo predeterminado monoespacio, En caso de que Go fuente que falta o no tiene caracteres que necesita) a todos los elementos HTML normalmente Monospaced como
,
, etc.
- Haga lo mismo para las clases utilizadas por y otras plantillas monoespaciadas en la familia
{{mxt}}
{{xt}}
- Haga lo mismo para las clases adicionales de todo el sitio (como se identificó hasta ahora, por ejemplo
.monospaced
) que se generan como monoespacio. - Haga que los tres campos de edición que se encuentran con más frecuencia 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 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 * / código , pre , samp , kbd , tt , . ejemplo-mono , . userlinks-nombre de usuario , . solo espacio , . Teclado-clave , . botón , . plaincode { font-family : "Roboto Mono" , monospace ! important ; } / * Hacer 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 * / código , pre , samp , kbd , tt , . ejemplo-mono , . userlinks-nombre de usuario , . solo espacio , . Teclado-clave , . botón . plaincode { font-family : "Roboto Mono" , monospace ! important ; } / * Hacer 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>
common.csspara hacer sobresalir como un pulgar dolorido:<tt>
/ * Marcar código incorrecto para limpieza * / tt { color : DarkRed ; fondo : rosa ; }
También puede hacer esto con ,
,
, y otros elementos en desuso . Para CSS, solo puede importar para esto, consulte meta: Usuario: SMcCandlish / lint.css .
Enlaces externos en CSS
- http://www.22bulbjungle.com/ - excelentes tutoriales de CSS
- http://www.csszengarden.com/ - inspiración
- http://css-discuss.incutio.com/ - información muy concentrada, muy completa
- http://www.alistapart.com/ - excelentes artículos
- http://www.positioniseverything.net/ - algunos errores entretenidos y más
- http://meyerweb.com/eric/css/edge/ : excelentes ideas para CSS avanzado
JavaScript
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 . util . addPortletLink ( 'p-personal' , '/ wiki / PageTitle' , 'PageTitle' , nulo , nulo , nulo , '# preferencias-pt' );
Mover categorías al principio
El siguiente código mueve el cuadro de categoría a la parte superior del artículo. Por supuesto, es posible que desee aplicar algo de CSS para que se vea más bonito:
función catsattop () { var gatos = documento . getElementById ( 'catlinks' ); var bc = documento . 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:
function categoryToTop () { var thebody = document . getElementById ( 'contentTop' ); var categorías = documento . getElementById ( 'catlinks' ); if ( categorías ! = nulo ) { categorías . parentNode . removeChild ( categorías ); el cuerpo . parentNode . insertBefore ( categorías , el cuerpo ); } }
Un poco de CSS para ir con eso ...
/ * mover el cuadro catlinks * / # catlinks { derecha : 1 em ; superior : -0,25 em ; ancho máximo : 50 % ; / * esto limita el tamaño de la caja, pero no se establece estrictamente * / float : right ; margen : 0,5 em ; acolchado : 0,2 em ; }/ * formatea los propios catlinks * / p . catlinks { 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 em ; }
Desafortunadamente, si el cuadro de categoría es grande (como en las entradas de presidentes de EE. UU. Y otras figuras importantes), puede empujar 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 controlado por Wikitexto
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 que especifiquen 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 título de los elementos "li" de la clase interwiki- lc , controlando así el estilo y título del enlace entre idiomas. del código de idioma lc en el margen, siempre que el skin especifique esta clase interwiki- lc (por ejemplo, Cologne Blue especifica class = 'external' para cada idioma, por lo que no funciona para ese skin).
Enlaces externos en JS
- http://www.quirksmode.org/ : consulte la sección JavaScript y DOM
- http://www.alistapart.com/
- http://www.quirksmode.org/dom/domform.html - clonación de formularios (podría ser posible cargar algunas imágenes a la vez usando esto, también un buen punto de partida para la clonación de estructuras)
Ver también
- Ayuda: hojas de estilo en cascada
- mw: Galería de estilos de usuario
- Wikipedia: secuencias de comandos 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: Explicando máscaras
- mw: Ayuda: Ajustes de configuración (especialmente mw: Manual: $ wgAllowUserJs y mw: Manual: $ wgAllowUserCss )
- Wikipedia: Tools / Navigation_popups (ventanas emergentes de navegación JavaScript)
- Wikipedia: Catálogo de clases CSS