GTK 2.x Themes – Część II

Aktualna wersja poradnika znajduje się tutaj.

W poprzedniej części skończyliśmy na prostym stylu gtk. Pozwolę sobie teraz na kolejny opis funkcji fg, bg, text i base ponieważ będziemy z nich korzystać podczas tworzenia wyglądu dla konkretnych elementów Gtk.

fg - czyli pierwszy plan. Zazwyczaj używany jako tekst na przyciskach, w niektórych silnikach jako obramowanie przycisków.
bg - kolor tła okien i przycisków
text - kolor tekstu
base - kolor tła widgetów, list

Przyjmują one wartości:

NORMAL - normalny kolor
PRELIGHT - podświetlenie czyli gdy np najedziemy myszką na przycisk
ACTIVE - aktywny czyli gdy np wciśniemy przycisk myszką
INSENSITIVE - nieaktywny czyli tam gdzie nie możemy nic zrobić
SELECTED - wybrany czyli gdy np zaznaczymy jakiś tekst

Kolory możemy podawać na kilka sposobów, ja będę posługiwał się tutaj zapisem heksadecymalnym czyli np: #000000 – czarny (kolorki można sprawdzać i wybierać np w gimpie albo w gcolor2 :))
Inne metody można znaleźć na stronie gnome.

Warto zapamiętać te podstawowe wiadomości ponieważ teraz będziemy z nich dużo korzystali.
Nasz kod z poprzedniej części odnosi się do wszystkich dostępnych elementów gtk a chcielibyśmy aby przyciski miały inny kolor, inne podświetlenie, menu inne tło niż okna itd. Przejdźmy więc do konkretów czyli jak napisać coś dla konkretnego elementu gtk. Trochę teorii:
Są dostępne 3 wersje ale opisze na razie tylko dwie: class i widget_class. Zrozumienie ich działania pozwoli na samodzielne ustawianie naszego stylu, bez użycia czyjejś konfiguracji.

class "GtkButton"      style "theme-button"

Taka deklaracja znaczy że każdy przycisk będzie pobierał dane z kawałka kodu nazwanego theme-button

widget_class "*MenuBar.*"  style "theme-menubar-item"

Z kolei ta deklaracja oznacza że każdy element na panelu menu będzie pobierał dane z theme-menubar-item

Zastanawiacie się pewnie co znaczy “.*“?
To właśnie klucz do sukcesu. Przyporządkowywanie zaczynamy od prawej strony.

Deklaracja GtkWindow to zwykłe okno.
Deklaracja GtkWidget.GtkButton to przycisk w oknie
Deklaracja GtkWidget.GtkButton.GtkLabel to etykieta przycisku w oknie.

A co to znaczy “.*” bo nadal nie odpowiedziałem? Ano tyle że jak widać elementy oddzielane są kropką a znak * oznacza dowolny argument. Czyli np:

Deklaracja GtkWidget.*.GtkLabel odwołuje się do wszystkich etykiet w oknie.
Można to też zapisac tak: *.GtkLabel

Są jeszcze inne opcje jak priorytety, dzielenie stylu na kilka plików ale je opiszę w kolejnej części poradnika ponieważ na początek można się bez nich obejść.

Przejdźmy zatem do pisania, zajmijmy się konkretnymi elementami dopisując kod do poprzedniej wersji. Polecam każdy kawałek kodu doklejać do tego z poprzedniej części i na bieżąco sprawdzać efekty w TWF.

style "theme-wide" = "theme-default"
{
xthickness = 2
ythickness = 2
}
class "GtkRange"       style "theme-wide"
class "GtkFrame"       style "theme-wide"

Deklarujemy tutaj odległości dla elementów Range i Frame.
Frame – ramki widgetów
Range – odwołuje się do pasków przewijania i sliderów.

style "theme-wider" = "theme-default"
{
xthickness = 2
ythickness = 2
}

Tutaj również deklarujemy odległości, odnoszą się one do wszystkich elementów z GtkWidget.

style "theme-entry" = "theme-wider"
{
bg[SELECTED]	    = "#ff7b7b"
}
class "GtkEntry"       style "theme-entry"

Deklarujemy tutaj ramkę wybranego elementu tekstowego (GtkEntry)

style "theme-button" = "theme-wider"
{
xthickness = 0
ythickness = 0
bg[NORMAL]        = "#ffee59"
bg[INSENSITIVE]   = "#f0f0f0"
bg[PRELIGHT]      = "#ffd0fa"
bg[ACTIVE]	    = "#ba88c2"
}
class "GtkButton"      style "theme-button"
class "GtkScale"       style "theme-button"
class "GtkCombo"       style "theme-button"

Tutaj deklarujemy wygląd przycisków w elementach GtkButton, GtkScale, GtkCombo
bg[NORMAL] = “#ffee59” – tło
bg[INSENSITIVE] = “#f0f0f0” – tło nieaktywnych
bg[PRELIGHT] = “#ffd0fa” – tło podświetlenia
bg[ACTIVE] = “#ba88c2” – tło aktywnych

