Ajutor: Stil utilizator

De la Wikipedia, enciclopedia liberă.
Salt la navigare Salt la căutare

Utilizatorul înregistrat poate schimba fonturile, culorile, poziția linkurilor pe laturi și multe alte caracteristici! Acest lucru este posibil prin modificarea foilor de stil în cascadă (CSS) stocate în subpagini ale paginii de utilizator.

De exemplu, pentru a crea propria versiune modificată a skin-ului vectorului implicit, trebuie să creați o pagină în Special: MyPage / vector.css care conține CSS pe care doriți să îl utilizați.

Personalizarea poate lua unele cunoștințe despre CSS și nu este banală. Mai simplu, în preferințele dvs. puteți alege dintre unele stiluri (piei) preambalate. Sau puteți solicita ajutor la biroul de informații .

General

Unde este definit stilul

Valorile implicite pentru toate skin-urile și pentru toți utilizatorii it.wikipedia sunt conținute în MediaWiki: Common.css . Pentru fiecare skin există o pagină suplimentară care adaugă specificații suplimentare:

Apoi există, opțional, paginile personale corespunzătoare ale utilizatorului înregistrat, care pot modifica cele de mai sus (rețineți însă inițialele minuscule):

De asemenea, în meta: Special: MyPage / global.css, toate site-urile Wikimedia pot fi configurate pentru utilizator dintr-o dată. Link-urile către toate CSS-urile personale pot fi, de asemenea, găsite convenabil în preferințele dumneavoastră.

Există, de asemenea, MediaWiki: Mobile.css (care definește versiunea mobilă ) și MediaWiki: Print.css (care definește versiunea tipărită ), dar acestea nu sunt personalizabile deocamdată.

Paginile mai specifice nu le înlocuiesc complet pe cele mai generale, ci le completează. Doar definițiile acelorași obiecte sunt suprascrise și înlocuite, în timp ce ceea ce nu este redefinit în mod explicit rămâne cel standard. Prin urmare, ierarhia CSS este:

  1. Implicit Wikimedia
  2. MediaWiki: Common.css
  3. MediaWiki: xxx.css a pielii utilizate în prezent
  4. global.css personal pe meta
  5. personalul comun.css
  6. xxx.css a pielii utilizate în prezent

Cum este definit stilul

CSS este specificat prin referințe la selectoare : elemente HTML , clase și id-uri specificate în codul HTML. Selectorii principali sunt descriși în următoarele capitole. Observând paginile implicite puteți descoperi alte setări pe care le putem modifica în paginile personale (nu toate, altele fac parte din valorile implicite). Posibilități suplimentare pentru fiecare skin pot fi explorate uitându-se la codul sursă HTML al unei pagini, în special la clase și ID-uri; aspectul tuturor acestora poate fi redefinit.

Un exemplu simplu: în MediaWiki: Common.css există următoarea definiție, care, după cum puteți înțelege din comentariile de acolo, stabilește dimensiunea notelor (mai mică decât textul normal):

 ol.references {
   dimensiunea fontului: 90%;
}

Pentru a personaliza dimensiunea, trebuie doar să introduceți o definiție echivalentă în common.css (de exemplu, făcându-le ca text simplu):

 ol.references {
   dimensiunea fontului: 100%;
}

Previzualizarea paginilor CSS funcționează într-un mod special: vă permite să vedeți ce se află în jurul paginii (fără conținut) pe baza informațiilor despre stil, presupunând că aspectul folosit este cel la care se aplică modificările. Sistemul are unele limitări, de exemplu, puteți previzualiza linkurile din bara laterală, dar este posibil să nu fie complet.

După salvare, când sunteți încă pe pagină sau alta, trebuie să forțați o actualizare (shift-reload / ctrl-F5) pentru a utiliza noile fișiere.

CSS

CSS mai bun în subpagini de utilizator sau într-un fișier local?

În plus față de cele de mai sus, este posibil să configurați un CSS local pe browser. Dacă utilizați browsere diferite, este posibil să aveți un CSS diferit pentru fiecare dintre ele. Aceste modificări se aplică întregului web web, nu doar proiectului MediaWiki (de asemenea, nu depinde dacă sunteți autentificat). Setările acționează numai pe paginile web care utilizează aceeași clasă, de exemplu, modificarea selectorului a.extiw afectează câteva pagini comparativ cu modificările selectorului h2.

