neděle 15. září 2013

Vlastní úpravy vzhledu GNOME Shell i GTK+

Sice existuje dost témat vzhledu pro GS a GTK již hotových, ale velmi často jsou to nedodělky, které vám toho víc zkazí, než vylepší. Výchozí vzhled GS není zas tak hrozný a tak si vystačím s pár drobnými kosmetickými zásahy do vyladěného základu. Úprava vzhledu prostředí GS není nijak extra složitá věc, jen je třeba dát dohromady potřebné soubory. Napsal jsem si krátký skript, který všechny potřebné soubory vydoluje ze systému a zkopíruje do tématického adresáře v $HOME, kde můžete začít s úpravami sami a přidám pár drobných tipů. ...


Získání zdrojů

Téma vzhledu GNOME desktopu je rozděleno na několik částí. Jednak tu máme téma Shellu, které se nedá vyměnit bez patřičného rozšíření, dále téma GTK oken, které musí pokrýt jak nové GTK 3, tak dosluhující GTK 2, a posledním je téma dekorací oken, tedy rám s horní lištou s titulkem a tlačítky pro ovládání okna. Vytvořit zcela nové téma, které pokryje vše, není zas tak jednoduché. Ovšem původní vzhled není extra nepovedený, takže já se spokojím jen s drobnými úpravami výchozího vzhledu Adwaita.

Nové verze Adwaita GTK 3 témat používají (na rozdíl od ubuntích témat Ambiance a Radiance) GResource framework, který umožňuje data, která jsou součástí aplikace, zabalit do jednoho binárního souboru a přitom k nim přistupovat stejně jako k běžným souborům. Takže přímo se soubory editovat nedají, je potřeba je nejprve z balíku vydolovat. Z terminálu lze k takovým souborům přistupovat pomocí nástroje gresource, který již máte v systému nainstalovaný. Pokud tedy chcete vytvořit kompletní nové téma, které bude odvozené od výchozího vzhledu Adwaita (nebo jiného), budete si muset zkopírovat všechny potřebné soubory do vašeho tématického adresáře v $HOME, na což jsem napsal krátký skript, který krom extrakce a kopírování následně přepíše reference na gresource soubor, takže GTK 3 téma bude rovnou funkční. Jméno MyAdwaita si samozřejmě přepíšete podle vlastního přání. Skript je testovaný na GNOME 3.83, 3.8.2 a 3.4.1 v Ubuntu 13.04, 13.10 a 12.04.2. Z komentářů ve skriptu by mělo být jasno, co je k čemu a jak si to případně upravit pro své potřeby. Základní inspiraci pro skript jsem bral zde.

#!/bin/bash

# cesta k tématu v rámci GResource souboru:
GR_BASEDIR="/org/gnome/adwaita/"
# cesta k vašemu novému tématu:
MY_THEME_DIR="$HOME/.local/share/themes/MyAdwaita"
# cesta k (dále) zkopírovanému gresource souboru:
GR_FILE="$MY_THEME_DIR/gtk-3.0/gtk.gresource"

