Ajuda: estil d’usuari

De la Viquipèdia, l'enciclopèdia lliure.
Saltar a la navegació Saltar a la cerca

L'usuari registrat pot canviar els tipus de lletra, els colors, la posició dels enllaços als laterals i moltes altres funcions. Això és possible modificant els fulls d'estil en cascada (CSS) emmagatzemats a les subpàgines de la pàgina d'usuari.

Per exemple, per crear la seva pròpia versió modificada de el vector per defecte de la pell , és necessari crear una pàgina en especial: MiPágina / vector.css que conté el CSS que voleu utilitzar.

La personalització pot tenir alguns coneixements de CSS i no és trivial. Més senzillament, a les vostres preferències podeu triar entre alguns estils (skins) preenvasats. O podeu demanar ajuda al taulell d'informació .

General

On es defineix l’estil

Els valors predeterminats per a totes les aplicacions i per a tots els usuaris de la mateixa.wikipedia es troben a MediaWiki: Common.css . Per a cada skin hi ha una pàgina addicional que afegeix més especificacions:

A continuació, hi ha, opcionalment, les pàgines personals corresponents de l'usuari registrat, que poden modificar l'anterior (tingueu en compte, però, les inicials en minúscula):

També a meta: Special: MyPage / global.css es poden configurar tots els llocs de Wikimedia per a l'usuari d'una sola vegada. Els enllaços a tots els CSS personals també es poden trobar convenientment a les vostres preferències .

També hi ha MediaWiki: Mobile.css (que defineix la versió mòbil ) i MediaWiki: Print.css (que defineix la versió impresa ), però ara per ara no es poden personalitzar.

Les pàgines més específiques no substitueixen completament les més generals, sinó que les complementen. Només se sobreescriuen i substitueixen les definicions dels mateixos objectes, mentre que allò que no es redefineix explícitament continua sent l’estàndard. Per tant, la jerarquia CSS és:

  1. Per defecte de Wikimedia
  2. MediaWiki: Common.css
  3. MediaWiki: xxx.css de la pell que s’utilitza actualment
  4. global.css personal a meta
  5. personal de common.css
  6. xxx.css de la pell que s’utilitza actualment

Com es defineix l’estil

CSS s'especifica mitjançant referències a selectors : elements HTML , classes i identificadors especificats al codi HTML. Els principals selectors es descriuen en els capítols següents. En observar les pàgines predeterminades, podeu descobrir altres paràmetres que podem canviar a les pàgines personals (no totes, altres formen part dels valors predeterminats). Es poden explorar altres possibilitats per a cada aspecte mirant el codi font HTML d'una pàgina, en particular les classes i els identificadors; es pot redefinir l'aspecte de tots aquests aspectes.

Un exemple senzill: a MediaWiki: Common.css hi ha la següent definició, que, tal com es pot entendre pels comentaris, estableix la mida de les notes (més petit que el text normal):

 ol.referències {
   mida de la lletra: 90%;
}

Per personalitzar la mida, només cal que introduïu una definició equivalent al vostre common.css (per exemple, convertint-les en text pla):

 ol.referències {
   mida de la lletra: 100%;
}

La previsualització de les pàgines CSS funciona d’una manera particular: us permet veure què hi ha al voltant de la pàgina (sense contingut) en funció de la informació d’estil, suposant que la pell utilitzada és la que s’apliquen els canvis. El sistema té algunes limitacions, per exemple, podeu previsualitzar els enllaços de la barra lateral, però és possible que no estigui complet.

Després de desar-lo, quan encara esteu a la pàgina o en una altra, heu de forçar una actualització (shift-reload / ctrl-F5) per utilitzar els fitxers nous.

CSS

Millor CSS en subpàgines d'usuaris o en un fitxer local?

A més de l’anterior, és possible configurar un CSS local al navegador. Si utilitzeu navegadors diferents, és possible tenir un CSS diferent per a cadascun d’ells. Aquests canvis s'apliquen a tota la xarxa mundial, no només al projecte MediaWiki (tampoc depèn de si heu iniciat la sessió). La configuració només actua a les pàgines web que utilitzen la mateixa classe, per exemple, fer canvis al selector a.extiw afecta algunes pàgines en comparació amb els canvis al selector h2.

Per tenir línies CSS diferents entre els diversos projectes de MediaWiki, per exemple, per distingir-les amb un color de fons diferent, òbviament no es pot utilitzar un CSS local i, per tant, aquestes línies s’han d’inserir a les subpàgines de l’usuari.

