A A A

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

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.

Wygląd opcji w zakładce Layouts szablonu: Gantry

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:

Wyświetlony podział siatki Bootstrap w sekcji Top Positions

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);

Wygląd serwisu po zmianie MainBody Positions - układ tradycyjny

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

 Wygląd serwisu po zmianie MainBody Positions - komponent, kolumna lewa, kolumna prawa

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

Wygląd serwisu po zmianie MainBody Positions - kolumna lewa, kolumna prawa, komponent

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:

Wygląd serwisu z domyślnymi ustawieniami w sekcji MainTop Positions

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:

Wygląd serwisu z domyślnymi ustawieniami w sekcji MainTop Positions po zdjęciu z publikacji modułu LESS is More

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;

 

Ustawienia MainTop Positions, aby wymysić zdefiniuowane ustawienia siatki Bootstrap

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 ;-)

 Wygląd serwisu ze zmienionymi ustawieniami w sekcji MainTop Positions po zdjęciu z publikacji modułu LESS is More

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 ;-)

Pozycje modułów dostępne w szablonie Gantry

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.

Wygląd serwisu po zdefiniowaniu w zakładce Advanced w sekcji Display Component pozycji 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

Wyłączenie wyświetlanie treści i modułów w obrębie mainbody za pomocą opcji: Mainbody Enabled w pozycji 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.

Ustawienia w zakładkce: Advanced w szablonie: Gantry

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:

Wygląd modułu: Feature Focus bez zdefiniowanego przyrostka klas CSS

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

Dodawanie przyrostka klas CSS modułu

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

Wygląd modułu: Feature Focus po dodaniu przyrostka klas CSS

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

Wygląd przykładowego serwisu po dodaniu przedrostków klas CSSS w modułach

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?

Jak umieścić video w Joomla! - DJ-Embed Light
Własny szablon dla Joomla!? Z Gantry to proste! - ...

Podobne wpisy

 

Komentarze 22

Gość - Tomek (website) w niedziela, 15 luty 2015 15:18

Niedługo będziesz chyba robił nowy poradnik, bo ma wytjść Gantry5

Niedługo będziesz chyba robił nowy poradnik, bo ma wytjść Gantry5
Sławomir Pieszczek (website) w środa, 18 luty 2015 12:35

Tomek,

Jak mi się zechce to być może zrobię ;-)

Pozdrawiam :-)

Tomek,Jak mi się zechce to być może zrobię ;-)Pozdrawiam :-)
Gość - Bartłomiej w sobota, 21 luty 2015 17:03

Jak wszystkie super poradniki, także i ten super
Pozdrawiam

Jak wszystkie super poradniki, także i ten super Pozdrawiam
Sławomir Pieszczek (website) w środa, 25 luty 2015 13:14

Dzięki Bartłomiej :-D

Dzięki Bartłomiej :-D
Gość - Sebastian w niedziela, 01 marzec 2015 22:44

Świetna sprawa ten Gantry! Już się zabieram za modernizację własnej strony WWW
Wielkie dzięki za pokazanie tego narzędzia

Świetna sprawa ten Gantry! Już się zabieram za modernizację własnej strony WWW :D Wielkie dzięki za pokazanie tego narzędzia :)
Gość
czwartek, 25 kwiecień 2019

Zdjęcie captcha

Najnowsze komentarze

Gość - Andy SSL i Joomla! w Smarthost
03 styczeń 2019
Dzięki, jak zwykle dobra robota! Warto dodać, że instalacja certyfikatu SSL nie zapewnia bezpieczeństwa transmisji danych. To jest możliwe po wdrożeniu polityki bezpieczeństwa w firmie. Co do SSL - to...
Gość - Henryk Jak utworzyć menu poziome w szablonie protostar?
02 styczeń 2019
Robię punkt po punkcie i nie wyświetla się poziome menu Nie wiem gdzie tkwi błąd i co robię źle?Jeśli to możliwe to proszę o pomocps. posiadam książkę "Joomla! 3x" i tu również niema pomocy Pozdrawiam...
Gość - Joanna Jak utworzyć własny szablon dla Joomla! nie dotykając kodu? EF4 cz.2
09 grudzień 2018
Czy jest jakaś możliwość, żeby zmienić układ top-bar i tej linii, w której jest logo? Tam niby są flexibloki ale nie można zmienić ich szerokości, a tego potrzebuję bardzo. Jak tego dokonać???
Gość - Informatyk Tworzenie bazy danych w CPanelu na Smarthost - instalacja Joomla!
19 listopad 2018
Dziękuje za ten wpis joomla zawsze była dla mnie problematyczna
Gość - Sławomir DJ Image Slider
04 listopad 2018
co robić? Zdjęcia wyświetlają się pionowo, jedno pod drugim. Żadna zmiana w opcjach, nic nie daje??? Pomożecie?