Wprowadzenie

Jako że jest to nadal świeże, to postanowiłem że drugim blogiem/stroną będzie właśnie objaśnienie gnome-shell.

Czym jest gnome-shell?
To plik, który odnosi się do API gnome3 i jego elementów.

Czym więc jest inaczej modyfikacji gnome-shell?
To modyfikowanie wyglądu gnome-shell :)

Czy to oznacza, że theme gnome-shell które można pobać z internetu to... gnome-shell?
Właśnie tak. gnome-shell to inaczej graficzna nakładka na API (tak ja to sobie tłumaczę).

Czyli, jeśli zmieniamy coś w pliku wyglądu gnome-shell to zmieniamy tym samym: gnome-shell i to jak ono wygląda.

I chcę tu wspomnieć o tym, że będziemy modyfikować oryginalny plik gnome-shell, a więc jeśli ktoś chce niech zrobi sobie kopię bezpieczeństwa :)

Co będzie nam potrzebne do modyfikacji?
Przy gnome-shell będzie nam potrzebne: uruchomione gnome-shell (ważne, aby cały czas monitorować zmiany + gedit lub nano - oba programy muszą być uruchomione w trybie: sudo.

Modyfikacja gnome-shell jest o tyle prosta, że nie jest ona budowana w oparciu o gtk3, ani nic innego. To odwołania do API i opisy: jak ma wyglądać dany element.

My nie zajmiemy się tworzeniem dodatków czy modyfikacji gnome-shell.
My zajmiemy się modyfikacją wizualną gnome-shell :)

ps.

I nie mam tu zamiaru tłumaczyć np. pewnych odnośników do API czy poleceń, bo to nie o to tu chodzi :)

małe Wyjaśnienie

Jak napisałem w poprzedniej notce, najlepiej do edycji pliku wyglądu (theme) używać gedit lub nano (terminal) w trybie sudo.

Więc zaczynamy :)
Aha, jeszcze kilka słów w woli wyjaśnienia: ja używam nano. Dlatego, ponieważ gedit w wersji gnome3 nie posiada przeskoku kółkiem myszki pomiędzy kartami. Terminal jako że używam lxterminal posiada taką możliwość, dlatego mi się lepiej pracuje w nano :)

Inna kwestia to to, że nano bazuje na skrótach klawiszowych, a jeśli działam na nano i robię to w terminalu no to trzymam ręce nad klawiaturą, a więc szybciej wykonam skrót klawiszowy, niż znajdę odpowiednią rzecz w gedit.
Jeśli ktoś chce, może korzystać z innego prostego edytora tekstu - ważne, aby być obyt z: wyszukiwaniem, zapisywaniem i pozycją (przyda się później, albo w momencie błędów)

I zapomniał bym: gnome-shell resetuje się (czyt. wylogowuje - oświadczając że ma błąd) co 3 lub 4 restarty.
Restart to: ALT+F2 i r (r jak renata). (nie muszę chyba pisać, że po r trzeba nacisnąć enter ;))

Jest to trochę problematyczne, bo zmusza nas do ponownego otwarcia wybranego programu i otwarcia danego pliku.

I tu fajne sprawdza się nano, bo wystarczy dać strzałkę wyżej aby nasze poprzednie polecenie zostało powielone. Z gedit może być różnie, ponieważ on wykonuje standardowo plik bezpieczeństwa, a do tego czasami trzeba ręcznie przeskoczyć do pliku nad jakim siedzieliśmy.

I na koniec: nie będzie tłumaczył wszystkich elementów gnome-shell, bo nie wszystkie elementy są interesujące. Bo co może być interesującego w powiadomieniach? Fajnie, że można coś w nich zmienić, ale posiadając oryginalne gnome-shell za wiele z tego nie ujrzymy. A to dlatego, że masę programów i komunikatorów bez stosownych dodatków nie pokazuje powiadomień np. pidgin, claws-mail, okno rozmowy, ponownie uruchomienie filmu: vlc.

