MediaWiki/Skin

Z Wikiverzity
Skočit na navigaci Skočit na vyhledávání

MediaWiki – Skin


Každý uživatel si může nastavit vzhled, když klikne na "nastavení", záložka "vzhled" a vybere si vhodný vzhled. Pokud si chce vytvořit vlastní vzhled (skin) a umí CSS, tak si může vytvořit vzhled, který mu bude vyhovovat.

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:

Problématika[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;
}


Odkazy[editovat]