Pomocník:Používateľský štýl

  • H: USA
  • WP:USERSTYLE

Používateľ si môže prispôsobiť písma, farby, pozície odkazov na okrajoch a mnoho ďalších vecí! Robí sa to prostredníctvom vlastných kaskádových štýlov uložených na podstránkach používateľskej stránky „Používateľ“.

Ak chcete napríklad vytvoriť svoje vlastné úpravy CSS pre vzhľad , ktorý práve používate, vytvorte stránku na adrese Special:MyPage/skin.css obsahujúcu CSS, ktorý chcete použiť (ak chcete použiť svoje zmeny bez ohľadu na to, ktorý vzhľad používate, vložte ich do špeciálneho: MyPage/common.css ). Informácie o tom, ako skryť konkrétne správy, nájdete v časti WP:CSSHIDE .

generál

Kaskádové štýly

Pre každý užívateľsky definovateľný štýl sa najprv vyberie vzhľad spolu s príslušným kaskádovým štýlom (CSS). Pre každý vzhľad môže používateľ urobiť rôzne voľby týkajúce sa fontov, farieb, pozícií odkazov na okraji atď. CSS je špecifikované s odkazom na selektory [1]: HTML elementy , triedy a ID špecifikované v HTML kóde. V súlade s tým, aké sú možnosti pre každý vzhľad, môžete vidieť pri pohľade na zdrojový kód HTML stránky, najmä pri pohľade na tieto triedy a ID: čím viac ich je, tým väčšia je univerzálnosť.

V samotnom softvéri MediaWiki je CSS a Wikipedia ho prepíše pomocou nasledujúcich stránok:

CSS pre celú stránku je v MediaWiki:Common.css

Môžete ich prepísať pomocou používateľských štýlov. Ak chcete vykonať zmeny, ktoré platia bez ohľadu na váš aktuálny vzhľad, zmeňte svoj common.css . Ak chcete vykonať zmeny, ktoré ovplyvnia váš aktuálny vzhľad, zmeňte svoj skin.css . Ak chcete vykonať zmeny, ktoré ovplyvnia všetky projekty Wikimedia, môžete sa prihlásiť do Meta a zmeniť svoj global.css.

Zadajte na túto stránku nejaký CSS. Náhľad CSS funguje špeciálnym spôsobom: umožňuje prezeranie okrajov stránky (nie obsahu) na základe informácií o štýle na stránke za predpokladu, že použitý skin je skin, pre ktorý stránka platí. Toto má obmedzenia. Napríklad je možné zobraziť ukážku toho, ako budú odkazy na okraji vyzerať, ale nemusia to byť všetky typy, ktoré by ste chceli skontrolovať. Po uložení, keď ste stále na stránke alebo na akejkoľvek inej stránke, vykonajte vynútené opätovné načítanie (shift-reload/ctrl-f5), aby ste získali nové súbory.


Aby sa používateľský CSS automaticky načítal, uistite sa, že $wgAllowUserCsspremenná je v konfigurácii nastavená na hodnotu true. V opačnom prípade je možné ho načítať pomocou JavaScriptu.

Ak chcete importovať CSS z používateľskej podstránky pomocou JavaScriptu, použite mw.loader.loadpríkaz vo vašom common.js :

 mw . nakladač . načítať ( '/w/index.php?title=User:Example/stylesheet.css&action=raw&ctype=text/css' , 'text/css' );   

JavaScript a používateľské skripty

Na Wikipédii možno JavaScript použiť na pridanie nových funkcií, ako je pridanie textových polí hľadania/nahradenia alebo poskytnutie pokročilých možností vrátenia. Existujú skripty na prispôsobenie všetkého, od predvoleného štýlu písma až po vlastné tlačidlá.

Mnoho stránok skriptov je možné importovať a použiť . Rôzne skripty môžu byť tiež použité vo vzájomnom spojení na splnenie niekoľkých úloh naraz. Niektoré skripty sú dostupné ako moduly gadget, čo znamená, že ich možno nainštalovať jednoduchým začiarknutím políčka na karte Moduly gadget v časti Špeciálne: Predvoľby .

Ak chcete na svoju stránku JavaScript pridať už existujúce skripty, pridajte ich {{subst:js|name of script}}do súboru. Podrobnejšie pokyny nájdete na Wikipedia:User scripts/Guide .

Vykresľovanie