style "theme-notebook" = "theme-wide"
{
bg[NORMAL]      = "#92dc7e"
bg[SELECTED]    = "#a6d2ff"
}
class "GtkNotebook"    style "theme-notebook"
widget_class "*.GtkNotebook.*.GtkEventBox" style "theme-notebook"
widget_class "*.GtkNotebook.*.GtkViewport" style "theme-notebook"

Tutaj deklarujemy elementy Notebook.
bg[NORMAL] = “#92dc7e” – tło
bg[SELECTED] = “#a6d2ff” – ramka wybranego elementu

style "theme-tasklist" = "theme-default"
{
xthickness = 4
ythickness = 2
}
widget_class "*.tooltips.*.GtkToggleButton" style "theme-tasklist"

Tutaj deklarujemy odległości pomiędzy ToggleButton w Tooltips.

style "theme-menu" = "theme-default"
{
xthickness = 2
ythickness = 2
bg[NORMAL] = "#2e3436"
}
class "GtkMenu"        style "theme-menu"

Tutaj deklarujemy kolor tła menu, czyli np po kliknięciu przycisku Plik, Edycja itd

style "theme-menu-item" = "theme-default"
{
ythickness = 3
fg[NORMAL] = "#7192bb"
fg[PRELIGHT] = "#000000"
fg[INSENSITIVE]      = "#d0d0d0"
bg[SELECTED]	    = "#fff8b2"
}
class "GtkMenuItem"    style "theme-menu-item"
widget_class "*MenuItem.*" style "theme-menu-item"

Tutaj deklarujemy akcje związane z menu, jak kolory tekstu, podświetleń itd.
fg[NORMAL] = “#7192bb” – kolor tekstu
fg[PRELIGHT] = “#000000” – kolor tekstu po podświetleniu
fg[INSENSITIVE] = “#d0d0d0” – nieaktywny tekst
bg[SELECTED] = “#fff8b2” – kolor podświetlenia

style "theme-menubar" = "theme-default"
{
bg[NORMAL] = "#ff5858"
}
class "*MenuBar*"      style "theme-menubar"

Tutaj deklarujemy kolor tła paska menu.

style "theme-menubar-item"
{
ythickness = 2
fg[PRELIGHT] = "#2e3436"
}
widget_class "*MenuBar.*"  style "theme-menubar-item"

Tutaj deklarujemy kolor podświetlenia przycisków na pasku menu.

style "theme-frame-title" = "theme-default"
{
fg[NORMAL] = "#a6d2ff"
}
widget_class "*.GtkFrame.GtkLabel" style "theme-frame-title"

Tutaj deklarujemy kolor tekstu tytułu ramek.

style "theme-tooltips" = "theme-default"
{
xthickness = 2
ythickness = 2
bg[NORMAL] = "#ff7b7b"
}
widget "gtk-tooltips" style "theme-tooltips"

Tutaj deklarujemy kolor tła dla wyskakujących powiadomień.

style "theme-progressbar" = "theme-wide"
{
xthickness = 2
ythickness = 2
fg[PRELIGHT]  = "#ffffff"
bg[NORMAL]    = "#f0f0f0"
bg[SELECTED]	= "#686966"
}
class "GtkProgressBar" style "theme-progressbar"

Tutaj deklarujemy dane dla pasków postępu.
fg[PRELIGHT] = “#ffffff” – kolor tekstu podświetlonego przez pasek
bg[NORMAL] = “#f0f0f0” – kolor tła dokoła paska
bg[SELECTED] = “#686966” – tło paska

style "theme-combo" = "theme-button"
{
}
widget_class "*.GtkComboBox.GtkButton" style "theme-combo"
widget_class "*.GtkCombo.GtkButton"    style "theme-combo"

Tutaj deklarujemy aby przyciski w elementach ComboBox i Combo korzystały z ustawień theme-button.

Tym oto sposobem mamy już w pełni działający styl Gtk. Kolorowy jak tęcza 🙂
Można się jeszcze na przykład zająć osobno panelem:

style "panel"{
xthickness            			= 2
ythickness            			= 2
bg[NORMAL]   = "#7192bb"
fg[NORMAL]   = "#333333"
text[NORMAL] = "#686966"
}
style "panelbuttons"{
xthickness            			= 2
ythickness            			= 2
bg[NORMAL] 		= "#7192bb"
bg[ACTIVE]		= "#ff7b7b"
bg[SELECTED]	= "#ffee59"
bg[PRELIGHT]	= "#c4f694"

fg[NORMAL]		= "#2e3436"
fg[ACTIVE]		= "#ffffff"
fg[PRELIGHT]	= "#2e3436"
}
class "*Panel*" style "panel"
widget_class "*Panel*GtkToggleButton" style "panelbuttons"
widget_class "*Panel*Button" style "panelbuttons"
widget_class "*Panel*b*" style "panelbuttons"

Tutaj deklarujemy dane dla panelu, przyciskach na panelu itd.
bg[NORMAL] = “#7192bb” – kolor tła panelu
bg[ACTIVE] = “#ff7b7b” – kolor tła aktywnego przycisku
bg[SELECTED] = “#ffee59” – kolor tła pagera
bg[PRELIGHT] = “#c4f694” – kolor tła podświetlanego przycisku
fg[NORMAL] = “#2e3436” – kolor tekstu na przyciskach
fg[ACTIVE] = “#ffffff” – kolor tekstu w aktywnym przycisku
fg[PRELIGHT] = “#2e3436” – kolor tekstu w podświetlanych przyciskach

