Własny szablon dla Joomla!? Z Gantry to proste! - cz. 2

Chcesz szybko stworzyć własny szablon dopasowany do możliwości Twojego serwisu? Ale niestety nie znasz się na programowaniu?

Nie ma powodów do zmartwień! Obecne technologie pozwalają każdemu, kto potrafi obsługiwać komputer na wykonanie własnego szablonu dla Joomla! Co więcej takich narzędzi jest obecnie sporo i wierzę, że każdy znajdzie takie, które mu odpowiada :-)

W pierwszej części serii artykułów poświęconych tworzeniu własnych szablonów dla Joomla! za pomocą frameworka Gantry - pokazałem Ci, jak zainstalować przykładowy serwis z przykładowymi danymi oraz zainstalowanym frameworkiem Gantry (pakiet Rocket Launcher). W artykule: Własny szablon dla Joomla!? Z Gantry to proste! - cz. 1, pokazałem Ci, jak zdefiniować podstawowe style szablonu (własne logo, styl nagłówka, kolor linków i przycisków, rodzaj czcionki), dodatkowe elementy serwisu (wyświetlanie daty, przełącznika wielkości czcionek, przycisku umożliwiającego przejście do początku (góry) przeglądanej strony itp.) oraz menu poziomego serwisu.

W tym artykule pokaż Ci jedną z najciekawszych opcji frameworka Gantry, dzięki której będziesz dowolnie zmieniać układ poszczególnych elementów projektowanego szablonu. Do dyspozycji masz 65 pozycji modułów oraz 38 różnych kombinacji dla pozycji MainBody i Slidebars.

Numerację poszczególnych kroków kontynuuję z poprzedniego artykułu: Własny szablon dla Joomla!? Z Gantry to proste! - cz. 1

Krok 6. Zdefiniuj układ szablonu (Layouts)

W oknie Template Manager / Edit Style (menu Rozszerzenia -> Szablony, szablon: gantry - Default), kliknij zakładkę Layouts.

Typowy szablon dla Joomla składa się z wielu pozycji w których możesz umieszczać różnego typu moduły. Moduły po prostu przypisujesz do wybranej pozycji menu. Do każdej pozycji możesz przypisać jeden lub więcej modułów. Za pomocą zakładki Layouts, możesz niemal dowolnie konfigurować układ poszczególnych elementów serwisu. Możesz na przykład:

• zmieniać ilość pozycji w poszczególnych blokach;
• zmieniać liczbę kolumn siatki Bootstrap;
• możesz zdefiniować szerokość modułów w blokach;

Każdy główny element serwisu (wiersz, sekcja) posiada kilka wspólnych elementów za pomocą których możesz zdefiniować m.in. ilość i szerokość pozycji wyświetlanych w szablonie.

Za pomocą pola Positions możesz wybrać liczbę pozycji wyświetlanych w szablonie, poniżej linków reprezentujących tę liczbę zobaczysz reprezentację blokową wybranej ilości pozycji. Za pomocą suwaka umieszczonego poniżej możesz kontrolować szerokość poszczególnych pozycji. Domyślnie większość pozycji w poszczególnych sekcjach (wierszach) będzie miała taką samą szerokość.

Framework Gantry korzysta z siatki Bootstrap opartej na 12 kolumnach i dlatego, jeżeli wybierzesz w jakiejś sekcji ilość pozycji, i klikniesz suwak, to zobaczysz w etykiecie jak wygląda rozłożenie poszczególnych kolumn siatki Bootstrap. Na przykład w sekcji Top Positions aktywne są dwie pozycje, których szerokości są równe ponieważ siatka Bootstrap podzielona jest na dwie równe części: po 6 kolumn dla każdej pozycji:

Zobacz, jak różnie może wyglądać główna część serwisu:

• układ tradycyjny: lewa kolumna (3 kolumny), treść - komponent (6 kolumn), prawa kolumna (3 kolumny);

• układ blogowy: treść - komponent (6 kolumn), lewa kolumna (3 kolumny) , prawa kolumna (3 kolumny);

• układ: treść - lewa kolumna (2 kolumny) , prawa kolumna (2 kolumny), komponent (8 kolumn);

Kiedy w jakiejś sekcji zdefiniujesz ilość pozycji, powiedzmy 3, natomiast tylko dwie z nich wypełnisz modułami, framework Gantry zadba o to, aby odpowiednio podzielić przestrzeń i wypełnić całą szerokość strony. Zobacz, domyślnie sekcja MainTop Positions jest ustawiona w taki sposób, aby wyświetlała 3 pozycje menu w siatką: 3/6/3, gdzie ten fragment serwisu wygląda tak:

Kiedy moduł  LESS is More zostanie zdjęty z publikacji, przy tych samych ustawieniach framework Gantry podzieli miejsce między dwa pozostałe moduły:

Jeżeli z jakiś powodów chcesz wymusić, aby układ pozycji pozostał niezmieniony, pomimo, że w jednej z pozycji nie ma opublikowanego żadnego modułu, musisz wykonać dwie czynności:

• w polu Force Positions, za pomocą przełącznika włącz pozycję ON;
• w polu Position Count wybierz z listy taką samą ilość pozycji, jaka wybrana została w pozycji Positions. Moim przykładzie: 3;

Teraz framework wymusi zdefiniowany przez Nas układ siatki Bootstrap. Oczywiście pamiętaj, że aby zmiany te widoczne były w serwisie, należy kliknąć przycisk Save ;-)

Poświęć trochę czasu, aby poeksperymentować z różnymi układami. Możliwości ograniczone są jedynie do Twojej wyobraźni, ponieważ z taką ilością pozycji dla modułów możesz zrobić niemal dowolny serwis WWW ;-)

