Jak na soubory userChrome.css a userContent.css

Po představení konfiguračního souboru user.js bychom vám rádi ukázali další dva soubory – userChrome.css a userContent.css, u nichž přípona naznačuje, že jde o soubory formátovací nebo stylovací.

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

Nyní k funkci obou souborů. Soubor userChrome.css slouží k úpravě uživatelského rozhraní aplikací Mozilly. Díky němu můžete např. odstranit tlačítka pro zavírání panelů nebo změnit umístění tlačítka nabídky. Celé rozhraní aplikace je totiž formátováno CSS styly a do souboru userChrome.css můžete přidávat vlastní. 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í zabudovaných nástrojů.

Druhý soubor, userContent.css, slouží k úpravám zobrazovaných webových stránek. Můžete s ním zakázat blikající prvky na stránce a pohyblivý text, nebo vycentrovat konkrétní stránku. Úplně stejné úpravy vzhledu webových stránek můžete jednoduše dělat i pomocí doplňků Stylish nebo Stylus. Mnoho hotových úprav pro ně najdete na serveru Userstyles.org.

Příklady

Teorie je jedna věc, máme tu ale i ukázky použití 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");

/* Skrytí lišty s panely pro použití s některými doplňky */
#TabsToolbar {
  display: none !important;
}

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

/* Přesun tlačítka nabídka (hamburger) vlevo */
#PanelUI-button {
  -moz-box-ordinal-group: 0;
}

/* 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;
}

/* Chceme lištu s panely na více řádků */
#TabsToolbar .tabbrowser-tab {
  visibility: visible !important;
}
#TabsToolbar .arrowscrollbox-scrollbox {
  height: 58px; overflow-y: auto;
}
#TabsToolbar .arrowscrollbox-scrollbox > * {
  display: inline-block;
}

Další styly pro použití v souboru userChrome.css najdete na této stránce dole. A nyní ukázka userContent.css:

/* Tento řádek je dobré na začátku souboru uvést */
@namespace url(http://www.w3.org/1999/xhtml);

/* 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;
}

Kde hledat další informace

Výše je jenom několik málo ukázek, ale možností je podstatně více. To už je nad rámec základního seznámení, a proto vás odkážeme na celou řadu zajímavých stránek, které se týkají obsahu těchto souborů.