GTK 2.x Themes – Część I

Aktualna wersja poradnika znajduje się tutaj.

Od pewnego czasu w wolnym czasie zajmuję się tworzeniem stylów Gtk. Wiedzę swoją zdobywałem metodą prób i błędów bo do tej pory nie trafiłem na żaden poradnik (tym bardziej po polsku), nie licząc oficjalnego tutoriala gnome. Nie jest on jednak doskonały na start. Fakt opisuje podstawy oraz wiele obiektów ale suche fakty nie zawsze pomagają na początku. Pozwolę sobie zatem napisać taki “mini poradnik” opisujący podstawy tworzenia. Mam nadzieję że komuś się przyda, będzie to dla mnie nagroda za poświęcony czas.

Zacznijmy od początku. Jedną z najprostszych metod jest edycja czyjegoś stylu. Dobra na początek bo nie wymaga wiele wysiłku. Zważywszy jednak na licencje które twórcy zazwyczaj zamieszczają jest to “imo” łamanie ich. Nic nie stoi jednak na przeszkodzie aby wykorzystać je do nauki. W tym oto poradniku posłużę się swoimi “tworami”.

Trochę teorii. Całość opiera się na pliku gtkrc. Umieścić go należy w jednym z podkatalogów naszego stylu. Powiedzmy ze będzie to wyglądać tak:

/PierwszyTheme/gtk-2.0/gtkrc

Taki oto zestaw umieszcza się oczywiście w katalogu ~/.themes ale o tym pewnie wiecie.
Do pracy będzie nam potrzebny jakiś edytor tekstu (gedit, medit, vim itd) oraz jedno na najważniejszych narzędzi czyli TheWidgetFactory w którym to na żywo będziemy mogli sprawdzać efekty.

I. Przyszła pora na pisanie. Ja zaczynam zawsze od poniższej deklaracji:

gtk-button-images = 0
gtk-icon-sizes = "panel-menu=16,16:panel=16,16:gtk-button=16,16:gtk-large-toolbar=16,16"
gtk-menu-images = 0

gtk-button-images = 0 – wyłącza pokazywanie ikon na przyciskach (np zamknij itd), zmieniamy na 1 jeśli chcemy włączyć
gtk-icon-sizes = “panel-menu=16,16:panel=16,16:gtk-button=16,16:gtk-large-toolbar=16,16” – ta linijka odpowiada za wielkość ikon w panelach (np wstecz, home, kopiuj itd). Aby je zwiększyć zmieniamy 16-stki na np 24
gtk-menu-images = 0 – wyłącza pokazywanie ikon w menu, 1 włącza

II. Na początek przykład prostego stylu:

gtk-button-images = 0
gtk-icon-sizes = "panel-menu=16,16:panel=16,16:gtk-button=16,16:gtk-large-toolbar=16,16"
gtk-menu-images = 0

style "default-style"
{
xthickness = 3
ythickness = 3

GtkRange::slider-width = 15

bg[NORMAL] = "#f6f6f6"
}

class "GtkWidget" style "default-style"

xthickness = 3
ythickness = 3
odpowiada za wielkość odstępów od każdego elementu.

GtkRange::slider-width = 15 – ustawia szerokość paska przewijania

bg[NORMAL] = “#f6f6f6” – ustawia kolor tła na szary

class “GtkWidget” style “default-style” – tutaj definiujemy aby “default-style” odwoływał się do wszystkich elementów Gtk.

Oczywiście to tylko podstawa, zaraz przejdziemy do czegoś bardziej skomplikowanego.
(W tym momencie jeżeli umieścimy katalog w ~./themes możemy odpalić TWF i sprawdzić czy rzeczywiście tło jest jasno szare)

III. Wersja druga, większa:

gtk-button-images = 0
gtk-icon-sizes = "panel-menu=16,16:panel=16,16:gtk-button=16,16:gtk-large-toolbar=16,16"
gtk-menu-images = 0

style "theme-default"
{
GtkButton ::default_border = { 0, 0, 0, 0 }
GtkRange ::trough_border = 0
GtkPaned ::handle_size = 6
GtkRange ::slider_width = 7
GtkRange ::stepper_size = 1

GtkScrollbar ::min_slider_length = 30
GtkCheckButton ::indicator_size = 10
GtkRadioButton ::indicator_size = 10
GtkMenuBar ::internal-padding = 0
GtkTreeView ::expander_size = 14
GtkExpander ::expander_size = 16
GtkScale ::slider-length = 16

xthickness = 1
ythickness = 1

fg[NORMAL] = "#686966"
fg[PRELIGHT] = "#686966"
fg[SELECTED] = "#686966"
fg[ACTIVE] = "#686966"
fg[INSENSITIVE] = "#d0d0d0"

bg[NORMAL] = "#f0f0f0"
bg[PRELIGHT] = "#7192bb"
bg[SELECTED] = "#a6d2ff"
bg[INSENSITIVE] = "#f0f0f0"
bg[ACTIVE] = "#c4f694"

base[NORMAL] = "#ffffff"
base[PRELIGHT] = "#ffffff"
base[ACTIVE] = "#ba88c2"
base[SELECTED] = "#9ec9cf"
base[INSENSITIVE] = "#f0f0f0"

text[NORMAL] = "#686966"
text[PRELIGHT] = "#686966"
text[ACTIVE] = "#ffffff"
text[SELECTED] = "#ffffff"
text[INSENSITIVE] = "#d0d0d0"

engine "murrine"
{
menuitemstyle = 0
scrollbar_color =  #ff5858"
scrollbarstyle = 3
contrast = 1.0
menustyle = 1
glazestyle = 0
menubarstyle = 0
menubaritemstyle = 0
listviewheaderstyle = 0
listviewstyle = 1
gradients = FALSE
roundness = 0
animation = TRUE
hilight_ratio = 0.909090
}
}
class "GtkWidget" style "theme-default"