Krok 7. Zaawansowane ustawienia szablonu (Advanced) 

W oknie Template Manager / Edit Style (menu Rozszerzenia -> Szablony, szablon: gantry - Default), kliknij zakładkę Advanced. Opcje dostępne w tej zakładce umożliwiają włączenie lub wyłączenie kilku dodatkowych opcji dla bardziej doświadczonych webmasterów.

W sekcji (wierszu) Layout Mode możesz wybrać z listy czy chcesz, aby Twój szablon był szablonem responsywnym, czy też miał konkretne wymiary. Jeżeli chcesz, aby Twój szablon "dopasowywał" się do różnych urządzeń i wielkości ekranów, takich jak typowe ekrany komputerowe, laptopy, tablety, smartfony, itp., wybierz pozycję: Responsive.

W sekcji Load Transition, za pomocą suwaka możesz włączyć lub wyłączyć animacje podczas ładowania się strony. Efekt ten jest szczególnie widoczny przy dosyć rozbudowanych witrynach.

Jeżeli chcesz, aby na stronie startowej wyświetlane były tylko same moduły (bez np. artykułów), to w sekcji Display Component, za pomocą suwaka wybierz pozycję OFF.

Jeżeli chcesz, aby na stronie startowej nie były widoczne także moduły umieszczone w pozycjach: Content Top, Content Bottom i Sidebar, to w sekcji Mainbody Enabled, za pomocą suwaka wybierz pozycję OFF. 

Framework Gantry posiada wbudowaną obsługę języków czytanych od prawej do lewej strony (RTL - Right To Left), na przykład hebrajski lub arabski. Taki jeżyk zostaje automatycznie rozpoznany i wyświetlony w oparciu o ustawienia plików językowych. W sekcji RTL Support możesz za pomocą suwaka włączyć lub wyłączyć obsługę RTL.

Opcja Page Suffix pozwala na włączenie lub wyłączenie przyrostka klas stylu CSS dołączanego do znacznika body. Po włączeniu tej opcji masz możliwość zindywidualizowania formatowanie konkretnych stron serwisu.

Aby zapewnić wsparcie dla dodatkowych selektorów i pseudoklas CSS dla przeglądarek IE8 i starszych warto włączyć opcję: Selectivizr, dzięki czemu do witryny zostanie dołączony specjalny skrypt JavaScript.

Jeżeli chcesz zwiększyć szybkość wczytywania witryny, warto skorzystać z opcji: Less Compiler. Za pomocą suwaka w polu CSS Compression możesz włączyć lub wyłączyć kompresję wszystkich plików CSS, natomiast w polu Compile Wait wpisz maksymalny czas, pomiędzy kompresją poszczególnych plików CSS. W polu Debug Header, za pomocą suwaka możesz włączyć lub wyłączyć dołączanie nagłówka do skompresowanego pliku. Za pomocą przyciski Clear Cache możesz usunąć skompresowane pliki CSS.

Pamiętaj, aby zapisać wprowadzone zmiany klikając przycisk Save ;-)

Krok 8. Zmień style wyświetlanych modułów

Aby zmienić styl wyświetlanego modułu, wystarczy, że w jego ustawieniach (menu Rozszerzenia -> Moduły), klikniesz zakładkę Wzbogacone i w polu Przyrostek klas CSS modułu dodasz odpowiedni wpis.

W przypadku szablonu Gantry, do dyspozycji masz 7 różnych stylizacji (box1 - box3 i title1 - title3), które możesz ze sobą łączyć. Zobacz jak w przykładowym serwisie wygląda moduł Feature Focus bez żadnej stylizacji:

Edytuj ustawienia tego modułu, kliknij zakładkę Wzbogacone, a następnie w polu Przyrostek klas CSS modułu dodaj wpis: box3:

Zapisz prowadzone zmiany i zobacz teraz jak prezentuje się ten moduł:

Przyrostki klas CSS możesz ze sobą łączyć, zmieniając wygląd zarówno modułu, jak i jego tytułu. Pamiętaj, aby poszczególne przyrostki oddzielone były za pomocą spacji. Zobacz, jak będzie się prezentować przykładowy serwis po dokonaniu kilku zmian:

• Powerful Responsive Layout: title1
• Main Menu: title3;
• Help & Guides: box3 title4
• Typography: box2 title4
• Versions: box2 title4
• Ajax Base: title1
• Streamlined: title1

Liczę na to, że znasz już dokładnie większość opcji, jakie oferuje framework Gantry. Przyznasz, że nie jest to zbyt skomplikowane? Pomimo tego masz spore możliwości modyfikacji wielu elementów szablonu!

Bardzo zależy mi na Twojej opinii i chętnie poznam Twoje spostrzeżenia dotyczące frameworka i szablonu Gantry! Napisz proszę pod tym artykułem w komentarzu, jakie są Twoje spostrzeżenia i wrażenie podczas korzystania z Gantry. Czy jest to wystarczające narzędzie dla Ciebie, aby na jego bazie stworzyć własny szablon zgodny z potrzebami Twojego serwisu?

Moim zdaniem brakuje trochę więcej opcji związanych ze zmianami kolorystyki i krojów czcionki poszczególnych elementów serwisu. A co ty o tym sądzisz? Napisz w komentarzu!

W kolejnej części pokażę Ci na konkretnym przykładzie istniejącego serwisu, jak nie dotykając kodu, wykorzystując framework i szablon Gantry, stworzyć własny szablon dostosowany do wymagań konkretnego serwisu.

Chcesz otrzymywać powiadomienia o moich kolejnych wpisach lub projektach?

Zapisz się do newslettera!