En alguns casos, per exemple als cibercafés, no és possible canviar les preferències del navegador. En aquest cas, les subpàgines d'usuari us permeten canviar l'estil de totes maneres.

Si el navegador està configurat per ignorar la mida del tipus de lletra dictada a la pàgina web o al CSS extern, els canvis de mida del tipus de lletra s’han de col·locar al CSS local.

Selectors CSS

Els selectors CSS rellevants per a l’estil de pàgina, expressats en termes d’elements, classes i identificadors, inclouen el següent. Sempre que és possible, hi ha exemples que mostren el resultat de l’estil actual:

  • enllaç - enllaços - exemple: Ajuda: índex (vegeu vs: enllaç )
    enllaç: enllaç
    enllaç: visitat
    enllaç # contentTop
    link.external : exemple http: //
    link.extiw - enllaç interwiki al cos de la pàgina - *: link.image - enllaç de la imatge completa a la pàgina de descripció de la pàgina
    link.internal: enllaç al propi fitxer (Multimèdia :) i enllaços des de la icona de miniatura i lupa a la pàgina de descripció de la imatge (tingueu en compte que el color i la mida de la font especificats per a.internal només s'apliquen al primer cas) -
    enllaç.nou exemple
  • body.ns-0, ..., body.ns-15 (espai de noms)
  • div # bodyContent
  • div # column-content
  • div # editsection
  • div # globalWrapper
  • div # tocindent
  • div.tocline
  • h1.primaCapçalament
  • h2
  • h3
  • img.tex imatge TeX
  • petit: exemple
  • taula.toc

Els enllaços interns normals no estan inclosos a la classe interna (anteriorment era i encara existeix en llocs que utilitzen versions anteriors del programari, per exemple [1] ); l'estil es pot canviar mitjançant: link i: link: visitat, en general, mitjançant modificacions a: link.extiw etc. Podeu aplicar excepcions a l’estil d’enllaç general.

Per als enllaços entre idiomes:

  • # p-lang a

És possible tenir estils dependents de l'atribut, per exemple amb selectors:

  • link [title = "Usuari: nom d'usuari "]
    enllaç [title = " nom de pàgina "]
    enllaç [href = " URL complet "]

per codificar el color o emfatitzar usuaris particulars (inclosos ells mateixos) i / o enllaços a pàgines concretes (com ara la negreta de les pàgines seguides a la pàgina Canvis recents). Funciona amb Opera però no amb IE. Vegeu també Ajuda: Veure pàgines # CSS .

Els observacions especials i els darrers canvis fan servir dues classes:

  • autocomentari
    exemple
  • nou (veure més avall)

La pàgina d'historial té la classe d'autocomment i:

  • usuari
  • menor

Per tant, el tipus de lletra especificat per a l’ usuari s’aplica a l’historial, però no a les ofertes especials o als canvis recents.

Edita la pàgina

  • Quadre d'edició: textarea # wpTextbox1
exemple1
  • Edita l'objecte de la caixa: input # wpSummary
exemple2

Principals blocs d’estils

  • column-content : espai total entre els marges on es troba el text.
  • contingut : el fons blanc, el quadre de vores primes que conté la pàgina principal.
  • firstHeading : la classe principal a la part superior de cada pàgina
  • bodyContent : el contingut de la pàgina principal dins del tauler de contingut
  • contentSub : el nom de la wiki immediatament a sota del títol principal però a sobre del cos de la pàgina

La classe de portlet és utilitzada per tots els blocs div al voltant del contingut principal. Els blocs identificats per la classe són:

  • p-cactions : identificador de la llista de pestanyes que hi ha a sobre del contingut principal
  • p-personal : identificador de la llista d'enllaços que inclou la pàgina d'inici de sessió o tancament de sessió a la part superior de la pàgina.
  • p-logo : identificador del bloc que conté el logotip (a la part superior esquerra)
  • p-navigation : identificador del bloc que conté els enllaços de navegació a la part esquerra de la pàgina
  • p-search : el bloc que conté els botons de cerca
  • p-tb : el bloc que conté els enllaços de la caixa d'eines

La part inferior de la pàgina inclou els blocs següents:

  • peu de pàgina : tota la barra inferior
  • f-poweredbyico : la imatge alimentada que normalment es troba a la part dreta de la pàgina
  • f-list : identificador de la llista que conté tot el text a la part inferior de la pàgina

Com esborra la visualització

Un estil extrem és aquell que no mostra text, amb

 . classname {display: none}
# id {display: none}

etc.

Els enllaços que no es mostren no funcionen (a diferència dels enllaços amb tipus de lletra molt petits).

No es pot utilitzar per eliminar text dels noms de les plantilles, paràmetres, valors dels paràmetres, noms de pàgines dels enllaços, etc. No sempre és compatible amb lectors de pantalla i dispositius mòbils.

Estil que depèn d'un paràmetre o variable

Noms d'atributs HTML variables

El nom d'un atribut HTML pot convertir-se en variable. HTML Tidy elimina atributs nomenats no vàlids al costat del servidor, de manera que el resultat no depèn de la capacitat del navegador d’ignorar atributs no vàlids i s’envien menys dades. Per obtenir una variable amb un possible valor de "classe", vegeu w: en: Wikipedia: HiddenStructure i w: en: Template: Infobox .

Exemples

 / * converteix el fons darrere de l'àrea de contingut i les pestanyes en gris clar * /
#content, #content table
# p-cactions ul li a {background: # f5f5f5; }

/ * impedir que la imatge de fons es desplaci amb l'àrea de contingut * /
cos {fons-adjunt: fix; }

/ * substituïu el llibre de fons per una altra cosa * /
cos {fons: Lila; }

/ * canvia el fons de les àrees prèvies * /
pre {background: White}

/ * canviar el logotip * /
# p-logo a {background: url (http://en.wikipedia.org/upload/wiki.png) 35% 50% sense repetició! important; }

/ * no utilitzeu cap logotip, moveu les caixes a aquesta zona * /
# p-logo {display: none}
# column-one {padding-top: 0; }

/ * suprimeix la icona de persona amb el teu nom d'usuari * /
li # pt-userpage {background: none}

/ * utilitzeu les preferències del navegador per a la mida i el tipus de lletra del text * /
body, #globalWrapper {font: inherit! important; }

/ * subratlla sempre els enllaços * /
: enllaç {text-decoració: subratllat; }

/ * Mostra el contingut del cos en una columna més estreta per facilitar la lectura * /
/ * ajusteu els percentatges segons vulgueu * /
div # bodyContent {
  amplada: 50%;
  alçada de línia: 105%;
}

