Wikiverzita

MediaWiki/Skin

< MediaWiki

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“