Salam, bu məqalədə öz Linux mövzumuzu necə yarada bilərik, a GTK Mövzunun necə yazılması haqqında danışaq.
GTK3 mövzusu nədir?
GTK mövzusu Linux sistemlərində işləyən tətbiqlərin interfeys görünüşlərini müəyyən edir. Məsələn, düymənin hündürlüyü, haşiyə qalınlığı, fon rəngi, kliklədikdə hansı rəngə çevriləcəyi və sair.
GTK3 mövzu iyerarxiyası
Gəlin TEMA adlı bir mövzumuz olsun. Bu mövzunu fayl iyerarxiyası ilə ən sadə şəkildə yarada bilərik:
MÖVZU/ -- gtk-3.0/ ----- gtk.css ----- gtk-dark.css
gtk.css fayl sistemdə görünəcək mövzunun CSS-də yazılmış versiyasını ehtiva edir. Siz həmçinin mövzunu bir neçə fayla, məsələn, düymələrin üslublarını ehtiva edən buttons.css faylı, pəncərələrin üslublarını ehtiva edən windows.css faylı kimi bölmək olar.
Ancaq mövzunuzda axtarılacaq və oxunacaq yeganə css faylı gtk.css fayldır. Beləliklə, istifadə edəcəyiniz hər hansı digər .css faylları:@import url("dosya.css");
"Qaranlıq Mövzu" seçimi tətbiq tərəfindən seçilibsə, mövzunuz gtk-dark.css Üslub fayla uyğun olaraq həyata keçirilir. Beləliklə, mövzunuz üçün "qaranlıq rejim" dəstəyi üçün gtk-dark.css Siz fayl yaratmalısınız.
Mövzunu necə sınamaq olar?
MÖVZU qovluğundan yalnız konkret istifadəçi üçün, həmin istifadəçinin ev kataloqunda istifadə etmək ~ / .temalarSadəcə onu / qovluğuna köçürün, məsələn: /home/emin/.themes/TEMA
Əgər mövzunu sistemdəki bütün istifadəçilər üçün əlçatan etmək istəyirsinizsə, onu bu kataloqa yerləşdirməlisiniz: /usr/share/themes
Bu qovluqlara əlavə etdiyiniz mövzu xüsusiyyətlərinin əksəriyyətinin tək bir proqramda necə davrandığını görmək üçün. gtk3-widget-factory
Siz bu proqramı və əgər varsa, hazırladığınız ikon dəstini də yoxlaya bilərsiniz. gtk3-icon-browser
sudo apt install gtk-3 nümunələri
Mövzunuzda canlı olaraq nəyisə dəyişdirmək üçün "Ctrl + Shift + D" düymələri kombinasiyası ilə GtkInspector tətbiqini açın və tətbiqinizi yoxlama elementi ilə veb səhifəni yoxlayırmış kimi yoxlayın, CSS Nişanla siz yeni üslubları canlı yaza və ani üslub dəyişikliyini müşahidə edə bilərsiniz.
Gtk Müfəttişi:
- Ctrl + Shift + D (ümumi proqrama baxın)
- Ctrl + Shift + I (siçandakı vidceti yoxlayır)
Hər bir tətbiqdə onun qısa yollarını aktivləşdirmək üçün gsettings-dən aşağıdakı parametrləri aktivləşdirməlisiniz:
gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true
Gəlin kodlaşdırmağa başlayaq!
GTK3 və daha yuxarı versiyalar tətbiq mövzularını tərtib etmək üçün CSS stil formatından istifadə edir. Siz CSS ilə HTML faylında üslub yazdığınız kimi GTK3-də üslub yaza bilərsiniz. Yeganə fərq, GTK3-ün HTML-dən fərqli olmasıdır. etiketlər də rast gəlinir.
Məsələn, HTML-də yazdığınız mətn daxiletməsini CSS ilə aşağıdakı kimi tərtib edə bilərsiniz:
input[type=text] { fon: qırmızı; }
Bunu GTK-da etmək istəyiriksə, yəni mətn girişinin fonunu qırmızı etmək istəyirik:
giriş { fon: qırmızı; }
Gördüyünüz kimi, GTK standart HTML teqləri kimi öz vidjetlərini təyin edən teqlərə malikdir.
Bu teqlərin məzmunu hər bir vidcetin öz səhifəsinə daxil edilir. CSS qovşaqları Siz ona başlıq altındakı təriflərlə və ya sizin üçün hazırladığımız bu CSS Widget Siyahısı vasitəsilə daxil ola bilərsiniz:
https://kod.pardus.org.tr/snippets/1
Məsələn, aşağıda biz GtkMenu vidcetinin alt vidjetlərini görürük. CSS ilə üslub tərtib edərkən, biz bunu buna uyğun edəcəyik. Məsələn, menyuda yuxarıya baxan oxu üslub etmək istədiyimiz zaman menu > arrow.top {}
Biz həmçinin GTK+-da CSS-dən istifadənin ümumi icmalı üçün bu səhifəni nəzərdən keçirməyi tövsiyə edirik:
– GTK+ CSS icmalı: https://developer.gnome.org/gtk3/stable/chap-css-overview.html
Digər faydalı resurs, GTK+ tərəfindən istifadə edilən CSS xüsusiyyətlərinin sadalandığı aşağıdakı səhifədir, biz görürük ki, veb səhifələrin dizaynı zamanı istifadə etdiyimiz CSS-in çox detallı xüsusiyyətləri yoxdur:
– GTK+ CSS Xüsusiyyətləri: https://developer.gnome.org/gtk3/stable/chap-css-properties.html
Birinci Mövzu
yaratdım MÖVZUSUNDA adlı qovluqda boş gtk.css Bir düymənin fon rəngini və mətn rəngini dəyişdirmək üçün ilk üslubumu yazıram:
düymə { fon: mavi; rəng: ağ; }
Daha sonra gtk3-widget-factory
Gördüyünüz kimi, düymələrin arxası həqiqətən mavi və mətn ağdır, lakin başqa heç bir şeyin üslubu olmadığı üçün onlar boşdur.
Sıfırdan özünüz bir mövzu yaratmaq niyyətindəsinizsə, bütün elementlərin necə tərtib olunacağını əvvəldən müəyyənləşdirməlisiniz.
Daha asan üsul istəyirsinizsə, hazır mövzuda redaktələr etmək başlamaq istəyirsinizsə, GTK-da standartdan Adwaita Mövzunu öz üslublarınızdan əvvəl idxal edə bilərsiniz:
@import url("resource:///org/gtk/libgtk/theme/Adwaita/gtk-contained.css");button { fon: mavi; rəng: ağ; }
Adwaita mövzusunda hər şeyi götürüb öz üslubumuzu etmək istədiyimiz bu üslubu, yəni düymənin mavi rəngini əlavə etdikdə və yenidən Müfəttiş üzərində MÖVZUNU seçdikdə əldə etdiyimiz şəkil budur:
Gördüyünüz kimi, Adwaita-nın tərifləri dayandırılıb və əlavə etdiyiniz üslub ona əlavə edilib. Bu yolla siz Adwaita-dan hər şeyi götürərək, sonra onun üzərinə yazaraq və istəsəniz əvəz etməklə öz tamamilə yeni mövzu yarada bilərsiniz.
“Düymə”dən başqa qalan vidjetlər haqqında nə demək olar?
Hər bir vidcetin CSS-də ekvivalenti var. Bu ekvivalentləri Müfəttişin Obyektlər sekmesindəki "CSS qovşaqları" seçimində görə bilərsiniz.
Məsələn, pəncərə üçün windowheaderbarboxcomboboxseparator
Tez-tez istifadə olunan GTK elementlərinin CSS ekvivalentlərinə və onların tərkibində olan alt elementlərin cədvəl məlumatlarına aşağıdakı linkdən daxil ola bilərsiniz:
https://kod.pardus.org.tr/snippets/1
Bu linkdəki cədvəlin Alt Qovşaqlar bölməsi ekranda yerləşdirildikdə hazır olan vidcetin digər alt elementlərini müəyyən edir. Məsələn, Combobox daxilində Pəncərəyə stil vermək istəyirsinizsə combobox > window.popup
Bitdi!
İndi öz GTK3 CSS temanızı yaratmağa hazırsınız. Sizə lazım olan tək şey bu infrastrukturu öz təxəyyülünüzlə birləşdirərək gözəl şeylər yaratmaqdır.
Yaxşı iş!
