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 a $1.

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. If you're testing against the Vector skin on English Wikipedia, the primary sheets should be (in this order):

Legacy general (all skins that use CSS) CSS built in to core
General and Vector CSS built-in to core
Site CSS (MediaWiki namespace)
- MediaWiki.org controls site CSS with the Gadgets extension, so MediaWiki:Gadget-site.css is used in place of MediaWiki:Common.css. This results in a slightly different load URL.
  - CSS for all skins (for all users) on MediaWiki.org (MediaWiki namespace)
  - Vector skin CSS (MediaWiki namespace)

You can adjust the domain in the URL for other WMF wikis. By importing these, you can get a better idea how your CSS interacts with the CSS on WMF wikis.

Styles not working on Special:UserLogin or Special:Preferences?

By default, site CSS customizations (e.g. MediaWiki:Common.css) do not take effect on the login and preferences pages. This is to preserve the security of the login process, and to allow users to remove any unwanted customizations without being interfered with. If you are not concerned about the security risks, you can use the $wgAllowSiteCSSOnRestrictedPages configuration setting to allow custom CSS to work on these pages.

Using the url() function

For privacy reasons, Wikimedia sites are configured to reject loading resources from external servers using the url() CSS function. This includes resources encoded in data URLs.

However, you can load resources that are hosted in the Wikimedia servers. For example, you can load an image from Wikimedia Commons and use it as a background image via CSS:

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

You can also use a custom font family provided by Wikimedia's Universal Language Selector extension (see the list of fonts available on Wikimedia wikis).

Example CSS to load the Gochi Hand font:

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

If you wish to use custom fonts, they need to be installed locally on your system.

Wikimore

Manual:CSS/cs

Nápověda

Upozornění

Normalizace CSS

Styles not working on Special:UserLogin or Special:Preferences?

Using the url() function

See also

Interwiki links