Přeskočit na obsah

MediaWiki/Skin

Z Wikiverzity

MediaWiki/Skin – nastavení vzhledu stránek na projektech Wikimedia

Úvod

[editovat]

Každý uživatel si může nastavit vzhled (skin), když klikne na "nastavení", záložka "vzhled" a vybere si vhodný vzhled. V současné době (2024-03) je možné si na Wikiverzitě a dalších projektech ve Speciální:Nastavení (Special:Preferences) zvolit následující skiny:

Pokud si chce vytvořit vlastní vzhled (skin) anebo chce jen pozměnit nějaký jiný a umí CSS, tak si může vytvořit vzhled, který mu bude vyhovovat.

Ve svém nastavení má odkazy má skripty, které si může vytvořit pod svou domácí stránkou a které mu pak modifikují vzhled jeho stránek:

  • Sdílené CSS/JavaScript pro všechny styly:
    • common.css Uživatelské CSS | common.js Uživatelský JavaScript
  • Sdílené CSS/JavaScript pro všechny wiki:
    • global.css Uživatelské CSS | global.js Uživatelský JavaScript

Výše uvedené skripty pak modifikují zobrazování stránek u všech nastavených skinů. Chceme-li modifikovat jen nějaký skin, pak použijeme název daného skinu, např:



Problém může být, pokud si chce nějaký skin lehce upravit a CSS moc neumí a to právě řeší tento článek – jak upravit vzhled s minimální znalostí CSS a napáchat přitom méně škody, než užitku.

Podstránky

[editovat]

Níže uvedené podstránky se mohou různým uživatelům zobrazovat různě v závislosti na nastavení jejich osobních preferencí a zčásti i na použitém browseru:

Problematika

[editovat]

Uživatel projektů nadace Wikimedia se může setkat s problémy, které by (možná) šly řešit úpravou vzhledu (skinu). Uvedeme pár příkladů ze života:

Použít Wikiverzitu při přednášce v posluchárně

[editovat]

Mohla by to být alternativa k pracnému vytváření slajdů. Jde o to, že na stránkách, generovaných MediaWiki, je spousta "zbytečností", které při prezentaci nevyužijeme a zbytečně ruší, proto by je chtělo nějak vypnout. Rovněž by to chtělo podstatně zvětšit základní font, protože u některých prohlížečů je problém, zvětšit jej dostatečně.

  • výchozí skin: např. MonoBook, což je implicitní skin
  • úprava: založíme si stránku "User:Jmenouzivatele/monobook.css" a na ní umístíme úpravy
  • vychozí skin: např. "kuře" – má vyhodu, je sám o sobě jednodušší
  • anglicky je to "chick", takže bych očekával, že úpravy skinu umístíme na stránku "User:Jmenouzivatele/chick.css"

Styly na projektech nadace WikiMedia

[editovat]

Každý uživatel má možnost si na každém projektu (Wikipedie, Wikiverzita atd.) zvolit styl, a to v menu:

  • Nastavení
    • záložka Vzhled

Na výběr má několik skinů (vzhledů). Například na českých projektech w:Speciální:Nastavení:

  • Jednoduchý
  • Klasický
  • Kolínská modř
  • Kuře
  • Moderní
  • MonoBook (implicitní)
  • Můj vzhled
  • Nostalgie
  • Vektor

Na projektech v anglickém jazyce:

  • my preferences
    • Appearance

Je na výběr:

  • Chick
  • Classic
  • Cologne
  • Modern
  • MonoBook (default)
  • MySkin
  • Nostalgia
  • Simple
  • Vector

Jsou to skiny, dodávané mezi instalačními soubory distribuce MediaWiki. Avšak pozor, na rozdíl od této výchozí distribuce mohou (a také jsou) tyto skiny už nějak upraveny "navěšením" dalších CSS souborů.

CSS

[editovat]

(kaskádové styly)

základní informace

[editovat]

Pro lamy:

  • hash na začátku # znamená nějaké id
  • tečka na začátku . znamená nějakou třídu
  • dvojtečka na začátku : znamená nějakou pseudotřídu nebo pseudoprvek
  • komentář je stejný jako v Jazyk C: /* komentář */

Web Developer

[editovat]

Web Developer je plugin (doplněk) prohlížeče Mozilla Firefox, který umožňuje pracovat s CSS a zobrazovat o nich různé informace. Po jeho nainstalování ve Firefoxu:

  • Zobrazit
    • Nástrojové lišty
      • Web Developer Toolbar

Informace o stylech

[editovat]

Úpravy stylu

[editovat]

Zneviditelnit, co nechci

[editovat]

Např. nechci, aby se mi zobrazovala políčka [editovat]

Postupuji:

  • Na panelu: Web Developer Toolbar
    1. menu: Informace
      • označím: Zobrazit informace o prvcích Ctrl-Shift-F
    2. Opatrně najedu myší na stránce na tu hranatou závorku, co je kolem odkazu [editovat]. Během pohybu myší se mi zobrazuje červený obdélníček, který musí obsahovat právě obě ty hranaté závorky. V tomto správném okamžiku kliknu levým myšítkem
    3. Ve žlutém rámečku se mi zobrazí informace:
      • span .editsection
        • Atributy
          • class = editsection
            ... atd.
    4. Tím pádem už vím, že musím zneviditelnit třídu .editsection:
/* Zneviditelnění odkazů na editaci textu */ 
.editsection { display:none; !important; }

Zvýraznění elementů

[editovat]

Třeba při přednášce najedu myší na nadpis, tak chci, aby se zvýraznil. 

h1:hover {
    background-color: yellow;
}

Pískoviště

[editovat]
  #ca-edit { display: none; }

#globalWrapper {
 font-family: Gentium, sans-serif;
 font-size: 10pt;
 color: black;
}

#globalWrapper {
        font-size: 127%;
        width: 100%;
        margin: 0;
        padding: 0;
}


Související stránky

[editovat]

Použití skinu pro přednášky

[editovat]

Odkazy

[editovat]

wikipedia.org:

cs.wikipedia.org:

mediawiki.org:

en.wikiversity.org

wikibooks.org:

wiktionary:

ostatní:

Citováno z „https://cs.wikiversity.org/w/index.php?title=MediaWiki/Skin&oldid=135838“