/ * canvia el fons de les pestanyes no seleccionades * /
# p-cactions ul li a {background: # C7FDC7; }

/ * canvia el fons de les pestanyes seleccionades * /
# p-cactions ul li.selected a {background: white; }

/ * canvia el fons de la vora de les pestanyes seleccionades * /
# p-cactions li.selected {border-color: #aaaaaa; }

/ * la part inferior de la pestanya no s'ha eliminat en passar el cursor al cursor * /
# p-caccions a: passeu per sobre {z-index: 0; decoració de text: cap; }
# p-cactions li.selected a: hover {z-index: 3; }

/ * estil del quadre de cerca i dels botons que hi ha a sota * /
input.searchButton {
    color de fons: #efefef! important;
    vora: 1px inici! important;  
}
#searchInput {border: 1px inset! important; }

/ * colors d'enllaç estàndard * /
: enllaç {color: # 0000FF; }
: enllaç: visitat {color: # 7F007F; }
: link: active ,: link.new {color: # FF0000; }
: link.interwiki ,: link.external {color: # 3366BB; }
: link.stub {color: # 772233; }

/ * col·loqueu la barra de desplaçament a les seccions prèvies en lloc de tall / superposició lleig a Firefox * /
pre {overflow: auto; }

/ * Stirar l'enllaç Carrega fitxer com a recordatori per penjar-lo a Commons * /
li # t-upload {text-decoration: line-through; }

->

Estil diferencial (diferències entre versions)

 / * no utilitzeu una font més petita * /
td.diff-addedline, td.diff-deletedline, td.diff-context {font-size: 100%; }

/ * subratlla només el text amb diferències * /
span.diffchange {text-decoration: underline; }

Javascript

JavaScript és un llenguatge que determina certs comportaments dinàmics de les pàgines web. El JavaScript de Wikipedia està definit i pot ser personalitzat per l'usuari registrat mitjançant pàgines que generalment corresponen a les de CSS, però que tenen l'extensió .js, per exemple MediaWiki: Customizable Common.js a Special: MyPage / common.js .


Pàgines relacionades

Enllaços externs

Detalls CSS