Jeśli najdzie mnie ochota opiszę takie mało istotne zmiany na końcu tego cyklu :)

!!WAŻNE!!
Aby zachować własne modyfikacje i zmiany należy każdorazowo dokonywać kopi pliku który poddawaliście modyfikacji. Jeśli w systemie pojawi się aktualizacja paczki: gnome-shell.

pierwsze modyfikacje: suwak do przewijania ikonek (podgląd), jak i całkowite jego skasowanie

Przechodzimy do pliku gnome-shell:

sudo nano /usr/share/gnome-shell/theme/gnome-shell.css

albo

sudo gedit /usr/share/gnome-shell/theme/gnome-shell.css

Pierwsze linijki są odnośnie czcionki - LEPIEJ TO ZOSTAWIĆ NA RAZIE :)

stage {
font-family: cantarell, sans-serif;
}

.shell-link {
color: #0000ff;
text-decoration: underline;
}

.shell-link:hover {
color: #0000e0;
}

.label-shadow {
color: rgba(0,0,0,0.5);
}

Zabawne jest to, że w gnome-shell mamy suwaki.

Wiecie dlaczego zabawne?
Bo po uruchomieniu podglądu okien i przejściu do ikonek - nie musimy go używać :)

Wystarczy że naciśniemy LPM na pole między ikonkami, a "ulubionymi" i przeciągnięmy listę ikonek myszką.

Przechodzimy do modyfikacji, albo nawet skasowania suwaka ikonek. Tak, można go skasować :)
Dział odnoszący się do suwaków zaczyna się od:
StScrollBar
{
padding: 0px;
}

a kończy na:
StScrollBar StButton#hhandle:hover,
StScrollBar StButton#vhandle:hover
{
background-color: #292929;
}


Objaśnienie najciekawszych rzeczy i ich modyfikacja.

Określenie minimalnej szerokości i wysokości przycisku który przesuwamy.
StScrollView StScrollBar
{
min-width: 16px;
min-height: 16px;
}


Warto tutaj zapamiętać jeśli chodzi o dalsze modyfikacje:
#trough - wizerunek danej rzeczy lub elementu w momencie przyciskania

Przy suwakach mamy też takie o to znaczniki:
#vhandle i #hhandle
Chodzi oczywiście o v - vertical i h - horizontal
W przypadku suwaków określa to: do jakiego suwaka odnosi się dana opcja "pod".
Ponieważ możemy sobie inaczej określić suwak poziomy (horizontal - lewo, prawo) a inaczej pionowy (vertical - góra, dół).

Znacznik :hover to znowu oznaczenie najechania myszką na dany element.

No to co, jak już trochę wam namieszałem przechodzę do tłumaczenia elementów wewnątrz, które będą się powtarzać.

Kolor tła:
background-color: #080808;

Obramowanie:
border: 1px solid #2d2d2d;

Zaokrąglone brzegi:
border-radius: 8px;

Graficzny plik, który ma zastąpić standardowy element z theme gtk3.
background-image: url("scroll-vhandle.svg");
Można tutaj stworzyć sobie własny suwak i zamiast podanej nazwy wpisać swoją. Warunek: musi się on znajdować w miejscu gdzie znajduje się plik, który modyfikujecie gnome-shell. Jeśli zaś będziecie chcieli zbudować całą plejadę innych elementów niż oryginalne powinno wystarczyć stworzenie katalogu i zamiast nazwy pliku wpisać "nazwa katalogu/nazwa pliku.svg" - bez / na samym początku.

Kiedy już objaśniłem pewne kwestię odnośnie suwaków, to może je całkiem zlikwidujemy?
Robi się to przez kasowanie kodu z pliku, i wykazanie że suwaka nie widać.
A jeśli coś ma zero to jak może być ukazane?

