A A A

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

przez w Webdesign
  • Przeczytano: 7905
  • 22 komentarze
  • Drukuj
7905
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?

Oceń ten wpis:

Nauczyciel przedmiotów informatycznych w szkole ponadgimnazjalnej.


Pierwszy Certyfikowany Administrator Joomla! w Polsce.


Autor książek i e-booków na temat Joomla!. Autor bloga: www.slawop.net, w którym porusza zagadnienia związane z CMS Joomla! i wykorzystaniu go, jako fantastycznego narzędzia, które ułatwia innym tworzenie ich własnego miejsca w sieci.


Prowadzi własną firmę świadczącą usługi związane z tworzeniem oraz administrowaniem serwisów opartych o CMS Joomla!


Współorganizator Joomla! User Group Jawor


Uwielbia ekstremalnie szybką jazdę na rolkach! Fan rozwoju osobistego i ciągłych zmian :-)


I love Joomla! Why?


Because Joomla! is Doing Great Things with Great People :-)


And My favourite sentence:



Don't Let Anybody Steal Your Dreams!


Komentarze

  • Gość
    Adrian środa, 19 lipiec 2017

    Witam
    Poszukuję tych dwóch pakietów
    Ma je ktoś może jeszcze?
    Kompletny pakiet do instalacji joomla + framework+ rocketluncher
    nie interesuje mnie gantry 5 tylko 4
    nie piszę o plikach
    Gantry Framework Extension v4.1.33
    Gantry Default Template v4.1.33
    Potrzebuje komplet
    Bardzo proszę jak ktoś posiada przyjmę z chęcią

  • Gość
    Łukasz poniedziałek, 21 listopad 2016

    Po przeczytaniu tego artykułu zastanawiam się czy sobie nie zainstalować tego rozszerzenia i dlatego mam pytanie:
    W artykule opisujesz jak zainstalować całą JOOMLę w raz z rozszerzeniem Gantry, a jeśli ja mam już zainstalowaną już JOOMLę (na serwerze www) i częściowo już wypełnioną treściami to czy też mogę doinstalować to rozszerzenie czy też muszę przeinstalować całą JOOMLę aby móc z niego korzystać ?

    Pytanie drugie... Czy da się przy pomocy tego rozszerzenia sprawić aby poziome menu "pływało" tzn. żeby było cały czas przyklejone do górnej krawędzi przeglądarki podczas przewijania treści na stronie.

    Pytanie 3ecie... Czy wszystkie szablony stworzone przy użyciu tego rozszerzenia będą responsywne tzn. będą sie poprawnie wyświetlały na wszelakich urządzeniach ?

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek sobota, 10 grudzień 2016

    Łukasz, oczywiście, że możliwe jest zainstalowanie frameworka do istniejącej witryny. Zerknij do trzeciej części artykułu na temat Gantry: https://www.slawop.net/blog/wlasny-szablon-dla-joomla-gantry-cz-3

    Jeżeli chodzi o pływające menu, to w szablonach komercyjnych jest to możliwe za pomocą wyklinania odpowiednich opcji, natomiast w przypadku darmowych rozwiązań należy należy pogrzebać w CSS ;-)

    Szablony utworzone za pomocą Gantry powinny być responsywne, chyba, że taką funkcjonalność wyłączysz ;-)

    Pozdrawiam :-)

  • Gość
    Grzegorz środa, 21 wrzesień 2016

    Super artykuł! Będzie przydatny przy późniejszej modyfikacji serwisu

    Odpowiedz Anuluj
  • Gość
    Marcin wtorek, 22 marzec 2016

    Witam,
    a jak wstawić własne tło w tym szablonie ?

  • Sławomir Pieszczek
    Sławomir Pieszczek czwartek, 31 marzec 2016

    Marcin, trzeba by było trochę pogrzebać w kodzie LESS!
    Niestety nie ma idealnego i prostego narzędzia do wszystkiego i dla wszystkich ;-)
    Pozdrawiam :-)

  • Gość
    Piotr wtorek, 24 listopad 2015

    Zainstalowałem framework Gantry5 oraz szablon hydrogen jednak gdy chce zmienic szablon na oryginalny z joomla beez lub protostar mimo iz joomla przypisała je jako domyslny to jak wchodze na podglad strony caly czas wyswietla mi sie szablon hydrogen jak to mozna zmienic, bo sie w tym pogubiłem :)

  • Sławomir Pieszczek
    Sławomir Pieszczek środa, 25 listopad 2015

    Piotr,
    Prawdopodobnie dlatego, że szablon Hydrogen - Home przypisany jest do pozycji Start w menu ;-)
    Edytuj ustawienia tego szablonu i kliknij zakładkę Przypisz do pozycji menu, a następnie odznacz pozycję do której przypisany jest ten szablon :-)

  • Gość
    Piotr czwartek, 26 listopad 2015

    I to jest fachowa porada- krótka i na temat od razu podziałało ;) dziękuję za pomoc i za czas jaki poświęca Pan dla nas (czyt. laików joomli) bo do takich sie zaliczam ;) swoją drogą świetne poradniki- oszczedzają nam czas i wiele nerwów :)
    pozdrawiam serdecznie
    Piotr

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek czwartek, 26 listopad 2015

    Piotr,
    Dziękuję serdecznie za ciepłe słowa!
    To dla mnie bardzo cenna informacja, ponieważ wiem, że moja praca i poświęcony czas nie idzie na marne :-)
    I im jest ich więcej, tym bardziej mi się chce ;-)

    P.S.
    Mam nadzieję, że niebawem pojawi się kolejny e-book dotyczący tworzenia szablonów. Być może będzie to Gantry 5.
    Ale na razie zachęcam do lektury: Kurs Joomla! Jak stworzyć własny szablon dla Joomla! Gantry 4 (http://bit.ly/gantry4)

  • Gość
    caterpillar piątek, 29 maj 2015

    Bardzo dobre tutoriale
    Jakby ktoś potrzebował zmienić kolor czcionki lub rozmiar na stronie (z poziomu konfiguratora Gantry można tylko kolor linów) to w katalog 'katalog Joomli'/templates/gantry/less w pliku variables.less
    Natomiast czcionkę menu zmieniamy menu-light.less lub menu-dark.less w tym samym katalogu. Może komuś się przyda ta informacja, ja się trochę naszukałem

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek poniedziałek, 01 czerwiec 2015

    caterpillar,
    Dziękuję za uznanie i DZIĘKUJĘ za dodatkowe info :-)

  • Gość
    Janusz piątek, 27 marzec 2015

    Swoimi ostatnimi artykułami (Własny szablon dla Joomla!? z Gantry to proste! - cz. 1 i 2) ponownie potwierdzasz niezwykły talent do tworzenia czytelnych, łatwo pojmowalnych poradników z serii Krok po Kroku !!!
    Chętnie powtórzę opinię, że jesteś ekspertem w tłumaczeniu z polskiego na nasze, i każde nowe narzędzie czy produkt rozpoznawany przez Ciebie kończysz dydaktycznie fantastyczym poradnikiem stanowiącym zwielokrotnioną zachętę, aby zająć się tymi nowościami i cieszyć się ich zaskakującymi możliwościami funkcjonalnymi !!!

    Tak się stało ze mną zostałem skutecznie zachęcony i wykonałem opisane w artykułach procedury obyło się bez niespodzianek, jako że instruktarz był tak precyzyjny, że framework Gantry stał się teraz efektywnym narzędziem do generowania szablonów stosownych do potrzeb !!!

    Muszę jednak odnotować, że na tym etapie znajomości frameworka Gantry wydaje mi się, że framework EF4 ma lepszą kontrolę nad kolorystyką szablonu niż to umożliwia framework Gantry !!!
    Bardzo, bardzo Ci dziękuję za tę użyteczną pracę cenną tak dla mnie osobiście, jak i Społeczności Joomla !!!.

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek wtorek, 31 marzec 2015

    Janusz,
    Dziękuję serdecznie! Dla takich komentarzy, chce się pisać dalej ;-)

    Ściskam gorąco :-)

  • Gość
    Adrian czwartek, 05 marzec 2015

    Super artykuł! Zacząłem tworzyć stronkę z gantry. Jestem zielony jeśli chodzi o grzebanie w kodzie. Czy mógłby mi ktoś wytłumaczyć w jaki sposób mogę zmienić kolor linków na poszczególnych podstronach? Chcę aby na jednej były zielone a na innej np. czerwone.

    Odpowiedz Anuluj
  • Gość
    Adrian poniedziałek, 09 marzec 2015

    pomoże ktoś?

  • Sławomir Pieszczek
    Sławomir Pieszczek środa, 11 marzec 2015

    Adrian,
    Robisz po prostu kopię szablonu, zmieniasz kolor linków i przypisujesz ten szablon do odpowiednich pozycji menu ;-)

    Pozdrawiam :-)

  • Gość
    Sebastian niedziela, 01 marzec 2015

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

  • Gość
    Bartłomiej sobota, 21 luty 2015

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

    Odpowiedz Anuluj
  • Sławomir Pieszczek
    Sławomir Pieszczek środa, 25 luty 2015

    Dzięki Bartłomiej :-D

  • Gość
    Tomek niedziela, 15 luty 2015

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

  • Sławomir Pieszczek
    Sławomir Pieszczek środa, 18 luty 2015

    Tomek,

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

    Pozdrawiam :-)

Zostaw komentarz

Gość
Gość poniedziałek, 17 grudzień 2018

Najnowsze komentarze

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ć???

Joanna

Dziękuje za ten wpis joomla zawsze była dla mnie problematyczna :)

Informatyk

co robić? Zdjęcia wyświetlają się pionowo, jedno pod drugim. Żadna zmiana w opcjach, nic nie daje??? Pomożecie?

Sławomir
05.11.2018 w DJ Image Slider

Właśnie, powinien się pojawić … . Oczywiście skorzystam z rady i zapytam u źródeł. Jeśli dowiem się czegoś mądrego, podzielę się wiedzą, może komuś się przyda. Dziękuję, pozdrawiam, Andrzej

Andrzej
Andrzeju, jeżeli w Ustawieniach podstawowych w zakładce Narzędzia na stronie w polu Powrót do góry masz aktywny przycisk Włączone, to taki przycisk powinien pojawić się u Ciebie na stronie już po prze...