Wikimore

"CSS" přesměrovává sem. Rozšíření viz Extension:CSS .

Cascading Style Sheet (CSS) (kaskádové styly) pravidla nastavující většinu vzhledu a chování MediaWiki: Velikost písma, barvy, mezery, logo a obrázek na pozadí, i když je obsah webu zobrazen nebo je skrytý.

Chcete-li změnit vzhled obrazovky MediaWiki (jak to vypadá v prohlížeči), můžete vložit CSS do MediaWiki:Common.css. Tento soubor je stránka ve vaší wiki, nikoli soubor jako index.php nebo load.php, takže ho nemůžete najít pohledem na strukturu adresářů na vašem serveru, ani není původně propojen s vaší hlavní stránkou ani s žádnou jinou stránkou. Stránka se zpočátku skládá pouze z jednořádkového komentáře. Chcete-li ji najít, zadejte do vyhledávacího pole na hlavní stránce vaší wiki MediaWiki:Common.css. Zobrazí se jako soubor s adresou, například https://www.myserver.org/mywiki/index.php?title=MediaWiki:Common.css. (K úpravám je vyžadováno následující oprávnění: "správce rozhraní")

Pokud se kód přidaný do MediaWiki:Common.css neprojeví okamžitě, bude pravděpodobně nutné provést hard refresh (tvrdé obnovení).

Chcete-li změnit způsob, jakým se stránky MediaWiki tisknou, vložte CSS do MediaWiki:Print.css na vaší wiki.

CSS lze použít ke změně stylu celé wiki, například k nastavení jiné barvy pozadí, nebo můžete použít inline CSS k úpravě stylu konkrétních částí textu ve vaší wiki. Například zelený text lze provést pomocí <span style="color:green">zelený text</span>. Pokud chcete zvětšit veškerý text na wiki, můžete do proměnné MediaWiki:Common.css přidat kód body { font-size: larger; }. Pro mobilní verzi použijte MediaWiki:Mobile.css.

Pokud je na vaší wiki povolena možnost $wgAllowUserCss , mohou si jednotliví uživatelé na adrese Special:MyPage/<skin_name>.css vytvořit vlastní stylové listy jen pro sebe (například Special:MyPage/vector.css, pokud používají vektorový vzhled). Soubor Special:MyPage/common.css umožňuje vytváření osobních stylů pro všechny vzhledy.

Také si můžete vytvořit vlastní vzhledy pro MediaWiki.

Nápověda

Syntaxe CSS, atributy a hodnoty musí být správné, jinak věci nebudou fungovat správně. World Wide Web Consortium (W3C) je vynikající referencí pro kontrolu správného psaní CSS přímo ze standardů:

https://www.w3.org/TR/CSS21/propidx.html – index vlastností CSS 2.1 ← velmi užitečný
http://www.w3.org/TR/CSS21/indexlist.html – CSS 2.1 Index všeho
http://www.w3.org/TR/CSS21/cover.html#minitoc – obsah CSS 2.1

Wikipedie poskytuje dobrý přehled CSS.

Pokud dáváte přednost snadno srozumitelné referenci spolu s ukázkami funkcí CSS, Reference MDN CSS vám poskytne "aktuální" průvodce syntaxí a základním používáním různých prvků.

Referenční příručka CSS MDN

Upozornění

Ujistěte se, že vaše HTML kódování zachovává sémantiku. Spoléhání se na styling k vyjádření významu je špatný postup (např. pro strojovou čitelnost, například vyhledávači, čtečkami obrazovky používajícími převod textu na řeč a textovými prohlížeči).

V případě potřeby lze vlastní stylové listy dočasně deaktivovat pomocí parametru URL safemode=1.

Normalizace CSS

Velká část dnešního CSS se spoléhá na "resetování" nebo "normalizaci" CSS, aby všechny prohlížeče fungovaly stejně. MediaWiki nemá reset jako takový, ačkoli má vestavěné styly jako common/commonElements.css, common/commonContent.css, common/commonInterface.css, MediaWiki:Common.css.

Pokud kopírujete CSS, sledujte, zda je závislé na dalším CSS.

Například jsFiddle má zaškrtávací políčko pro "Normalizovaný CSS". Toto nastaví margins na 0 a vynuluje čísla v seřazených seznamech. Protože žádný z těchto normalizačních CSS neběží na stránkách MediaWiki, neměli byste je používat při testování kódu souvisejícího s MediaWiki.

jsfiddle má funkci pro import CSS. Pokud testujete vzhled Vector na anglické Wikipedii, měly by být primární listy (v tomto pořadí):

Starší verze (všechny vzhledy, které používají CSS) CSS integrované v jádru
Obecné a vektorové CSS integrované do jádra
CSS webu (jmenný prostor MediaWiki)
- MediaWiki.org řídí CSS webu s příponou Gadgets , takže místo MediaWiki:Common.css se používá MediaWiki:Gadget-site.css. Výsledkem je mírně odlišná adresa URL pro načtení.
  - CSS pro všechny vzhledy (pro všechny uživatele) na MediaWiki.org (jmenný prostor MediaWiki)
  - CSS vzhledu Vector (jmenný prostor MediaWiki)

Doménu v URL adrese můžete upravit i pro jiné wikiny WMF. Importováním těchto prvků získáte lepší představu o tom, jak váš CSS interaguje s CSS na wikinách WMF.

Styly nefungují na Special:UserLogin nebo Special:Preferences?

Ve výchozím nastavení se úpravy CSS webu (např. MediaWiki:Common.css) neprojeví na přihlašovacích stránkách a stránkách s nastaveními. Důvodem je zachování bezpečnosti procesu přihlašování a umožnění uživatelům odstranit jakékoli nežádoucí úpravy, aniž by jim to bylo narušeno. Pokud se neobáváte bezpečnostních rizik, můžete použít konfigurační nastavení $wgAllowSiteCSSOnRestrictedPages , které povolí fungování vlastního CSS na těchto stránkách.

Použití funkce url()

Z důvodů ochrany soukromí jsou weby Wikimedie konfigurovány tak, aby odmítaly načítání zdrojů z externích serverů pomocí funkce CSS url(). To zahrnuje i zdroje kódované v URL datech.

Můžete však načíst zdroje, které jsou hostovány na serverech Wikimedie. Můžete například načíst obrázek z Wikimedia Commons a použít ho jako obrázek na pozadí pomocí CSS:

.my-class {
	background: url("https://upload.wikimedia.org/wikipedia/commons/1/1a/some_image.svg");
}

Můžete také použít vlastní rodinu písem poskytovanou rozšířením Wikimedie Universal Language Selector (viz seznam písem dostupných na wikinách Wikimedie).

Příklad CSS pro načtení písma Gochi Hand:

@font-face {
  font-family: 'GochiHand';
  src: local("Gochi Hand"),
       url(https://xyz.wikipedia.org/w/extensions/UniversalLanguageSelector/data/fontrepo/fonts/GochiHand/GochiHand-Regular.woff2);
}

Pokud chcete používat vlastní písma, je nutné je nainstalovat do systému lokálně.

Wikimore

Manual:CSS/cs

Nápověda

Upozornění

Normalizace CSS

Styly nefungují na Special:UserLogin nebo Special:Preferences?

Použití funkce url()

Související odkazy

Odkazy Interwiki