# nejprve se zkopíruje téma shellu:
mkdir -p "$MY_THEME_DIR/gnome-shell"
cp -r /usr/share/gnome-shell/theme/* "$MY_THEME_DIR/gnome-shell"
# a pak téma vzhledu GTK s metacity:
cp -r /usr/share/themes/Adwaita/* "$MY_THEME_DIR/"

# nyní je třeba vydolovat zabalené zdrojové soubory gtk-3.0
# a rozházet do patřičných adresářů:
for RSRC in $(gresource list $GR_FILE); do
    RSRC_FILE="${RSRC#$GR_BASEDIR}"
    mkdir -p $(dirname "$MY_THEME_DIR/gtk-3.0/$RSRC_FILE")
    gresource extract "$GR_FILE" "$RSRC" > "$MY_THEME_DIR/gtk-3.0/$RSRC_FILE"
done
# nepotřebný soubor bude odstraněn
rm "$GR_FILE"
# nakonec se přepíšou reference z gresource na normální soubory:
sed -i 's@resource:///org/gnome/adwaita/gtk-main.css@gtk-main.css@' "$MY_THEME_DIR/gtk-3.0/gtk.css"
sed -i 's@resource:///org/gnome/adwaita/gtk-main-dark.css@gtk-main-dark.css@' "$MY_THEME_DIR/gtk-3.0/gtk-dark.css"

Pokud chcete mít téma plně funkční, je třeba ho umístit do ~/.local/share/themes, starší umístění ~/.themes, na které jsem byl dlouho zvyklý, sice funguje stále, ale jen částečně, protože téma dekorace, resp. Metacity (v adresáři metacity-1), tu nalezeno nebude.

Úpravy vzhledu

Co se vlastních úprav týká, základem je css s celkem srozumitelnými názvy položek a komentáři, takže základy se dají nalézt rychle. Dám pár příkladů, co jsem si upravoval já. Pro pohodlné vyměňování témat vzhledu je třeba mít nainstalován gnome-tweak-tool. Zmíněné tři celky vzhledu se dají měnit zvlášť a po provedení úprav stačí přepnout na jiné téma upravovaného celku a pak zpět, aby se znovu načetly zdrojové soubory. V Tweak Tool (česky je to v aplikacích myslím Pokročilá nastavení, nebo tak nějak blbě) se téma dělí na Current Theme, které zastupuje Metacity, tedy dekorace oken. Dále tu máme Gtk+ theme, což je vzhled oken a nakonec Shell theme pro vzhled prostředí GS. Poslední vyžaduje instalaci zmiňovaného rozšíření.

GNOME Tweak Tool
MyAdwaita je v mém případě Adwaita-GdH a na screenshotu můžete vidět jednu z mých úprav - levý panel a pole pro vyhledávání nejsou bílé.

Shell

První, co si upravuvju, je panel, protože ta totální černá mi prostě nesedí. Černá je fajn, ale když je malinko průhledná a prosvítá tapeta, je to hned veselejší. Patřičný css soubor, který ho definuje, naleznete v
MyAdwaita/gnome-shell/gnome-shell.css
Chcete-li si nastavit barvu a průhlednost panelu najdete následující kousek kódu:

/* Panel */

#panel {
    background-color: black;
    font-weight: bold;
    height: 1.86em;
}

Jako barvu můžete použít RGBA zápis, já si měním pozadí na následující:
background-color: rgba(0,0,0,0.8);

tedy černou s 80% krytím. Jak je vidět, je tu ještě nastavení tučného písma a výšky panelu. Ale pokud chcete změnit tučnost nápisů na panelu musíte si dále najít položku .panel-button, protože osazenstvo panelu jsou povětšinou právě buttony.


S panelem souvisí ještě další část kódu, která má na svědomí ještě ten rádius na obou koncích, který zaobluje maximalizovaná okna. Pokud změníte barvu panelu, musíte změnit barvu i zde, nebo tuto grafickou opičárničku můžete zkusit zlikvidovat jako já, takto by to snad ani nemělo hlásit chybky, každopádně to funguje. Nebo se dá to zaoblení odstranit i dalším rozšířením.

.panel-corner {
/*   -panel-corner-radius: 6px;
    -panel-corner-background-color: rgba(0,0,0,0.8);
    -panel-corner-border-width: 2px;
    -panel-corner-border-color: transparent;*/
}

.panel-corner:active,
.panel-corner:overview,
.panel-corner:focus {
/*  -panel-corner-border-color: rgba(255,255,255,0.8);*/
}

Dále si upravuju linku kolem menu panelu, dva pixely jsou na mě moc, stačí mi jeden.

/* PopupMenu */

.popup-menu-boxpointer,
.candidate-popup-boxpointer {
  -arrow-border-radius: 8px;
  -arrow-background-color: rgba(0,0,0,0.9);
  -arrow-border-width: 2px;
  -arrow-border-color: #a5a5a5;
  -arrow-base: 24px;
  -arrow-rise: 11px;
}