Muszę tu nadmienić że elementem będę nazywać coś takiego:
StScrollBar StButton#hhandle
{
background-image: url("scroll-hhandle.svg");
background-color: #252525;
border: 1px solid #080808;
border-radius: 8px;
}
Czyli polecenie, odnośnik do danego elementu, ale i to co pod nim się znajduje lub się tam mieści.

Elementy: StScrollBar StButton#vhandle , StScrollBar StButton#hhandle , StScrollBar StButton#hhandle:hover , StScrollBar StButton#vhandle:hover , StScrollBar StBin#trough - kasujemy.

Zaś w tym miejscu: StScrollView StScrollBar
{
min-width: 16px;
min-height: 16px;
}Zamiast 16 wpisujemy 0.
Po wykonaniu restartu gnome-shell suwak w ikonkach powinien zniknąć, podobnie też jak i w innych miejscach.

barwy, kolory, przezroczystość, tło i o strukturze danych elementów

Jak możecie zauważyć zabawa w modyfikację nie jest taka straszna. Wystarczy wiedzieć: jak zbudowane są moduły, jaka jest ich struktura, co jest od czego, po co dana rzecz jest lub od od czego ona jest (czyt. co robi).

Wiele elementów theme to powtarzające się struktury.
Ponieważ większość rzeczy nie opiera się na zasadzie: coś ma własne miejsce, ale dany plik służy tylko jednemu: wskazaniu innym elementom - jak ma coś wyglądać, jaki ma mieć kolor i czy to ma mieć zaokrąglone brzegi czy może być kanciaste.

Jest to o tyle trudne na początku, ponieważ budowa wyglądu gnome-shell opiewa na wyglądzie najmniejszych pierdów takich jak brzegi panelu.
I tak jak w gnome2 wszystko działało w oparciu o gtk2, tak w gnome3 wszystkie opiera się na gtk3, jeśli idzie o... programy. Zaś cały wygląd gnome-shell, czyli tego w czym operujemy oknami, uruchamiamy programy już podlega pod całkiem inny plik nakazujący gnome-shell wyglądać tak a nie inaczej.

I w tym miejscu zajmiemy się taką prozaiczną sprawą jak: wnętrze większości rzeczy w gnome-shell czyli: kolory, tła i inne wizualne pierdy ;)

Standardowo spotkamy się z takim wnętrzem danego elementu:
    background-image: url("scroll-vhandle.svg");
    background-color: #252525;
    border: 1px solid #080808;
    border-radius: 8px;


Jak już wyjaśniłem poprzednio:
background-image: url("scroll-vhandle.svg");
to odniesienie do pliku.

background-color: #252525
to oczywiście kolor tła danego elementu pulpitu.

border: 1px solid #080808
tu mamy składnię odnośnie brzegów.
A więc:
1px - to grubość danego brzegu
solid - linia ciągła
(ale można sprawdzić frazę: dasher - czyli linia przerywana)
#xxxxxx - kolor

border-radius: 8px;
zaokrąglenie danego elementu. Czyli że brzegi będzie opływowe, a nie kanciaste, a brzegi zostaną "ścięte".

Ale mamy też:
padding: 0px;
chodzi oczywiście o margines. Można określić w ten sposób nawet pozycję danego elementu w przestrzeni po przez dodanie 3 kolejnych wartości np. pading: 2px 2px 10px 10px - tak też można :)

Przezroczystość:
border: 1px solid rgba(255,255,255,0.6);
oznacza to, że obramowanie jest przezroczyste. Świadczy o tym fraza: rgba i wartość w nawiasie. Jest to bardzo ważne, dlatego że fraza w nawianie określa kolor danej przezroczystości :)