Pentru a avea linii CSS diferite între diferitele proiecte MediaWiki, de exemplu pentru a le distinge cu o culoare de fundal diferită, evident că nu poate fi utilizat un CSS local și, prin urmare, aceste linii ar trebui inserate în subpagini ale utilizatorului.

În unele cazuri, de exemplu în cafenelele de internet, nu este posibil să modificați preferințele browserului. În acest caz, subpagini de utilizator vă permit să schimbați stilul oricum.

Dacă browserul este configurat pentru a ignora dimensiunea fontului dictată în pagina web sau CSS extern, modificările dimensiunii fontului trebuie plasate în CSS local.

Selectoare CSS

Selectoarele CSS relevante pentru stilul paginii, exprimate în termeni de elemente, clase și identificatori, includ următoarele. Ori de câte ori este posibil, există exemple care arată rezultatul stilului curent:

  • link - linkuri - exemplu: Ajutor: index (vezi vs: link )
    link: link
    link: vizitat
    link # contentTop
    link.external - http: // exemplu
    link.extiw - link interwiki în corpul paginii - *: link.image - link de la imaginea completă la pagina de descriere a paginii
    link.internal - link către fișierul în sine (Media :) și linkuri de la pictograma miniatură și lupă către pagina de descriere a imaginii (rețineți că culoarea și dimensiunea fontului specificate pentru a.internal se aplică numai în primul caz) -
    link.new exemplu
  • body.ns-0, ..., body.ns-15 (spațiu de nume)
  • div # bodyContent
  • div # coloană-conținut
  • div # editsection
  • div # globalWrapper
  • div # tocindent
  • div.toclină
  • h1.primaCap
  • h2
  • h3
  • img.tex Imagine TeX
  • mic - exemplu
  • masa.toc

Legăturile interne normale nu sunt conținute în clasa internă (anterior aceasta era și este încă pe site-urile care utilizează versiuni mai vechi ale software-ului, de exemplu [1] ); stilul poate fi schimbat prin: link și: link: vizitat, în general, prin modificări la: link.extiw etc. Puteți aplica excepții stilului general de legătură.

Pentru legături inter-limbă:

  • # p-lang a

Este posibil să aveți stiluri dependente de atribut, de exemplu cu selectoare:

  • link [title = "Utilizator: nume de utilizator "]
    link [title = "nume de pagină "]
    link [href = " adresa URL completă "]

pentru a codifica culoarea sau a sublinia anumiți utilizatori (inclusiv ei înșiși) și / sau linkuri către anumite pagini (cum ar fi îngroșarea paginilor urmate în pagina Modificări recente). Funcționează cu Opera, dar nu cu IE. Vezi și Ajutor: Vizualizarea paginilor # CSS .

Speciale observate și cele mai recente modificări utilizează două clase:

  • autocomentare
    exemplu
  • nou (vezi mai jos)

Pagina istoric are clasa de autocomentare și:

  • utilizator
  • minor

Deci, fontul specificat pentru utilizator se aplică istoricului, dar nu și specialelor vizionate sau modificărilor recente.

Pagina de editare

  • Caseta de editare: textarea # wpTextbox1
exemplu1
  • Obiectul casetei de editare: input # wpSummary
exemplu2

Blocuri principale de stiluri

  • coloană-conținut - spațiu total între marginile în care se află textul.
  • conținut - fundalul alb, caseta cu margini subțiri care conține pagina principală.
  • firstHeading - clasa principală din partea de sus a fiecărei pagini
  • bodyContent - conținutul paginii principale din panoul de conținut
  • contentSub - numele wiki imediat sub titlul principal, dar deasupra corpului paginii

Clasa de portlet este utilizată de toate blocurile div din jurul conținutului principal. Blocurile identificate de clasă sunt:

  • p-cactions - codul listei de file de deasupra conținutului principal
  • p-personal - id pentru lista de linkuri care include pagina de autentificare sau deconectare din partea de sus a paginii.
  • p-logo - id pentru blocul care conține logo-ul (stânga sus)
  • p-navigare - id pentru blocul care conține legăturile de navigare din partea stângă a paginii
  • căutare p - blocul care conține butoanele de căutare
  • p-tb - blocul care conține linkurile din caseta de instrumente

Partea de jos a paginii include următoarele blocuri:

  • subsol - întreaga bară de jos
  • f-poweredbyico - imaginea alimentată care se află în mod normal în partea dreaptă a paginii
  • f-list - id-ul listei care conține tot textul din partea de jos a paginii

