Jak na soubory userChrome.css a userContent.css v uživatelském profilu

Po představení konfiguračního souboru user.js bychom vám rádi ukázali další dva konfigurační soubory – userChrome.css a userContent.css.Pojem konfigurační soubor zde ale není úplně přesný. Už přípona souboru naznačuje, že se jedná spíše o soubory formátovací.

Oba soubory patří do podadresáře chrome ve vašem uživatelském profilu. Podobně jako soubor user.js však standardně neexistují a v případě potřeby je musíte vytvořit včetně samotného podadresáře chrome.

Nyní k významu obou souborů. Soubor userChrome.css slouží k úpravě uživatelského rozhraní aplikací Mozilla. Díky němu můžete například odstranit tlačítka pro zavírání panelů, zobrazit lištu záložek na více řádků či realizovat ledajakou jinou úpravu. Celé rozhraní aplikace je totiž formátováno CSS styly, které lze tímto způsobem upravovat. Jediné, co k tomu potřebujete, je vědět id či class jednotlivých prvků grafického rozhraní. Přehled těch základních naleznete v Knowledge Base MozillaZine. Zbývající můžete zjistit pomocí DOM Inspektoru.

Druhý soubor, userContent.css, slouží k úpravám zobrazovaných webových stránek. Čeho můžete docílit? Přes tento soubor například můžete zakázat blikající prvky na stránce, pohyblivý text či třeba vycentrovat konkrétní stránku.

Příklady

Teorie je jedna věc, důležitá je ovšem praxe. Uvedu ukázky obou souborů. Nejprve userChrome.css:

/* Tento řádek musí být vždy na začátku souboru uveden */
@namespace
url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* Odstranění tlačítka pro zavírání panelů */
.tab-close-button{
  display:none !important;
}

/* Chceme lištu se záložkami na více řádků */
.bookmark-item {
  visibility: visible !important;
}
#PlacesToolbarItems {
  height: 58px; overflow-y: auto;
}
#PlacesToolbarItems > * {
  display: inline-block;
}

/* Přidání obrázku na pozadí lišt */
menubar, toolbox, toolbar, .tabbrowser-tabs {
  background-image: url("background.gif") !important;
  background-color: none !important; 
}

A nyní ukázka userContent.css:

@namespace url(http://www.w3.org/1999/xhtml);

/* Odstranění pole vyhledávání na novém panelu */
@-moz-document url-prefix("about:newtab") {
  #newtab-search-form {
    display: none !important;
  }
}

/* Zakázání tagu marguee – běžící text */
marquee {
  -moz-binding: none; display: block; height: auto !important;
}

/* Vynucení podtržení všech odkazů na webech */
a {
   text-decoration: underline !important
}

/* Změna kurzoru nad JavaScriptovými odkazy */
a[href^="javascript:"] {
   cursor: move;
} 

Stylish

Kromě souborů userChrome.css a userContent.css lze stejné úpravy provádět pomocí doplňku Stylish. Mnoho hotových úprav pro tento doplněk, které mohou posloužit i jako předloha pro vaše vlastní, pak najdete na serveru UserStyles.org.

Kde hledat další informace

Výše jsem uvedl několik ukázek k čemu je dobré tyto soubory využít, ale možností je samozřejmě podstatně více. To už je však nad rámec tohoto úvodu, a proto vás odkáži na celou řadu zajímavých stránek, které se týkají obsahu těchto souborů.