Po sklejeniu wszystkiego co dzisiaj napisaliśmy z kodem z poprzedniej części powinniśmy otrzymać coś takiego:

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
menuitemstyle = 0
listviewheaderstyle = 0
listviewstyle = 1
gradients = FALSE
roundness = 0
animation = TRUE
hilight_ratio = 0.909090
}
}
class "GtkWidget" style "theme-default"

style "theme-wide" = "theme-default"
{
xthickness = 2
ythickness = 2
}
style "theme-wider" = "theme-default"

{
xthickness = 2
ythickness = 2
}
class "GtkRange"       style "theme-wide"
class "GtkFrame"       style "theme-wide"

style "theme-entry" = "theme-wider"
{
bg[SELECTED]	    = "#ff7b7b"
}
class "GtkEntry"       style "theme-entry"

style "theme-button" = "theme-wider"
{
xthickness = 0
ythickness = 0
bg[NORMAL]        = "#ffee59"
bg[INSENSITIVE]   = "#f0f0f0"
bg[PRELIGHT]      = "#ffd0fa"
bg[ACTIVE]	     = "#ba88c2"
}
class "GtkButton"      style "theme-button"
class "GtkScale"       style "theme-button"
class "GtkCombo"       style "theme-button"

style "theme-notebook" = "theme-wide"
{
bg[NORMAL]      = "#92dc7e"
bg[SELECTED]    = "#a6d2ff"
}
class "GtkNotebook"    style "theme-notebook"
widget_class "*.GtkNotebook.*.GtkEventBox" style "theme-notebook"
widget_class "*.GtkNotebook.*.GtkViewport" style "theme-notebook"

style "theme-tasklist" = "theme-default"
{
xthickness = 4
ythickness = 2
}
widget_class "*.tooltips.*.GtkToggleButton" style "theme-tasklist"

style "theme-menu" = "theme-default"
{
xthickness = 2
ythickness = 2
bg[NORMAL] = "#2e3436"
}
class "GtkMenu"        style "theme-menu"

style "theme-menu-item" = "theme-default"
{
ythickness = 3
fg[NORMAL] = "#7192bb"
fg[PRELIGHT] = "#000000"
fg[INSENSITIVE]      = "#d0d0d0"
bg[SELECTED]	    = "#fff8b2"
}
class "GtkMenuItem"    style "theme-menu-item"
widget_class "*MenuItem.*" style "theme-menu-item"

style "theme-menubar" = "theme-default"
{
bg[NORMAL] = "#ff5858"
}
class "*MenuBar*"      style "theme-menubar"

style "theme-menubar-item"
{
ythickness = 2
fg[PRELIGHT] = "#2e3436"
}
widget_class "*MenuBar.*"  style "theme-menubar-item"

style "theme-frame-title" = "theme-default"
{
fg[NORMAL] = "#a6d2ff"
}
widget_class "*.GtkFrame.GtkLabel" style "theme-frame-title"

style "theme-tooltips" = "theme-default"
{
xthickness = 2
ythickness = 2
bg[NORMAL] = "#ff7b7b"
}
widget "gtk-tooltips" style "theme-tooltips"

style "theme-progressbar" = "theme-wide"
{
xthickness = 2
ythickness = 2
fg[PRELIGHT]  = "#ffffff"
bg[NORMAL]        = "#f0f0f0"
bg[SELECTED]	    = "#686966"
}
class "GtkProgressBar" style "theme-progressbar"

style "theme-combo" = "theme-button"
{
}
widget_class "*.GtkComboBox.GtkButton" style "theme-combo"
widget_class "*.GtkCombo.GtkButton"    style "theme-combo"

style "panel"{
xthickness            			= 2
ythickness            			= 2
bg[NORMAL]   = "#7192bb"
fg[NORMAL]   = "#333333"
text[NORMAL] = "#686966"
}
style "panelbuttons"{
xthickness            			= 2
ythickness            			= 2
bg[NORMAL] 		= "#7192bb"
bg[ACTIVE]		= "#ff7b7b"
bg[SELECTED]	= "#ffee59"
bg[PRELIGHT]	= "#c4f694"

fg[NORMAL]		= "#2e3436"
fg[ACTIVE]		= "#ffffff"
fg[PRELIGHT]	= "#2e3436"
}
class "*Panel*" style "panel"
widget_class "*Panel*GtkToggleButton" style "panelbuttons"
widget_class "*Panel*Button" style "panelbuttons"
widget_class "*Panel*b*" style "panelbuttons"

To by było na tyle w tej części. Powinniście wiedziec już wystarczająco wiele aby ćwiczyć samodzielne tworzenie stylów. W następnej części postaram sie opisać elementy Gtk. Dowiecie się jakie dokładnie argumenty przyjmują i z czego można dodatkowo korzystać.

Aktualna wersja poradnika znajduje się tutaj.