Cum să ștergeți vizualizarea

Un stil extrem este cel care nu afișează text, cu

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

etc.

Linkurile care nu sunt afișate nu funcționează (spre deosebire de linkurile cu fonturi foarte mici).

Nu poate fi folosit pentru a elimina textul din numele șabloanelor, parametrii, valorile parametrilor, numele paginilor din linkuri etc. Nu este întotdeauna acceptat de cititoarele de ecran și de dispozitivele mobile.

Stil care depinde de un parametru sau de o variabilă

Numele atributelor HTML variabile

Numele unui atribut HTML poate deveni variabil. HTML Tidy elimină atributele denumite invalide din partea serverului, astfel încât rezultatul nu depinde de capacitatea browserului de a ignora atributele nevalide și se trimit mai puține date. Pentru o variabilă cu o posibilă valoare de „clasă”, consultați w: en: Wikipedia: HiddenStructure și w: en: Template: Infobox .

Exemple

 / * faceți fundalul din spatele zonei de conținut și a filelor un gri deschis * /
#content, #content table
# p-cactions ul li a {background: # f5f5f5; }

/ * opriți derularea imaginii de fundal cu zona de conținut * /
corp {fundal-atașament: fix; }

/ * înlocuiți cartea în fundal cu altceva * /
corp {fundal: Violet; }

/ * schimbă fundalul zonelor pre * /
pre {background: White}

/ * schimba sigla * /
# p-logo a {background: url (http://en.wikipedia.org/upload/wiki.png) 35% 50% fără repetare! important; }

/ * nu folosiți nicio siglă, mutați casetele în zona respectivă * /
# p-logo {display: none}
# column-one {padding-top: 0; }

/ * suprimați pictograma persoană cu numele dvs. de utilizator * /
li # pt-userpage {background: none}

/ * utilizați preferințele browserului pentru dimensiunea și fontul textului / /
body, #globalWrapper {font: inherit! important; }

/ * subliniați întotdeauna linkurile * /
: link {text-decor: subliniere; }

/ * Afișați conținutul corpului într-o coloană mai îngustă pentru o citire mai ușoară * /
/ * reglați procentele după cum doriți * /
div # bodyContent {
  lățime: 50%;
  înălțimea liniei: 105%;
}

/ * schimbați fundalul filelor neselectate * /
# p-cactions ul li a {background: # C7FDC7; }

/ * schimbați fundalul filelor selectate * /
# p-cactions ul li.selected a {background: white; }

/ * schimbați fundalul chenarului filelor selectate * /
# p-cactions li.selected {border-color: #aaaaaa; }

/ * partea de jos a filei nu a fost eliminată la trecerea cu mouse-ul * /
# p-cations them a: hover {z-index: 0; decor-text: nici unul; }
# p-cactions li.selected a: hover {z-index: 3; }

/ * stilizați caseta de căutare și butoanele de sub aceasta * /
input.searchButton {
    culoare de fundal: #efefef! important;
    frontieră: 1px de început! important;  
}
#searchInput {border: 1px inset! important; }

/ * culori standard pentru link * /
: link {color: # 0000FF; }
: link: vizitat {color: # 7F007F; }
: link: activ ,: link.new {color: # FF0000; }
: link.interwiki ,: link.external {color: # 3366BB; }
: link.stub {color: # 772233; }

/ * puneți bara de defilare în secțiunile pre în loc de tăiere urâtă / suprapunere în Firefox * /
pre {overflow: auto; }

/ * linkout Încărcați fișierul ca memento de încărcare în Commons * /
li # t-upload {text-decoration: line-through; }

->

Stil Diff (diferențe între versiuni)

 / * nu utilizați un font mai mic * /
td.diff-addedline, td.diff-deletedline, td.diff-context {font-size: 100%; }

/ * subliniați doar textul cu diferențe * /
span.diffchange {text-decoration: underline; }

Javascript

JavaScript este un limbaj care determină anumite comportamente dinamice ale paginilor Web. JavaScript-ul Wikipedia este definit și poate fi personalizat de către utilizatorul înregistrat, prin pagini care corespund în general celor din CSS, dar care au extensia .js, de exemplu MediaWiki: Customizable Common.js în Special: MyPage / common.js .


Pagini conexe

linkuri externe

Detalii CSS