baner

Po tym jak zrobiłem bardzo dużo kursów dla początkujących, postanowiłem, że czas na pokazanie czegoś bardzo zaawansowanego. Będziemy troszeczkę grzebać w kodzie szablonów a zacznę od słynnego Frameworka Ja T3.
 
Ten Framework ma coś takiego jak Theme Magic. Co to jest – jest to panel, za pomocą którego w prosty sposób możemy zmienić styl naszej strony.

panel szablonu

Możemy stworzyć wiele styli i za pomocą odpowiednich przypisań do każdej pod strony mieć inny wygląd strony a wszystko za pomocą jednego szablonu. To ekstremalny przypadek.
Przyda nam się to po prostu do szybkiej zmiany wyglądu strony. Na naszym przykładzie dodamy możliwość zmiany kolorystyki belki z poziomu panelu administracyjnego szablonu zbudowanego na bazie JA T3. Dodamy tam taki zapis zmiana koloru belki głównego menu.

 
Oczywiście pomijam w tym tekście instalację szablonu i Frameworka oraz ustawienia szablonu jako domyślnego. Zakładam że jest to zrobione.
Wiemy co chcemy zrobić.

 

co zmieniamy
Logujemy się za pomocą serwera ftp do plików naszej strony. Przechodzimy do folderu templates, i następnie do folderu t3_bs3_blank – ja ten szablon ustawiłem jako domyślmy – stąd będę edytował pliki w tym folderze.
Na dysk swojego komputera zgrywamy ten oto plik: thememagic.xml następnie przechodzimy do folderu less i także zgrywamy plik o nazwie variables.less na dysk swojego komputera.
Teraz trochę trudniej
Otwieramy plik variables.less – jest to ważny plik, osoby które edytują/tworzą szablony w less, wiedzą że tutaj są zawarte podstawowe zmienne szablonu, czyli informacje co jaki ma kolor, jaki margines – to co jest tutaj zależy już od twórcy szablonu. Zasadniczo większość parametrów wyglądu szablonu możemy zmieniać w tym pliku. My chcemy jednak móc zmieniać te parametry nie edytując tgo pliku ale z poziomu panelu.
Poszukujemy takiego zapisu:

@navbar-default-bg:                #f8f8f8;


Jest on w linii 300 naszego pliku variables.less, w innych wersja Frameworka może być gdzie indziej. Teraz łopatologicznie – tutaj jest zapisane że kolor tła belki głównej navbar-default-bg to #f8f8f8 czyli jasno szary. Teraz chcemy aby ten parametr koloru belki głównej navbar-default-bg był określany z poziomu panelu, a nie przez  f8f8f8.


Otwieramy plik o nazwie thememagic.xml plik ten odpowiada za zawartość tego co widzimy w panelu bocznym – obrazek pierwszy tego artykułu.
Parametry są pogrupowane w pola, nas interesuje pole kolorystyka – czyli dokładnie to co poniżej, linie od 45


<fieldset name="colors_params" label="T3_TM_COLORS">        
<field name="brand-primary" type="color" class="t3tm-color" label="T3_TM_VARS_PRIMARY_COLOR_LABEL" description="T3_TM_VARS_PRIMARY_COLOR_DESC" />
<!--field name="brand-secondary" type="color" class="t3tm-color" label="T3_TM_VARS_SECONDARY_COLOR_LABEL" description="T3_TM_VARS_SECONDARY_COLOR_DESC" /-->
<field name="body-bg" type="color" class="t3tm-color" label="T3_TM_VARS_BODY_BKG_LABEL" description="T3_TM_VARS_BODY_BKG_DESC" />
<field name="text-color" type="color" class="t3tm-color" label="T3_TM_VARS_TEXT_COLOR_LABEL" description="T3_TM_VARS_TEXT_COLOR_DESC" />
<field name="headings-color" type="color" class="t3tm-color" label="T3_TM_VARS_HEADING_COLOR_LABEL" description="T3_TM_VARS_HEADING_COLOR_DESC" />
<field name="link-color" type="color" class="t3tm-color" label="T3_TM_VARS_LINK_COLOR_LABEL" description="T3_TM_VARS_LINK_COLOR_DESC" />
        </fieldset>


Uf… ciężko wytłumaczyć mi będzie o co tutaj chodzi – spróbuję.
Ten zapis<fieldset name="colors_params" label="T3_TM_COLORS">        pola kolorów   </fieldset>

Tworzy grupę kolorystyka czyli to co widzimy na tym obrazie. My musimy dodać kolejny parametr kolor tła belki głównej.
 
 
A więc dopiszemy taką oto linę do już istniejących:


<field name="navbar-default-bg" type="color" class="t3tm-color" label="Kolor tła belki głównej" description="Tutaj edytujemy kolor tła belki głównej" />


Najważniejszy jest ten zapis name="navbar-default-bg" – to tutaj podpięliśmy polecenie pobrania koloru tła belki głównej szablonu. Zaś te zapisy:
label="Kolor tła belki głównej" description="Tutaj edytujemy kolor tła belki głównej" to po prostu etykiety – napisałem je po polsku, bo założyłem że te prace będą dla polaków – inaczej trzeba by edytować jeszcze pliki językowe.
Plik thememagic.xml który ma zapisaną tą dodatkową linię wgrywamy na serwer, nadpisując stary.
Teraz możemy zobaczyć efekt naszej pracy – mamy w panelu szablonu to co chcieliśmy czyli możliwość sterowania kolorem tła belki menu.

efekt


Kilka uwag:
Bardzo uprościłem ten artykuł – świadomie pominąłem edycję plików językowych, nie pokazałem Państwu co zrobić gdy tego co chcemy zmienić nie ma pliku variables.less. Starałem się z jednej strony napisać to prosto, by zaciekawić osoby ambitne.

Jeśli robię stronę dla klienta i wykonuję szablon bardzo często korzystam z tego Frameworka – niestety praca z nim jest bardzo trudna i wykorzystuję go do ambitniejszych projektów.
Poza JA T3, podobnie możemy dodać możliwość zmiany koloru w panelu w szablonie opartym o Gantry 4 jak i 5. Trzeba tylko edytować inne pliki, ale zasada jest prawie identyczna – jak dla mnie.


Ebook Joomla 3

ebook 2 okladka

Tutaj jest drugie wydanie ebooka o Joomla 3, dopisane jest kilka rozdziałów, jest ponad 270 stron