Przezroczyste może być: kolor czcionki, panel, tło, obramowanie - czyli wszystko w gnome-shell :D
I ważna informacja.
Wartości w nawiasie zaczynają się od (0,0,0,0) do (255,255,255,255).
Wspominam o tym, ponieważ nie musicie mieć wartości podanej w nawiasie. Ale nie może ona być wyższa niż 255.
Same 0 to kolor czarny, zaś 255 to kolor biały. Jeśli zastąpicie 255 np. 100 wyjdzie wam taki szarawy lub coś pomiędzy. Możecie się pobawić też zmianą różnych brzegów np. rgba(100, 50, 0, 10) - każda z tych cyfr określa kolor cienia na każdym z brzegów: button, top, left i right.

Czcionka:
font-size: 0.8em;
font-weight: normal;
text-align: center;

font-size: 0.8em;
to nic innego jak określenie wielkości czcionki. I w gnome-shell mamy ich kilka: px (pikseli), em albo pt (punkty).

font-weight: normal;
tu mamy określenie czcionki odnośnie: pogrubiona (bold), normalna lub mała. Wiem, że jest trochę tego więcej, ale czy taka paleta opcji i tak nie wprowadza pewnego zamieszania?

text-align: center;
umieszczenie napisów - prawo albo lewo, a może właśnie po środku - angielski to podstawa.

Spotkamy się też z różnymi wariacjami powyższych opcji np. padding-left - czyli chodzi o lewy margines. border-width: - szerokość obramowania, miejsca danego elementu.

O frazie w różnych elementach poleceń ::hover już pisałem wcześniej, ale myślę sobie że warto tu nadmienić o pewnej małej opcji graficznej, której zmiana może inaczej obrazować wam oryginalny element wyglądu gnome-shell. A mowa o: background-gradient-direction: i vertical i horizontal.
Jeśli widzicie taką frazę pod danym elementem gnome-shell to wiedzcie że chodzi o... słowo klucz: background (tło) :) Czyli ułożenie tła na danym elemencie. Zmieniając daną frazę odnośnie panelu powiadomień nasz pasek który pokazuje się po najechaniu na niego na dole w gnome-shell staje się przezroczysty z lewej i ciemny z prawej - co od razu moim zdaniem zmienia postać patrzenia na dany element w tym pulpicie.

I jeszcze słówko o strukturze elementów i ich budowie.
# - to oznaczenie głównego elementu w gnome-shell
. - to oznaczenie pozycji które są w pewien sposób podległe w ustawieniu danego elementu który został oznaczony #.
- (pod znacznikiem poprzedzonym . ) to elementy podlegające tylko pod dany elemencik.

Mamy też coś takiego:
-natural-hpadding: 12px;
-minimum-hpadding: 6px;

to nic innego jak określenie odległości między ikonkami na panelu tych po prawej. Pierwsza opcja określa normalną odległość, a druga w momencie zagęszczenia - czyli jaka być minimalna odległość między ikonkami.

Jeśli chodzi o tekst to możemy mu nadać kolor, ale i też cień.
określa się to: color: #xxxxxx
Zaś cień tworzy po przez: text-shadow: black 0px 0px 0px
Co oznacza, że narzucamy aby dany tekst miał czarny cień w centrum. Te trzy cyfry określają przesunięcie cienia względem oryginalnego tekstu.

Na koniec:
Zalecam wam przejrzenie całego pliku, oraz samodzielne zmiany.
Ważne!
Wiele elementów interpretuje o wiele więcej poleceń niż może się wam wydawać. Tam gdzie macie ustawienie tekstu to możecie mu nadać cień, wyznaczyć czy ma być oparte o lewy czy prawy brzeg, czy ma być przezroczysty, czy może jego tło ma być przezroczyste. A jeśli macie ochotę możecie skasować dany tekst lub kolor - oznaczając go jako: przezroczysty, a tekst jako 0. Tak samo jest z obramowaniem, jego kolorem czy jakie ono ma być duże itd.
To wszystko podlega pod wasz umiar, wyobraźnie itd. To że nie można przemieścić danego elementu gnome-shell nie oznacza, że nie może on wygląda tak jak wy tego chcecie :)