Já si změním ty 2px na jeden. Jo a taky ten rádius si změním na 4, mám raději hranatější tvary. Chcete mít tu linku i jinou barvou, nebo celé menu jinak barevné a průhledné, či jiné rozměry trojúhelníkového výstupku spojující menu s položkou panelu, ke které patří? Všechno je to v tomto kousku.

Ještě jedna věc mě bila do očí a to tlusté podtržítko při aktivaci položky panelu. Toto není o css, to je svg obrázek, který najdete v
MyAdwaita/gnome-shell/panel-button-border.svg
Stačí tedy soubor otevřít v Inkscape a kliknout na onu čáru a shora jí potáhnout rozměr, aby nebyla tak tlustá.



GTK+3

Adwaita je fajn, ale ty úplně bílé plochy mám raději malinko tmavší, aby byl kontrast decentnější a lépe se na to koukalo, především večer. Barva vstupních polí, podklad textového editoru, správce souborů, ... Podám si tedy soubor:
MyAdwaita/gtk-3.0/gtk-main.css

a upravím barvu hned druhého řádku na:
@define-color theme_bg_color #efefef;

Zde je třeba dávat pozor, protože úprava jedné barvy může ovlivnit další. Například má změna se projeví i na grafice tlačítek a combo boxů po najetí myši, protože tato barva je použita pro gradient, který se tímto defakto zruší, jelikož výchozí a koncová barva jsou téměř stejné. Dokonce se to projeví i na grafice přepínačů a bezpochyby dalších widgetech, tady je ještě fůra prostoru pro ladění..

Na GTK+2 pozor

K tomu jen to, že nějak nefunguje z umístění v $HOME a zatím to umím obejít jen tím, že téma vzhledu po úpravě zkopíruju do systémového adresáře
/usr/share/themes/
odtud pracuje i GTK2 bez problémů. Je ale lepší tomu dát jiné jméno, protože ve spojení s Tweak Toolem se pak témata nedají rozlišit a dělá to neplechu. Jinak by měl za normálních okolností dát systém při načítání tématu vzhledu přednost tomu v $HOME, pokud má stejné jméno.
Každopádně se GTK2 vzhled přebírá z css GTK 3, předpokládám za běhu, stejně jako se to dělá s KDE aplikacemi na Qt. Například předchozí úprava gtk-3.0 se projeví i v GTK 2 aplikacích. Tohle budu ještě muset dostudovat..

Vytvoření binárky z gtk-3.0 souborů

Pokud chcete z upraveného vzhledu pro GTK+3 vytvořit zpět onen jeden binární soubor, koukněte se na tento blog:
Building a binary for GTK3 theme,
kde najdete postup. V našem případě pak jen přepíšete reference v gtk.css a gtk-dark.css.

Závěr

Já jsem zatím nic jiného neměnil, ale prostor pro vaše experimentování jsem doufám alespoň trochu nastínil. Krom textových zdrojových souborů je možné povyměňovat i grafické prvky, měnit můžete nejen barvy, ale i tvary, písmo..
Cpát upravené soubory zpět do binárky není nutné, nakonec to zatím nedělá ani Ubuntu a komplikovalo by vám to další úpravy. Ještě zmíním, že po výměně GTK tématu se v grafice mohou projevovat drobné artefakty, vyřešit by to mělo odhlášení a přihlášení do prostředí s daným tématem.
Sice je návod šitý na míru GNOME Shell, ale pro téma vzhledu Ubuntu Ambiance, nebo Radiance platí to samé, s tím rozdílem, že soubory GTK+ není třeba dolovat z binárky a můžete vynechat adresář gnome-shell.


Žádné komentáře:

Okomentovat

Zkuste prosím při komentováni používat místo volby Anonymní volbu Název/adresa URL, kde vyplníte nějakou přezdívku, adresu zadávat nemusíte. Vědět, které příspěvky jsou od jednoho člověka, je fajn. Díky.

Pokud by se vám náhodou odeslaný komentář na stránce nezobrazil, vytáhnu ho z koše hned jak si toho všimnu. I Google spam filter se občas sekne.