Opis:

GtkButton ::default_border = { 0, 0, 0, 0 } – obramowanie przycisków
GtkRange ::trough_border = 0 – wielkość obramowania paska przewijania
GtkPaned ::handle_size = 6
GtkRange ::slider_width = 7 – szerokość paska przewijania
GtkRange ::stepper_size = 1 – wielkość strzałek paska przewijania
GtkScrollbar ::min_slider_length = 30 – minimalna długość paska przewijania
GtkCheckButton ::indicator_size = 10 – odległość pomiędzy checkbuttonami
GtkRadioButton ::indicator_size = 10 – odległość pomiędzy radiobuttonami
GtkMenuBar ::internal-padding = 0 – wysokość menubara
GtkTreeView ::expander_size = 14
GtkExpander ::expander_size = 16
GtkScale ::slider-length = 16 – długość slidera
xthickness = 1 – wielkość obramowania elementów
ythickness = 1 – wielkość obramowania elementów
fg[NORMAL] = “#686966” – kolor tekstu przycisków, menu itd
fg[PRELIGHT] = “#686966” – kolor podświetlonego tekstu przycisków, menu itd
fg[SELECTED] = “#686966” – kolor wciśniętego tekstu przycisków, menu itd
fg[ACTIVE] = “#686966” – kolor aktywnego tekstu przycisków, menu itd
fg[INSENSITIVE] = “#d0d0d0” – kolor nie aktywnego tekstu przycisków, menu itd
bg[NORMAL] = “#f0f0f0” – podstawowy kolor tła
bg[PRELIGHT] = “#7192bb” – podświetlenie tła
bg[SELECTED] = “#a6d2ff” – kolor zaznaczonego rła, np progrssbar, przyciski w menu
bg[INSENSITIVE] = “#f0f0f0” – kolor nieaktywnego tła
bg[ACTIVE] = “#c4f694” – kolor tła aktywnych przycisków
base[NORMAL] = “#ffffff” – kolor tła pola tekstowego
base[PRELIGHT] = “#ffffff”
base[ACTIVE] = “#ba88c2” – kolor tła podświetlenia tekstu w nieaktywnym oknie
base[SELECTED] = “#9ec9cf” – kolor tła podświetlenia w aktywnym oknie
base[INSENSITIVE] = “#f0f0f0” – kolor tła w nieaktywnych polach tekstowych
text[NORMAL] = “#686966” – podstawowy kolor tekstu
text[PRELIGHT] = “#686966” – kolor podświetlenia tekstu
text[ACTIVE] = “#ffffff” – kolor tekstu aktywnego
text[SELECTED] = “#ffffff”# – kolor wybranego tekstu
text[INSENSITIVE] = “#d0d0d0” kolor tekstu nie aktywnego
engine “murrine” – deklaracja używania silnika murrine
menuitemstyle = 0 – styl przycisku menu
scrollbar_color = “#ff5858” – kolor paska przwijania
scrollbarstyle = 3 – styl paska przewijania
contrast = 1.0 – kontrast
menustyle = 1 – włącza boczny pasek w menu
glazestyle = 0 – styl połysku? nie wiem jak to przetłumaczyć
menubarstyle = 0 – styl paska menu
menubaritemstyle = 0 – styl przycisku na pasku menu
listviewheaderstyle = 0
listviewstyle = 1

gradients = FALSE – gradienty
roundness = 0 – zaokrąglenia przycisków itp
animation = TRUE – animacje, np progressbara
hilight_ratio = 0.909090 – tutaj ustawiamy podświetlenie, to tworzy bardziej płaskie przyciski, 1.1 wypukłe
class “GtkWidget” style “theme-default” – a tutaj deklarujemy theme-default dla wszystkich elementów gtk

Tutaj mała uwaga: w przykładzie korzystam z silnika “murrine”, jeżeli zdecydujemy się korzystać z innego to polecam tę listę oraz gnome-look.org. Opisy dostępnych funkcji znajdują się zazwyczaj na stronach domowych.
Pełny opis funkcji silnika murrine znajduje się tutaj.
Jeżeli chodzi o linijki fg, bg, base, text i mój opis to dotyczy on tylko tej konkretnej wersji. W nastepnych przykładach zmienią swoje znaczenie ale to dopiero nastepnym razem.

Po odpaleniu TWF powinniście zobaczyć prosty styl o szarym tle, czerwonym scrollbarze, niebieskimi i zielonymi elementami. Można teraz poeksperymentować ze zmianą kolorów a efekty sprawdzać na bieżąco w TWF. Ja tak zawsze robię.
W następnej części zajmiemy się pisaniem funkcji dla konkretnych elementów, jak przyciski, menu itd.

Uwagi, błędy które mogły się wkraść itd proszę zgłaszać w komentarzach. Mam nadzieję że komuś się taki opis przyda 🙂

Aktualna wersja poradnika znajduje się tutaj.