Zdrojový kód HTML stránky obsahuje riadky ako

 < script  src = "/w/wiki.phtml?title=Používateľ:vaše-používateľské meno-tu/standard.js&action=raw&ctype=text/javascript" > 
</ script > 
 @import "/style/wikistandard.css";
 @import "/w/wiki.phtml?title=Používateľ:vaše-používateľské-meno-tu/standard.css &action=raw&ctype=text/css";

pre celý projekt CSS pre konkrétny vzhľad (v tomto prípade tu na Wikipédii s odkazom na //en.wikipedia.org/style/wikistandard.css ) a osobný JS a CSS pre konkrétny vzhľad.

Server teda poskytuje HTML odkazujúci na súbory CSS a JS, ale nevykonáva žiadnu interpretáciu ich obsahu. Interpretáciu vykonáva prehliadač v závislosti od jeho možností a nastavení.

CSS

CSS na používateľských podstránkach verzus CSS v lokálnom súbore

Okrem vyššie uvedeného alebo alternatívne je možné v prehliadači nastaviť lokálny CSS. Ak jeden používa viacero prehliadačov, každý môže byť nastavený na iný CSS. Každý sa vzťahuje na celý World Wide Web, nielen na projekt MediaWiki (a nezávisí od prihlásenia). Nastavenie však ovplyvní iné webové stránky iba vtedy, ak používajú rovnaký selektor CSS; napr. nastavenie pre selektor a.extiw ovplyvňuje menej stránok na webe ako jedna pre h2 (ale ovplyvňuje aspoň všetky MediaWiki projekty, nielen jeden).

Pre riadky CSS, ktoré by sa mali v rôznych projektoch MediaWiki líšiť, napr. pre inú farbu pozadia pre ľahké rozlíšenie, sa jednoznačne nedá použiť lokálny CSS; aspoň tieto riadky treba dať do užívateľských podstránok.

Niektoré počítače, napr. v internetových kaviarňach, mobilných zariadeniach/tabletoch, neumožňujú používateľom nastaviť preferencie pre prehliadač. V takom prípade užívateľské podstránky umožňujú aj tak nastavenie užívateľského štýlu.

Keď je prehliadač nastavený na možnosť ignorovať veľkosť písma špecifikovanú na webovej stránke alebo externom CSS, riadky CSS týkajúce sa veľkosti písma sa musia vložiť do lokálneho CSS.

Selektor CSS

Selektory CSS, vyjadrené ako prvky, triedy a id, relevantné pre štýl tela stránky, zahŕňajú nasledujúce. Pokiaľ je to možné, sú uvedené príklady, ktoré ukazujú výsledok pre aktuálne nastavenia štýlu:

  • :link — odkazy — príklad: Help:Index  ; predvolené: help:index (Pozrite si a vs:odkaz)
  • :link:link
  • :link:visited
  • :link#contentTop
  • :link.external — http://príklad ; predvolená hodnota: http://example
  • :link.extiw – interwiki odkaz v tele stránky – ; predvolené: en:example
  • :link.image – odkaz z celého obrázka na stránku s popisom obrázka
  • :link.internal – odkaz na samotný súbor (Médiá:) a odkazy z miniatúry a ikony lupy na stránku s popisom obrázka (všimnite si, že farba a veľkosť písma špecifikované pre a.internal sú použiteľné iba v prvom prípade)
  • :link.newpríklad ; predvolené: príklad
  • .allpagesredirectabc – presmeruje v Special:Allpages a Special:Prefixindex
  • body.ns-0, ..., (priestor mien)body.ns-15
  • div#bodyContent
  • div#column-content
  • div#editsection
  • div#globalWrapper
  • div#tocindent
  • div.tocline
  • h1.firstHeading
  • h2
  • h3
  • img.texTeXový obrázok
  • smallpríklad
  • table.toc

Normálne interné odkazy nie sú v triede internal(boli a stále sú na stránkach, ktoré používajú staršiu verziu softvéru, napr. [2]); môžu byť štylizované s odkazom na a vo všeobecnosti, po ktorých štylizácia atď. môže poskytnúť výnimky z tohto všeobecného štýlu pre odkazy. :link:link:visited:link.extiw

Pre medzijazykové odkazy:

  • {{code|lang=css|code=#p-lang a}}

Štýl môže závisieť aj od hodnoty atribútu, napríklad pomocou selektorov:

  • :link[title ="User:username"]
  • :link[title ="pagename"]
  • :link[href ="full url "]

farebne odlíšiť alebo zvýrazniť konkrétnych používateľov (vrátane seba) a/alebo odkazy na konkrétne stránky (napríklad zvýraznenie tučným písmom sledovaných stránok na Nedávnych zmenách). Toto funguje v Opere, ale nie v IE. Pozri tiež Pomocník:Stránky sledovania#CSS .

Zoznam sledovaných a Posledné zmeny používajú dve triedy:

  • autocomment
    príklad
  • new(Pozri nižšie)

História stránky má triedy autocommenta:

  • user
  • minor

Písmo špecifikované pre používateľa sa teda použije v histórii stránky, ale nie v zozname sledovaných položiek alebo v posledných zmenách.

Upraviť stránku

  • Pole úprav:textarea#wpTextbox1
príklad1
  • Upraviť súhrnné pole:input#wpSummary
príklad2

Hlavné štýlové bloky

Pozrite si meta:Customization:Explaining_skins

Bez displeja

Jedným extrémnym "štýlom" pre text je jeho nezobrazovanie, s

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

atď.

Nezobrazené odkazy nefungujú (na rozdiel od odkazov s veľmi malým písmom).

Nemožno ho použiť na odstránenie textu vo výrazoch pre názvy šablón, názvy parametrov, hodnoty parametrov, názvy stránok v odkazoch atď.

Štýl v závislosti od parametra alebo premennej

Premenná trieda alebo id

Trieda alebo id môže závisieť od výsledku vytvoreného šablónou alebo od parametra šablóny, napr class="abcdef". Pre jeden alebo viacero možných názvov tried je možné definovať štýl tejto triedy. Ak trieda nie je definovaná, je ignorovaná, takže sa použije štandardný štýl.

V najjednoduchšom prípade máme napr. class="abc{{{1}}}"a definovať triedu abcdef. Ak je hodnota parametra "def", platí.

Ak má stránka na všeobecné použitie zmysel len vtedy, keď sú štýly definované pre určité triedy, potom ich treba špecifikovať na stránke MediaWiki:Common.css , ktorá platí pre všetkých používateľov a všetky vzhľady, pokiaľ nie sú prepísané.

Názov atribútu premennej HTML

Názov atribútu HTML môže byť premenlivý. HTML Tidy – zastaraná knižnica HTML4, ktorá je určená na odstránenie – historicky odstraňovala atribúty s neplatnými názvami na strane servera, takže výsledok nezávisí od schopnosti prehliadača ignorovať neplatné názvy atribútov a množstvo odosielaných údajov je znížené. Pre premennú s možnou hodnotou "class" pozri Wikipedia:HiddenStructure a en:Template:Infobox  ( editácia spätných odkazov ) .

Hodnota parametra variabilného štýlu

Wikitext rád

< span  style = "zobraziť:{{{3|none}}}" > Stred </ span >

zobrazuje "Str", ak je parameter 3 definovaný, ale nie "none", a nezobrazuje nič, ak je parameter 3 nedefinovaný alebo "none". Ak je hodnota parametra 3 iný štýl zobrazenia ako "žiadny", použije sa tento štýl.

Vzorky

Vlastné štýly je možné umiestniť do osobných súborov CSS každého používateľa, ako napríklad Special:MyPage/common.css , ktoré si každý používateľ môže upraviť a nastaviť si osobné štýly.

/* urobí pozadie za oblasťou obsahu a kartami svetlosivými */ 
# content , # content table # p-cactions ul li a { background : #f5f5f5 ; }  
       

/* zastaví rolovanie obrázka na pozadí s oblasťou obsahu */ 
body { background-attachment : fixed ; }    

/* nahraďte knihu na pozadí niečím iným */ 
body { background : Purple ; }    

/* zmení pozadie pre oblasti */ 
pre { background : White }    

/* zmeniť logo */ 
# p-logo a { background : url ( https://upload.wikimedia.org/wikipedia/commons/9/93/Color-chars-logo.png ) 35 % 50 % bez opakovania ; }        

/* nepoužívajte žiadne logo, namiesto toho presuňte polia na túto oblasť */ 
# p-logo { display : none } # column-one { padding-top : 0 ; }    
    

/* potlačenie ikony osoby vaším užívateľským menom */ 
li # pt-userpage { background : none }    

/* použite predvoľby prehliadača pre veľkosť textu a písmo */ 
html , telo , # globalWrapper { font : inherit !important ; }       

/* vždy podčiarknuť odkazy */ 
: link { text-decoration : underline ; }    

/*Zobraziť obsah tela v užšom stĺpci pre ľahšie čítanie*/ 
/*upraviť percentá podľa potreby*/ 
div # bodyContent { width : 50 % ; výška riadku : 105 % ; } 
   
   


/* zmeniť pozadie nevybraných kariet */ 
# p-cactions ul li a { pozadie : #C7FDC7 ; }       

/* zmena pozadia vybraných záložiek */ 
# p-cactions ul li . vybrané a { pozadie : biele ; }       

/* zmeniť pozadie okrajov vybratých kariet */ 
# p-cactions li . vybraté { border-color : #aaaaaa ; }     

/* pri umiestnení kurzora myši nie je odstránená spodná časť záložky */ 
# p-cactions li a : hover { z-index : 0 ; text-decoration : žiadne ; } # p-kactions li . vybrané a : hover { z-index : 3 ; }        
      

/* štýl vyhľadávacieho poľa a tlačidiel pod ním */ 
. searchButton { farba pozadia : #efefef ; okraj : 1 px začiatok ; } # searchInput { border : 1 px inset ; } 
     
      

     

/* štandardné farby odkazu */ 
a : odkaz { farba : #0645ad ; } a : navštívené { farba : #0b0080 ; } a . new : link { color : #cc2200 ; } a . nové : navštívené { farba : #a55858 ; } a . extiw : link { farba : #3366bb ; } /* odkazy na iné Wikipédie */ a . extiw : navštívené { farba : #3366bb ; } a . externa : link { farba : #3366bb ; } /* externé odkazy */ a . externé : navštívené { farba : #3366bb ; }    
    
    
    
     
    
     
    

/* umiestni rolovaciu lištu na predchádzajúce sekcie namiesto škaredého odrezania/prekrytia vo Firefoxe */ 
pre { overflow : auto ; }    

/* prečiarknutie Odovzdať Odkaz na súbor ako pripomenutie, aby ste namiesto toho nahrali na Commons */ 
li # t-upload { text-decoration : line-through ; }    

/* na stred/na stred nadpisu každej strany */ 
. firstHeading { text-align : center ; }    

/* Upozornenie na dvojité presmerovanie */ 
div . redirectMsg a . mw-redirect : after { content : ' <dvojité presmerovanie>' ; farba : červená ; štýl písma : kurzíva ; }  
   
   
   


/* Zabrániť novému CSS v "Typography Refresh" (od začiatku roku 2014) v zobrazovaní názvov a nadpisov stránok pätkovým písmom */ 
h1 , h2 { font-family : inherit !important ; }      

/* Zobrazenie polí s osobnými údajmi v článkoch */ 
tabuľka . persondata { display : table ; }   

/* Zbavte sa únavných upozornení */ 
# editpage-copywarn , # editpage-copywarn2 , # editpage-copywarn3 , # editpage-head-copywarn , . editpage-head-copywarn , # editnotice_BLP_editintro , . ve-ui-mwSaveDialog-license { display : none !important ; }  
 
 
    

/* Zbavte sa únavných noobov */ 
# category-namespace-editnotice , # footer-info-copyright , # sitesub , . edithelp , . posteditwindowhelplinks , # päty-ikony , . ve-ui-mwSaveDialog-summaryLabel { display : none !important ; }   
  
    

/* Ušetrite miesto v zozname šablón zobrazenom na konci stránky pri úpravách */ 
: templatesUsed ul , : templatesUsed li { display : inline ; padding-right : 5 px ;}       

/* Zmeňte všetok text na písmo "Avenir" (okrem hlavičiek) (písmo môžete zmeniť na čokoľvek iné) */ 
. mw-body h1 , . mw-body h2 { font-family : "Avenir" }    
     

  • úryvky s príkladmi CSS MW

Zaoblené rohy

Pravidlá zaobleného rohu vo Firefoxe
/* urobte pár rohov zaoblenia */ 
# p-cactions ul li , # p-cactions ul li a { border-top-left-radius : 1 em ; border-top-right-radius : 1 em ; } # content { border-top-left-radius : 1 em ; border-bottom-left-radius : 1 em ; } . pBody { border-top-right-radius : 1 em ; border-bottom-right-radius : 1 em ; }       
   
   

 
   
   

 
   
   

Zaoblené rohy/záložky
  • Moz: pozri pravidlá vyššie
  • http://www.vertexwerks.com/tests/sidebox/ – formátovanie sideboxu
  • http://www.alistapart.com/articles/slidingdoors2/ – zaoblené záložky s efektom prevrátenia
  • http://www.alistapart.com/articles/customcorners/ – ďalší variant pre zaoblené rohy krabice
  • http://alistapart.com/articles/customcorners2/, ukážka tohto
  • http://www.alistapart.com/articles/mountaintop/ – ešte divnejšie rohové varianty
  • http://www.virtuelvis.com/gallery/css/rounded/ – jednoduchý freestyle variant využívajúci pseudoprvky :before a :after (iba prehliadače css2, nie v IE)

Vylepšenia zobrazenia tlače

/* 
** Všetky pravidlá špecifické pre tlač umiestnite do tlačového bloku @media. 
*/

/* šetrenie atramentu a papiera veľmi malým písmom */ 
@ tlač médií { # footer , # content , body { font-size : 8 pt !important ; } h1 { font-size : 17 pt } h2 { font-size : 14 pt } h3 { font-size : 11 pt } h4 { font-size : 9 pt } h5 { font-size : 8 pt } h6 { font- veľkosť : 8 bodov ; font-weight : normal ; } }  
    
    
         
        
        
        
        
        
     
         
         
    


/* Pokročilé veci: pomocou :before a :after je možné pridať formátovanie 
toto sem pridá celý href odkazu zaň (nie je potrebný v aktuálnej verzii): */ 
@ media print { # content a : link : after , # content a : navštívené : po { content : " ( " attr ( href ) " ) " ; } }  
   
    
        
  

Urobte z používateľského panelu nástrojov bočný panel

Testované na prácu v Camino, Safari a Internet Explorer 7.

/* Transformácia používateľskej lišty na bočný panel */ 
# p-personal { position : relativní ; z-index : 3 ; šírka : 11,6 em ; } 
    
    
     


# p-osobné . pTelo { šírka : 10,7 em ; hranica : žiadna ; okraj : 0 0 0,1 em 0 em ; plavák : žiadny ; prepad : skrytý ; veľkosť písma : 95 % ; pozadie : Biela ; border-collapse : kolaps ; okraj : 1 px solid #aaaaaa ; výplň : 0 0,8 em 0,3 em , 5 em ; }  
     
     
        
     
     
     
     
     
       
        


# p-personal ul { line-height : 1,5 em ; list-style-type : square ; list-style-image : url ( "/style/monobook/bullet.gif" );  
     
     
     

    veľkosť písma : 95 % ; 
okraj : 0 0 0 1,5 em ; výplň : 0 ; text-align : left ; text-transform : none ; }        
    
    
     


# p-personal li { display : list-item ; výplň : 0 ; okraj : 0 0 0 0 ; okraj-dole : 0,1 em ; }  
     
    
        
     


/* potlačte ikonu osoby vaším používateľským menom */ 
/* potrebné, ak ešte nie je na mieste */ 
li # pt-userpage { background : none }    

Úplné štandardne používané štýly nájdete v monobooku main.css.

Počas posúvania upravte polohu hornej lišty

Tento štýl umožňuje používateľom Vector Legacy ponechať pri posúvaní viditeľný horný panel (s panelom vyhľadávania a diskusnou stránkou, odkazmi na úpravu, používateľskú stránku atď.), podobne ako vo Vector 2022:

@ obrazovka média { # mw-head { poloha : pevná ; pozadie : lineárny gradient ( nadol , #fff 50 % , #f6f6f6 100 % ) ; } }  
     
         
            
    

Pri posúvaní upravte polohu bočného panela

Vo vzhľade Vector Legacy možno polohu bočného panela jednoducho opraviť:

/* Opraviť bočný panel */ 
div # mw-panel { position : fixed ; pretečenie : auto ; hore : 0 px ; dole : 0 px ; výška : 100 % ; /* Zabránenie prekrytiu obsahu pri posúvaní do strán */ background-color : #F6F6F6 ; border-right : 1 px solid #A7D7F9 ; } /* Zabránenie posúvaniu do strán v prvkoch pre */ pre { overflow : auto ; maximálna výška : 25 em ; }   
   
   
   
   
  
   
     


 
   
   

Vďaka tomuto skriptu a CSS zostane bočný panel na obrazovke pri posúvaní na rovnakej pozícii

To môže mať v prehliadači Chrome nežiaduce vedľajšie účinky; napr. pri prezeraní stránky, ako je stránka very common.css, ktorú ste práve upravili, aby ste do nej vložili tento kód, sa viditeľný obsah skráti a bude vyžadovať vertikálne posúvanie v rámci.

Vzhľad Cologne Blue má možnosť rýchleho panela „plávajúceho vľavo“, čo spôsobí, že navigačné prepojenia a panely nástrojov zostanú počas posúvania na obrazovke v rovnakej polohe. To poskytuje rovnakú funkčnosť pre vzhľad Monobooku (v Mozille). Pozri meta:Pomocník:Používateľský štýl/plávajúci rýchly panel.

Monobook menu s pätkovým písmom v oblasti obsahu

Rýchla a špinavá kombinácia ponúk Monobook s pätkovým písmom v oblasti textu sa nachádza na User:Tillwe/monobook.css (v prvej časti). Tiež zobrazuje veci vo formáte tabuľky viac-menej správne. Sú tu nejaké zvláštnosti a chyby (niektoré preto, že schéma CSS Wikipédie sa nezdá byť príliš premyslená). Pracuje na Netscape7/Win98 pre autora.

Presúvanie odkazov na kategórie

/******************************************************* ******************/ 
/* presúvanie odkazov na mačky doprava */ 
/************************ *************************************************/

/* presunie rámček catlinks */ 
# catlinks { position : absolute ; z-index : 1 ; okraj : 1 px solid #aaaaaa ; pozadie : #fafaff ; vpravo : 1 em ; horná časť : -0,25 em ; šírka : 10,5 em ; plavák : pravý ; okraj : 0,2 em ; výplň : 0,2 em ; } 
  
  
     
   
  
  
  
  
   
  


/* formátovanie samotných catlinks */ 
p . catlinks { farba : #aaaaaa ; font-family : Verdana , bezpätkové ; veľkosť písma : 67 % ; výška riadku : 1,5 em ; text-align : left ; zarážka textu : 0 ; text-transform : none ; biele miesto : normálne ; okraj : 0,2 em ; } 
   
   
  
   
  
  
   
  
   


# p-personal h5 { display : inline ; }  
     


/* formátovať odkazy v catlinks (na rozdiel od ":" a "|") */ 
p . catlinks a { color : #888888 ; }  
  

Štýl s rozdielnym pohľadom

/* nepoužívajte menšie písmo */ 
td . diff-addedline , td . diff-deletedline , td . diff-context { font-size : 100 % } ;      

/* podčiarkne iba text, ktorý je iný */ 
span . diffchange { text-decoration : underline ; }   

Odstránenie tlačidiel „(ďakujem)“ v denníku histórie

/*Potlačiť tlačidlá "(ďakujem)"*/ 
. mw-thanks-thank-link { display : none ; }   

Skrytie dlhých inštrukcií

/* skryť správu o zobrazení zdroja pri úprave chránenej stránky */ 
# mw-protectedpagetext { display : none ; }    

Rovnako ako v prípade iných vyššie uvedených štýlov CSS, upravte Special:MyPage/skin.css alebo Special:MyPage/common.css , aby ste vložili prispôsobený CSS, a potom obnovte vyrovnávaciu pamäť prehliadača.

Pridajte do diskusných vlákien formátovanie štýlu

Existuje experimentálna šablóna štýlov na pridanie zvislých čiar naľavo od diskusných vlákien a na striedanie dvoch rôznych farieb pozadia. Ďalšie podrobnosti a maketu vzhľadu nájdete v časti User:Isaacl/style/discussion-threads .

Infoboxy a užívateľský štýl

Používatelia môžu mať používateľské CSS , ktoré skryje akékoľvek infoboxy v ich vlastných prehliadačoch.

Ak chcete skryť všetky infoboxy, pridajte na samostatný riadok do Special:MyPage/common.css (pre všetky vzhľady alebo Special:MyPage/skin.css len pre aktuálny vzhľad):

div . mw-parser-output . infobox { display : none ; }     

Prípadne môžete do svojho common.js alebo do používateľského skriptu prehliadača, ktorý spúšťa rozšírenie ako Greasemonkey, pridať nasledujúci kód :

$ ( '.infobox' ). skryť ();

Uvedomte si, že hoci podľa WP:Manual of Style/Infoboxes by sa všetky informácie v informačnom poli mali v ideálnom prípade nachádzať aj v hlavnej časti článku, nie je to úplne v súlade s týmto usmernením. Napríklad úplná taxonomická hierarchia v , OMIM a ďalšie kódy medicínskej databázy sa často nenachádzajú v obsahu hlavného článku. Infobox je tiež často miestom najvýznamnejšieho, dokonca jediného obrázka v článku. Existuje užívateľský skript, ktorý odstraňuje infoboxy, ale presúva obsiahnuté obrázky do samostatných miniatúr: User:Maddy z Celeste/disinfobox.js . {{Taxobox}}{{Infobox disease}}

Používateľské CSS pre jednorozmerné kódovacie písmo

Na kódovanie môžete dôsledne používať jednorozmerné písmo s dobre navrhnutými znakmi (napr. na jasné rozlíšenie medzi l, 1, a I, a medzi Oa 0a medzi -, , a ).

Pridajte niečo ako jeden z útržkov kódu nižšie do svojhoŠpeciálne: MyPage/common.cssnahradíte "Roboto Mono"ľubovoľným kódovacím písmom, ktoré preferujete (pre tento príklad bolo vybraté ako voľne dostupné kódovacie písmo Roboto Mono).

Ak nechcete tento kód pridať manuálne na svoju stránku CSS, ale radšej @importho (preložiť), pozrite si meta:User:SMcCandlish/codefont.css, kde nájdete rýchle pokyny.

Tento kód bude robiť nasledovné:

  • Použite konzistentné jednopriestorové písmo podľa vlastného výberu (a záložné predvolené nastavenie systémumonopriestor, ak by toto písmo chýbalo alebo by nemalo znaky, ktoré potrebujete) ku všetkým bežne nerozdeleným prvkom HTML <code>, ako sú <pre>, atď.
  • Urobte to isté pre triedy, ktoré používa, a ďalšie šablóny s jednotnou medzerou v rodine{{mxt}}{{xt}}
  • Urobte to isté pre ďalšie triedy pre celú lokalitu (ako boli doteraz identifikované, napr. .monospaced), ktoré vystupujú ako monospace.
  • Zabezpečte, aby tri najčastejšie sa vyskytujúce polia úprav tiež používali tento zásobník písiem: hlavné okno úprav, riadok súhrnu úprav a pole na zadanie vyhľadávania.

Ak viete o ďalšej triede, ktorú by ste sem mohli pridať, aktualizujte túto stránku alebo ju uveďte na diskusnej stránke .

Horizontálny štýl

/* Použiť moje písmo, ak je k dispozícii, pre kód */ 
code , pre , samp , kbd , tt , . príklad-mono , . userlinks-username , . jednopriestorové , . kláves na klávesnici , . tlačidlo ,. _ plaincode { font-family : "Roboto Mono" , monospace !important ; } /* Zmeniť niektoré upraviteľné položky na jedno miesto */ # wpTextbox1 , # wpSummary , # searchInput , # searchText { font-family : "Roboto Mono" , monospace !important ; }                

         

Vertikálny štýl

/* Použiť moje písmo, ak je k dispozícii, pre kód */ 
code , 
pre , 
samp , 
kbd , 
tt , 
. príklad-mono , 
. userlinks-username , 
. jednopriestorové , 
. kláves na klávesnici , 
. tlačidlo 
. plaincode { font-family : "Roboto Mono" , monospace !important ; } /* Zmeniť niektoré upraviteľné položky na jedno miesto */ # wpTextbox1 , # wpSummary , # searchInput , # searchText { font-family : "Roboto Mono" , monospace !important ; } 
     





 
     

Upratovacie úsilie

Ak by ste chceli pomôcť vyčistiť inštancie prvku – ktorý nie je platným kódom HTML od 90. rokov minulého storočia a mal by byť zvyčajne nahradený (toto sa môže líšiť v závislosti od kontextu) – môžete do svojho<tt>...</tt><code>...</code>common.cssaby trčal ako boľavý palec: <tt>

/* Označiť chybný kód na vyčistenie */ 
tt { color : DarkRed ; pozadie : ružové ; }      

Môžete to urobiť aj pomocou <font>prvkov , <center>, <strike>a iných zastaraných prvkov . Pre CSS stačí importovať, pozri meta:User:SMcCandlish/lint.css.

Externé odkazy na CSS

  • http://www.22bulbjungle.com/ – skvelé css návody
  • http://www.csszengarden.com/ – inšpirácia
  • http://www.alistapart.com/ – skvelé články
  • http://www.positioniseverything.net/ – niektoré zábavné, napr. chyby a ďalšie

JavaScript

JavaScript má veľa možností, napríklad pridávanie textu vrátane odkazov na požadované pozície. Tento pridaný obsah môže závisieť od obsahu na zdrojovej HTML stránke vytvorenej serverom; napríklad môže závisieť od prvkov HTML s ID, použitím getElementById. Pozícia vloženia môže byť špecifikovaná príkazom insertBefore.

Ako príklad, ak chcete pridať odkaz na stránku naľavo od svojich preferencií, pridajte do Special:Mypage/common.js nasledujúci text a nahraďte PageTitle názvom stránky wiki:

mw . utilita . addPortletLink ( 'p-personal' , '/wiki/PageTitle' , 'PageTitle' , null , null , null , '#pt-preferences' );	      

Presun kategórií na začiatok

Nasledujúci kód presunie pole kategórie do hornej časti článku. Samozrejme, možno budete chcieť použiť nejaké CSS, aby to vyzeralo krajšie:

function catsattop () { var cats = document . getElementById ( 'catlinks' ); var bc = dokument . getElementById ( 'bodyContent' ); bc . insertBefore ( mačky , bc . childNodes [ 0 ]); }  
     
     
   

Alternatíva, ktorá po spojení s vhodnou šablónou so štýlmi umiestni text približne na rovnaký riadok ako nadpis:

function categoryToTop () { var thebody = document . getElementById ( 'contentTop' ); kategórie var = dokument . getElementById ( 'catlinks' );  
     
     

  if ( category != null ) { category . parentNode . removeChild ( kategórie ); telo . parentNode . insertBefore ( category , thebody ); } }    
     
     
  

Nejaký CSS k tomu...

/* presunie rámček catlinks */ 
# catlinks { right : 1 em ; horná časť : -0,25 em ; maximálna šírka : 50 % ; /* toto obmedzuje veľkosť poľa, ale nestanovuje striktne */ float : right ; okraj : 0,5 em ; výplň : 0,2 em ; } 
  
  
    
   
   
   


/* formátovanie samotných catlinks */ 
p . catlinks { font-size : 67 % ; text-align : left ; zarážka textu : 0 ; text-transform : none ; biele miesto : normálne ; okraj : 0,2 em ; } 
  
  
  
   
  
   

Nanešťastie, ak je pole kategórie veľké (napríklad pri záznamoch o prezidentoch USA a iných významných osobnostiach), môže informačný box odsunúť nabok. Na nápravu je možné do informačného poľa pridať atribút „clear: right“.

CSS riadené Wikitextom

CSS je možné ovládať cez JS pomocou wikitextu. Napríklad prvok HTML „span“ bez obsahu môže prostredníctvom svojej triedy a id poskytnúť parametre pre JS špecifikujúce CSS pre ľubovoľné časti stránky. Napríklad, ak stránka obsahuje prvok „span“ s triedou FA a id lc , MediaWiki:Monobook.js špecifikuje štýl a názov prvkov „li“ triedy interwiki- lc , čím riadi štýl a názov medzijazykového odkazu. kódu jazyka lc na okraji za predpokladu, že vzhľad špecifikuje túto triedu interwiki- lc (Napr. Kolínska modrá špecifikuje pre každý jazyk class='external', takže pre tento vzhľad nefunguje.)

Externé odkazy na JS

  • http://www.quirksmode.org/ – pozri sekciu JavaScript a DOM
  • http://www.alistapart.com/
  • http://www.quirksmode.org/dom/domform.html – klonovanie formulárov (môže byť možné nahrať niekoľko obrázkov naraz, čo je tiež dobrý východiskový bod pre klonovanie štruktúry)

Pozri tiež

Prevzaté z "https://en.wikipedia.org/w/index.php?title=Help:User_style&oldid=1205715888"